jquery easyui datagrid 动态隐藏列

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lqh4188/article/details/70853286

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