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);
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章