表形式のデータを表示するために SmartAdmin jqgrid を使用しています。データテーブルの列数が動的に変化するたびに。DataTable を json オブジェクトに変換し、それを jqgrid に割り当てています。jqgrid は内部的に各列に等しい幅を設定しているようです。jqgrid から列を非表示にすると、その列は非表示になりますが、ページにそのスペースが表示されます。jqgrid が幅をすべての表示可能な列に分割することを望みます。
ここに私のコードスニペットがあります:
<table id="jqgrid" style="width:100%"></table>
<div id="pjqgrid"></div>
jqgrid の初期化:
jQuery("#jqgrid").jqGrid({
data: <% = GetJasonData %>,
datatype: "local",
height: 'auto',
colNames: jsonColname,
colModel: <% = GetJsonColModel %>,
rowNum: 2,
rowList: [10, 20, 30],
pager: '#pjqgrid',
sortname: 'Name',
toolbarfilter: true,
viewrecords: true,
sortorder: "asc",
caption: "All Entries ",
multiselect: true,
shrinkToFit: true,
autowidth: true
});
jQuery("#jqgrid").jqGrid('navGrid', "#pjqgrid", {
edit: false,
add: false,
del: true
});
jQuery("#jqgrid").jqGrid('inlineNav', "#pjqgrid");
/* Add tooltips */
$('.navtable .ui-pg-button').tooltip({
container: 'body'
});
jQuery("#m1").click(function () {
var s;
s = jQuery("#jqgrid").jqGrid('getGridParam', 'selarrrow');
alert(s);
});
jQuery("#m1s").click(function () {
jQuery("#jqgrid").jqGrid('setSelection', "13");
});
$('#jqgrid').hideCol('EFORMINSTANCEID');
//// remove classes
//$(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
$(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default");
$(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr");
//$(".ui-jqgrid-pager").removeClass("ui-state-default");
//$(".ui-jqgrid").removeClass("ui-widget-content");
// add classes
$(".ui-jqgrid-htable").addClass("table table-bordered table-hover");
$(".ui-jqgrid-btable").addClass("table table-bordered table-striped");
})
$(window).on('resize.jqGrid', function () {
$("#jqgrid").jqGrid('setGridWidth', $("#content").width());
})
GetJasonData と GetJsonColModel が json オブジェクトを保持している場所。
前もって感謝します。迅速な対応が高く評価されています。