2

在我下面提到的演示中，它显示了 jqgrid 使用的多选插件和 eric hynds 多选插件之间的冲突。我想要的是让 eric hynds 插入 jqgrid 之外的组合框，并且 jqgrid 多选应该是原样。但正如演示所示，jqgrid 多选被覆盖，并且在列选择器中也有 eric hynds 多选。

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>
4

2 回答 2

0

所以也许 jqGrid 正在使用multiselect该类 - 如果是这样，那么只需更改您的代码以使用不同的类。像这样的东西：

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

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

然后它不会与任何 jqGrid 使用的冲突。

于 2013-03-19T15:20:53.887 回答
0

这真的很晚，但万一有人用谷歌搜索这个。

你想进入 jquery.multiselect.js

找到这一行：

$.widget("ech.multiselect", {

并将小部件/插件名称更改为类似

$.widget("ech.multiselectdifferentname", {

现在您必须找到在代码中调用多选的位置。对于上面的示例，它将是

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

所以你把它改成

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

这是因为您已经在使用 ui.multiselect.js，它是 jquery.ui 多选。这是控制 columnChooser 选择框的内容。这与使用相同名称的 Eric Hynds 多选插件冲突。

于 2020-12-09T00:10:38.523 回答