Easyui 动态改变列

关于Easyui 动态改变列，官方有一个教程:http://www.jeasyui.net/tutorial/27.html，但是这种方式会导致调用datagrid的load方法会向后台发送多次请求，也有另外一种方式是$('#dg').datagrid('columns', [ columns ],data:[]);这样写的，但是这种方式会导致数据查询过程中datagrid没有屏蔽层，故想了另外一种方式来实现这个功能，就是给easyui datagrid添加一个方法refreshColumn，用来刷新列头，再调用load方法加载数据。

下载与项目对应版本的easyui版本：http://www.jeasyui.com/download/list.php

取出/plugins/jquery.datagrid.js的内容，如果需要美化一下可以使用：https://tool.lu/js/

一、构建一个js：easyui.datagrid.refreshColumn.js

下面以jQuery EasyUI 1.4为例：

1.在jquery.datagrid.js中查找‘$.fn.datagrid = function’，在‘this.each(function() {’代码里面可以找到连续的3个方法，由于js混淆方法名可能会不一致，找到位置就行

_5a(this);//构建datagrid表头表格及分页导航

_75(this);//绑定datagrid的一些事件

_1c(this);//datagrid的resize方法

2.删除头尾两行代码‘(function($) {’，‘})(jQuery);’

3.除了function和‘var _1 = 0;’这行代码外，其他的都删除，例如$.fn.datagrid，$.fn.datagrid.methods等

4.在js文件中添加以下代码：

$.extend($.fn.datagrid.methods, $.fn.datagrid.methods, {

    refreshColumn : function(jq, columns) {

        return jq.each(function() {

            _5a(this, columns);

            _75(this);

            _1c(this);

        });

    },

});

5.查找‘function _5a’找到_5a函数，给它增加一个参数：columns，找准位置添加一行代码

_5d.columns = $.extend(true, [], columns);

例：

function _5a(_5b, columns) {

    var _5c = $.data(_5b, "datagrid");

    var _5d = _5c.options;

    _5d.columns = $.extend(true, [], columns);

    var dc = _5c.dc;

    var _5e = _5c.panel;

6.把代码另存为easyui.datagrid.refreshColumn.js

二、使用方式

1.引入easyui.datagrid.refreshColumn.js

2.例子

var columns = [

    {field:'itemid',title:'Item ID',width:80},

    {field:'productid',title:'Product ID',width:80},

    {field:'attr1',title:'Attribute',width:200},

    {field:'status',title:'Status',width:80}

];(如果是动态生成列，这个columns一般是程序生成的)

$('#dg').datagrid('refreshColumn', [ columns ]);

$("#dg").datagrid('load',param);