jquery easyui datagrid 动态隐藏列

时间:2022-01-21 16:16:51

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: '' });
        }