jQuery Easyui 学習データグリッドは editor_jquery を動的に追加および削除します

easyui の行編集を使用する場合、編集機能を完了するのは比較的簡単ですが、ボックスの値に基づいて他の値を動的に変更したり、編集中に特定のボックスを無効にしたりする場合はさらに面倒になります。 。

たとえば、次のようになります。行を追加する場合、各値は手動で入力されますが、変更する場合、最初の値は変更できません。この効果を実現する方法を見てみましょう。

easyui 自体はそのような詳細な機能を提供していないため、自分で拡張する必要があります:

編集する場合は最初の列のエディター属性を削除し、追加する場合は最初の列の属性を追加します。

//扩展datagrid:动态添加删除editor
$.extend($.fn.datagrid.methods, { 
addEditor : function(jq, param) { 
if (param instanceof Array) { 
$.each(param, function(index, item) { 
var e = $(jq).datagrid('getColumnOption', item.field); 
e.editor = item.editor; }); 
} else { 
var e = $(jq).datagrid('getColumnOption', param.field); 
e.editor = param.editor; 
} 
}, 
removeEditor : function(jq, param) { 
if (param instanceof Array) { 
$.each(param, function(index, item) { 
var e = $(jq).datagrid('getColumnOption', item); 
e.editor = {}; 
}); 
} else { 
var e = $(jq).datagrid('getColumnOption', param);
e.editor = {}; 
} 
}
});

が呼び出します:

削除:

$("#dg").datagrid('removeEditor','cardNo');//这里的cardNo是需要移除editor的列的field值

追加:

$("#dg").datagrid('addEditor',[ //添加cardNo列editor
{field:'cardNo',editor:{
type:'textbox',
options:{
required:true,
validType:'length[3,3]', 
invalidMessage:'请输入3位号码!'
}
}
}]

他の操作もそれに応じて拡張できます。