Regarding the dynamic change of columns in Easyui, there is an official tutorial: http://www.jeasyui.net/tutorial/27.html, but this method will cause the call to the load method of datagrid to send multiple requests to the background, and there is another The method is $('#dg').datagrid('columns', [ columns ],data:[]); written like this, but this method will cause the datagrid to have no shielding layer during the data query process, so I thought of another One way to achieve this function is to add a method refreshColumn to easyui datagrid to refresh the column header, and then call the load method to load the data.
Download the easyui version corresponding to the project: http://www.jeasyui.com/download/list.php
Take out the content of /plugins/jquery.datagrid.js, if you need to beautify it, you can use: https://tool.lu/js/
1. Build a js: easyui.datagrid.refreshColumn.js
Take jQuery EasyUI 1.4 as an example below:
1. Look for '$.fn.datagrid = function' in jquery.datagrid.js, and you can find 3 consecutive methods in the code of 'this.each(function() {'. Due to js confusion, the method names may be inconsistent. just find the location
_5a(this);//Construct datagrid header form and paging navigation
_75(this);//Bind some events of datagrid
_1c(this);//resize method of datagrid
2. Delete the first and last two lines of code '(function($) {','})(jQuery);'
3. Except function and 'var _1 = 0;', delete everything else, such as $.fn.datagrid, $.fn.datagrid.methods, etc.
4. Add the following code to the js file:
$.extend($.fn.datagrid.methods, $.fn.datagrid.methods, {
refreshColumn : function(jq, columns) {
return jq.each(function() {
_5a(this, columns);
_75(this);
_1c(this);
});
},
});
5. Search for 'function _5a' to find the _5a function, add a parameter to it: columns, find the correct position and add a line of code
_5d.columns = $.extend(true, [], columns);
example:
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. Save the code as easyui.datagrid.refreshColumn.js
2. How to use
1. Introduce easyui.datagrid.refreshColumn.js
2. Examples
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);