使用するプラグイン - jquery.jqGrid-4.4.4 および使用するカスタム テーマ - jquery-ui-1.9.2.custom.css
JQGrid column-chooser の表示をこの例のようにフォーマットする必要があります
しかし、列を選択するための同様のオプションすら得られないようです。代わりに
、ユーザーの「Ctrl」キーを押すことで、下の画像のように行を選択するためのリストボックスが表示されます。また、「OK」または「キャンセル」をクリックすると、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