JQgrid Multiselect與eric hynds multiselect的衝突

在我下面提到的演示中，它顯示了jqgrid使用的multiselect插件和eric hynds multiselect插件之間的衝突。我想要的是讓eric hynds插入jqgrid的組合框，而jqgrid multiselect應該保持原樣。但是隨着演示顯示jqgrid multiselect被覆蓋，並在列選擇器也eric hynds multiselect在那裏。JQgrid Multiselect與eric hynds multiselect的衝突

enter code here 
    <html> 

<head> 

<link rel="stylesheet" type="text/css" media="screen" href="css/cyberoam.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery/jquery-ui-1.8.22.custom.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery/jqgrid/ui.jqgrid.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery/jquery.ui.datepicker.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery/ui.multiselect.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery/jquery-ui-timepicker-addon.css" /> 

<script src="javascript/jquery/jquery-1.7.2.min.js" type="text/javascript"></script> 
<script src="javascript/jquery/jquery.ui.widget.js" type="text/javascript"></script> 
<script src="javascript/jquery/jqgrid/ui.multiselect.js" type="text/javascript"></script> 
<script src="javascript/jquery/grid.locale-en.js" type="text/javascript"></script> 
<script src="javascript/jquery/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script> 
<script src="javascript/jquery/jquery.ui.datepicker.js" type="text/javascript"></script> 
<script src="javascript/jquery/jquery-ui-1.8.21.custom.min.js" language="javascript"></script> 
<script src="javascript/jquery/jqgrid/jqgrid.general.js" type="text/javascript"></script> 
<script src="javascript/jquery/jquery-ui-timepicker-addon.js" type="text/javascript"></script> 
<script src="javascript/ajax.js" type="text/javascript"></script> 
<link rel="stylesheet" href="css/common.css" type="text/css" /> 


<link rel="stylesheet" type="text/css" href="css/jquery/jquery.multiselect.css" /> 
    <script type="text/javascript" src="javascript/jquery/jquery.multiselect.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/jquery/jquery.multiselect.filter.css" /> 
    <script type="text/javascript" src="javascript/jquery/jquery.multiselect.filter.js"></script> 


</head> 
<script type="text/javascript"> 
jQuery(function(){ 

    //jQuery.localise('ui-multiselect', {/*language: 'en',*/ path: 'js/locale/'}); 
      jQuery(".multiselect").multiselect({selectedList:10}); 
      //jQuery('#switcher').themeswitcher(); 
}); 
jQuery(document).ready(function() { 


var myData = [ 
        { orderID: "10", orderDate: "2010-09-18", shipmentDate: "2010-09-20", orderStatus: "2" }, 
        { orderID: "15", orderDate: "2010-09-20", shipmentDate: "2010-09-24", orderStatus: "3" }, 
        { orderID: "30", orderDate: "2010-08-28", shipmentDate: "2010-09-01", orderStatus: "4" }, 
        { orderID: "20", orderDate: "2010-10-16", shipmentDate: "2010-10-17", orderStatus: "1" } 
       ], i, l, myRow, orderStatus; 


      var grid = jQuery('#list'); 
      grid.jqGrid({ 
       data: myData, 
       datatype: 'local', 
       caption: 'Order Details', 
       height: 'auto', 
       gridview: true, 
       headertitles: true, 
       viewrecords: true, 
       pager: '#pager', 

       rownumbers: true, 
       colNames: ['Order ID', 'Order', 'Shipment', 'Pending', 'Processing', 'Delivered', 'Order Status'], 
       colModel: [ 
        { name: 'orderID', index: 'orderID', key:true, width: 120, sorttype: 'int' }, 
        { name: 'orderDate', index: 'orderDate', width: 180, 
         sorttype: 'date', formatter: 'date' }, 
        { name: 'shipmentDate', index: 'shipmentDate', width: 180, 
         sorttype: 'date', formatter: 'date' }, 
        { name: 'pending', width: 21, index: 'pending', formatter: 'checkbox', align: 'center', 
         stype: "select", searchoptions: { value: "1:Yes;0:No" } }, 
        { name: 'processing', width: 21, index: 'processing', formatter: 'checkbox', align: 'center', 
         stype: "select", searchoptions: { value: "1:Yes;0:No" } }, 
        { name: 'delivered', width: 21, index: 'delivered', formatter: 'checkbox', align: 'center', 
         stype: 'select', searchoptions: { value: "1:Yes;0:No" } }, 
        { name: 'orderStatus', index: 'orderStatus', width: 50, hidden: true } 
       ] 
      }).jqGrid ('navGrid', '#pager', { edit: false, add: false, del: false, refresh: true, view: false }, 
         {},{},{},{multipleSearch:true,recreateFilter:true}) 
       .jqGrid ('navButtonAdd', '#pager', { caption: "", buttonicon: "ui-icon-calculator", title: "choose columns", 
        onClickButton: function() { 
         grid.jqGrid('columnChooser'); 
        } 
       }); 
}); 
</script> 
<body> 
<select id="countries" class="multiselect" multiple="multiple" name="countries[]"> 
    <option value="AFG">Afghanistan</option> 
    <option value="ALB">Albania</option> 
    <option value="DZA">Algeria</option> 
    <option value="AND">Andorra</option> 
    <option value="ARG">Argentina</option> 
    <option value="ARM">Armenia</option> 
    <option value="ABW">Aruba</option> 
    <option value="AUS">Australia</option> 
    <option value="AUT" selected="selected">Austria</option> 

</select> 

<div style="float:left"> 
     <table id="list"><tbody><tr><td/></tr></tbody></table> 
     <div id="pager"></div> 
    </div> 

</body> 
</html>

來源

2013-03-19 Aamir

所以也許jqGrid的使用multiselect類 - 如果這樣的話只是改變你的代碼，使用不同的類。類似這樣的：

jQuery(".ericmultiselect").multiselect({selectedList:10}); 

<select id="countries" class="ericmultiselect" multiple="multiple" name="countries[]"> 
....

然後它不會與任何jqGrid使用的衝突。

來源

2013-03-19 15:20:53 david

感謝您的回覆。但是這並不能解決問題。它仍然騎過去 – Aamir 2013-03-20 07:29:28

JQgrid Multiselect與eric hynds multiselect的衝突

回答

相關問題