Con respecto al cambio dinámico de columnas en Easyui, hay un tutorial oficial: http://www.jeasyui.net/tutorial/27.html, pero este método hará que la llamada al método de carga de datagrid envíe múltiples solicitudes al background, y hay otro El método es $('#dg').datagrid('columns', [columns],data:[]); escrito así, pero este método hará que la cuadrícula de datos no tenga una capa protectora durante el proceso de consulta de datos, así que pensé en otra Una forma de lograr esta función es agregar un método refreshColumn a easyui datagrid para actualizar el encabezado de la columna y luego llamar al método de carga para cargar los datos.
Descarga la versión de easyui correspondiente al proyecto: http://www.jeasyui.com/download/list.php
Saque el contenido de /plugins/jquery.datagrid.js, si necesita embellecerlo, puede usar: https://tool.lu/js/
1. Cree un js: easyui.datagrid.refreshColumn.js
Tome jQuery EasyUI 1.4 como ejemplo a continuación:
1. Busque '$.fn.datagrid = function' en jquery.datagrid.js, y puede encontrar 3 métodos consecutivos en el código 'this.each(function() {'). Debido a la confusión de js, los nombres de los métodos pueden ser inconsistentes , solo encuentra la ubicación
_5a(this);//Construir formulario de encabezado de cuadrícula de datos y navegación de paginación
_75(this);//Vincular algunos eventos de datagrid
_1c(this);//método de cambio de tamaño de la cuadrícula de datos
2. Elimine la primera y las dos últimas líneas del código '(function($) {','})(jQuery);'
3. Excepto la función y 'var _1 = 0;', elimine todo lo demás, como $.fn.datagrid, $.fn.datagrid.methods, etc.
4. Agregue el siguiente código al archivo js:
$.extend($.fn.datagrid.métodos, $.fn.datagrid.métodos, {
actualizarColumna: función (jq, columnas) {
return jq.each(función() {
_5a(esto, columnas);
_75(esto);
_1c(este);
});
},
});
5. Busque 'función _5a' para encontrar la función _5a, agréguele un parámetro: columnas, encuentre la posición correcta y añada una línea de código
_5d.columnas = $.extend(verdadero, [], columnas);
ejemplo:
función _5a(_5b, columnas) {
var _5c = $.datos(_5b, "cuadrícula de datos");
var _5d = _5c.opciones;
_5d.columnas = $.extend(verdadero, [], columnas);
var dc = _5c.dc;
var _5e = _5c.panel;
6. Guarde el código como easyui.datagrid.refreshColumn.js
2. Cómo usar
1. Introduzca easyui.datagrid.refreshColumn.js
2. Ejemplos
var columnas = [
{field:'itemid',título:'Id. de artículo',ancho: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);