jquery easyui datagrid 動態隱藏列

datagrid列表控制元件在需要動態顯示、隱藏列時，若使用hideColumn會出錯顯示錯位的問題，

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