JQgrid多选与eric hynds多选冲突
JQgrid多选与eric hynds多选冲突
提问于 2013-03-19 20:25:52
在我下面提到的演示中，它显示了jqgrid使用的多选插件和eric hynds多选插件之间的冲突。我想要的是eric hynds在jqgrid外插入组合框，jqgrid 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>回答 2
Stack Overflow用户
发布于 2013-03-19 23:20:54
因此，也许jqGrid正在使用multiselect类--如果是这样，那么只需更改您的代码以使用不同的类。如下所示：
jQuery(".ericmultiselect").multiselect({selectedList:10});
<select id="countries" class="ericmultiselect" multiple="multiple" name="countries[]">
....那么它就不会与jqGrid正在使用的任何东西发生冲突。
Stack Overflow用户
发布于 2020-12-09 08:10:39
这真的很晚了，但以防有人谷歌了这个。
你想进入jquery.multiselect.js
找到这一行：
$.widget("ech.multiselect", {并将小部件/插件名称更改为如下所示
$.widget("ech.multiselectdifferentname", {现在，您必须找到在代码中调用multiselect的位置。对于上面的示例，它将是
jQuery(".multiselect").multiselect({selectedList:10});因此，您可以将其更改为
jQuery(".multiselect").multiselectdifferentname({selectedList:10});这是因为您已经在使用作为jquery.ui multiselect的ui.multiselect.js。这就是控制columnChooser选择框的东西。这与使用相同名称的Eric Hynds多选插件冲突。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15499480
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号