使用的插件 - jquery.jqGrid-4.4.4 和使用的自定义主题 - jquery-ui-1.9.2.custom.css
我需要格式化 JQGrid 列选择器的显示，使其看起来像这个示例
但我似乎没有得到类似的选项来选择列，而是显示一个列表框来选择行，如下图所示
，通过为用户按下“Ctrl”键。同样在单击“确定”或“取消”时，jquery.1.9.0.js 会引发异常，如图所示
我的文件和链接的参考顺序如下：-
JS引用顺序
<link href="../../Content/jquery-ui/jquery.multiselect.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-grid/jquery.multiselect.js" type="text/javascript"></script>
<script src="../../Scripts/jqueryui/1.10.1/jquery-ui.min.js" language="javascript" type="text/javascript"></script>
<script src="../../Scripts/20110223/json2.js" language="javascript" type="text/javascript"></script>
<link rel="stylesheet" href="../../Content/jquery-grid/ui.jqgrid.css" type="text/css" />
<script src="../../Scripts/jquery-grid/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-grid/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="../../Scripts/Custom_Scripts/list.js" type="text/javascript"></script>
JQGrid 函数的 JS 存储在文件“list.js”中，最后引用。
其中的JS如下：-
$("#jqTable").GridUnload();
var mydata = { id: 1, name: 'abc' };
var mygrid = jQuery("#jqTable").jqGrid({
url: perfectmspURL,
mtype: 'POST',
postdata: { 'mydata1': function () { return JSON.stringify(mydata); } },
datatype: "json",
colNames: data.colNames,
colModel: data.colModel,
multiselect: false,
pgbuttons: true,
rowNum: 25,
//scroll:true,
//rowList: [5, 10, 20, 50, 100],
autowidth:true,
// width: 1100,
height: "98%",
//scrollOffset: 0,
//forcefit: true,
shrinktofit: false,
altRows: true,
altclass: 'myAltRowClass',
//pginput:false,
sortname : 'CompanyName',
sortorder : 'desc',
pager: jQuery('#jqTablePager'),
sortorder: "asc",
viewrecords: true
});
// appending the pager
jQuery("#jqTable").jqGrid('navGrid', '#jqTablePager', { del: false, add: false, edit: false, search: false }, {}, {}, {}, { multipleSearch: true });
// for showing show/hide column
var width = parseInt($('#gridcontainer').width()-5);
var grid = $('#jqTable');
grid.jqGrid('navButtonAdd', '#jqTablePager',{ caption: "", buttonicon: "ui-icon-calculator",
title: "Choose Columns",
onClickButton: function () {
grid.jqGrid('columnChooser', {
done : function (perm) {
// alert("width " + width + "perm : " + perm);
if (perm) {
// "OK" button are clicked
//this.jqGrid("remapColumns", perm, true);
// the grid width is probably changed co we can get new width
// and adjust the width of other elements on the page
//var gwdth = this.jqGrid("getGridParam","width");
grid.jqGrid("setGridWidth",width);
}
else {
// we can do some action in case of "Cancel" button clicked
this.jqGrid("setGridWidth",width);
}
} // done function ends here
});
} // onClickButton function ends here.
}); // navButtonAdd ends here