jquery easyui datagrid 動態隱藏列
阿新 • • 發佈:2019-02-10
datagrid列表控制元件在需要動態顯示、隱藏列時,若使用hideColumn會出錯顯示錯位的問題,可能過兩種方式來解決此問題: 1.設定hidden屬性 2.重寫列頭
示例datagrid
$('#magazineGrid').datagrid({ height: 340, url: 'url', method: 'POST', queryParams: { 'id': id }, idField: '產品ID', pageSize: 10, pageList: [10, 20, 50, 100, 150, 200], showFooter: true, columns: [[ { field: 'ck', checkbox: true }, { field: '刊名', title: '刊名', width: 180, align: 'left' }, { field: '類別', title: '類別', width: 150, align: 'left' }, { field: '月份', title: '月份', width: 100, align: 'left' }, { field: '期次', title: '期次', width: 100, align: 'left'} ]], onBeforeLoad: function (param) { }, onLoadSuccess: function (data) { }, onLoadError: function () { }, onClickCell: function (rowIndex, field, value) { } });
如上,假設我們要根據條件來動態顯示或隱藏【其次】列,若$('#magazineGrid').datagrid('hideColumn', '期次')這樣設定,展示時會出現錯位問題,
可通過下面兩種方式來處理
1.設定hidden
{ field: '期次', title: '期次', width: 100, align: 'left',hidden:條件==true?true:false }
2.重寫列頭(只是將此列設定為空,列寬度仍存在)
//重寫標題 $.extend($.fn.datagrid.methods, { setColumnTitle: function (jq, option) { if (option.field) { return jq.each(function () { var $panel = $(this).datagrid("getPanel"); var $field = $('td[field=' + option.field + ']', $panel); if ($field.length) { var $span = $("span", $field).eq(0); $span.html(option.text); } }); } return jq; } });
if (條件) { $("#magazineGrid").datagrid("setColumnTitle", { field: '期次', text: '' }); }