Easyui での列の動的な変更については、公式チュートリアルがあります: http://www.jeasyui.net/tutorial/27.html ですが、このメソッドでは、datagrid のloadメソッドを呼び出して、複数のリクエストをデータグリッドに送信します。メソッドは $('#dg').datagrid('columns', [ columns ],data:[]); のように書かれていますが、このメソッドではデータグリッドにシールド層が存在しません。データ クエリ プロセスに問題があるため、この機能を実現する別の方法を考えました。それは、メソッド RefreshColumn を easyui datagrid に追加して列ヘッダーを更新し、その後、load メソッドを呼び出してデータをロードすることです。
プロジェクトに対応する easyui バージョンをダウンロードします: http://www.jeasyui.com/download/list.php
/plugins/jquery.datagrid.js のコンテンツを取り出します。美しくする必要がある場合は、https://tool.lu/js/ を使用できます。
1. js を構築します: easyui.datagrid.refreshColumn.js
以下の例として jQuery EasyUI 1.4 を取り上げます。
1. jquery.datagrid.js で「$.fn.datagrid = function」を探すと、「this.each(function() {」コード内に 3 つの連続したメソッドが見つかります。js の混乱により、メソッド名が矛盾している可能性があります。 、場所を見つけるだけです
_5a(this);//データグリッド ヘッダー フォームとページング ナビゲーションを構築します
_75(this);//データグリッドのいくつかのイベントをバインドします
_1c(this);//データグリッドのサイズ変更メソッド
2. コード「(function($) {','})(jQuery);」の最初と最後の 2 行を削除します。
3. function と 'var _1 = 0;' を除き、$.fn.datagrid、$.fn.datagrid.methods などの他のすべてを削除します。
4. 次のコードを js ファイルに追加します。
$.extend($.fn.datagrid.methods, $.fn.datagrid.methods, {
freshColumn : function(jq, columns) {
return jq.each(function() {
_5a(これ、列);
_75(これ);
_1c(これ);
});
}、
});
5. 「function _5a」を検索して _5a 関数を見つけ、それにパラメーターを追加します: columns。正しい位置を見つけてコード行を追加します。
_5d.columns = $.extend(true, [], columns);
例：
関数 _5a(_5b, 列) {
var _5c = $.data(_5b, "データグリッド");
var _5d = _5c.オプション;
_5d.columns = $.extend(true, [], columns);
var dc = _5c.dc;
var _5e = _5c.パネル;
6. コードを easyui.datagrid.refreshColumn.js として保存します。
2. 使用方法
1. easyui.datagrid.refreshColumn.jsの導入
2. 例
var columns = [
{フィールド:'itemid',title:'アイテムID',width:80},
{フィールド:'製品ID',タイトル:'製品ID',幅:80},
{field:'attr1',title:'Attribute',width:200},
{field:'status',title:'Status',width:80}
];(如果是动态生成列，这个columns一般是程序生成的)
$('#dg').datagrid('refreshColumn', [ columns ]);
$("#dg").datagrid('load',param);