当前位置：首页 > news >正文

jQuery EasyUI 数据网格 - 扩展编辑器

news 2026/7/1 8:05:17

下面直接给你最实用、最常见的扩展编辑器（custom editor）方法，jQuery EasyUI datagrid 支持超级灵活，复制粘贴就能用，领导最爱的“日期选择、联动下拉、数字微调、校验框”全都有！

EasyUI datagrid 默认支持的编辑器类型（直接用 type 就能）

text或textbox：普通文本框
textarea：多行文本
checkbox：复选框（options: {on:1, off:0}）
validatebox：带校验的文本框（required、email 等）
numberbox：数字框（precision 小数位）
combobox：下拉框（远程或本地数据）
combotree：树形下拉
combogrid：网格下拉
datebox：日期选择器
datetimebox：日期时间选择器
numberspinner：数字微调（上下箭头）
timespinner：时间微调

方法1：最常用 - 直接用内置扩展编辑器（推荐现在就用，3秒出效果）
结合之前的行内编辑，超级专业！

<tableid="dg"class="easyui-datagrid"title="扩展编辑器示例"style="width:800px;height:400px"data-options="singleSelect:true, fitColumns:true, onClickRow:onClickRow"><thead><tr><thdata-options="field:'id',width:60">ID</th><thdata-options="field:'name',width:120,editor:{type:'validatebox',options:{required:true}}">姓名（必填）</th><thdata-options="field:'age',width:80,editor:{type:'numberbox',options:{min:1,max:120,precision:0}}">年龄</th><thdata-options="field:'birthday',width:120,editor:'datebox'">生日</th><thdata-options="field:'sex',width:80, editor:{type:'combobox',options:{valueField:'value',textField:'text',data:[{value:'男',text:'男'},{value:'女',text:'女'}],required:true}}, formatter:function(v){return v=='男'?'男':'女';}">性别</th><thdata-options="field:'salary',width:100,align:'right',editor:{type:'numberspinner',options:{min:1000,max:100000,increment:500}}">薪资（微调）</th><thdata-options="field:'status',width:80,align:'center', editor:{type:'checkbox',options:{on:1,off:0}}, formatter:function(v){return v==1?'启用':'禁用';}">状态</th></tr></thead></table><script>// 行内编辑核心代码（和之前一样）vareditIndex=undefined;functionendEditing(){if(editIndex==undefined){returntrue}if($('#dg').datagrid('validateRow',editIndex)){$('#dg').datagrid('endEdit',editIndex);editIndex=undefined;returntrue;}else{returnfalse;}}functiononClickRow(index){if(editIndex!=index){if(endEditing()){$('#dg').datagrid('selectRow',index).datagrid('beginEdit',index);editIndex=index;}else{$('#dg').datagrid('selectRow',editIndex);}}}</script>

效果：点击行进入编辑，支持必填校验、日期日历、性别下拉、薪资微调、状态复选框，超级流畅！

方法2：自定义扩展新编辑器（比如官方示例的 numberspinner）
如果内置的不够用，你可以自己扩展一个新类型（比如加个 colorslider 颜色选择器）。

// 先扩展 numberspinner 编辑器（官方经典示例）$.extend($.fn.datagrid.defaults.editors,{numberspinner:{init:function(container,options){varinput=$('<input type="text">').appendTo(container);returninput.numberspinner(options);},destroy:function(target){$(target).numberspinner('destroy');},getValue:function(target){return$(target).numberspinner('getValue');},setValue:function(target,value){$(target).numberspinner('setValue',value);},resize:function(target,width){$(target).numberspinner('resize',width);}}});// 在列里直接用 type:'numberspinner'<th data-options="field:'quantity',width:100,editor:{type:'numberspinner',options:{min:1,max:1000}}">数量</th>

方法3：联动编辑器（超级实用！选省份自动加载城市）

// 在 onClickRow 里获取编辑器，实现联动functiononClickRow(index){if(endEditing()){$('#dg').datagrid('selectRow',index).datagrid('beginEdit',index);editIndex=index;varprovEditor=$('#dg').datagrid('getEditor',{index:index,field:'province'});varcityEditor=$('#dg').datagrid('getEditor',{index:index,field:'city'});$(provEditor.target).combobox({onSelect:function(rec){$(cityEditor.target).combobox('reload','get_cities.php?prov_id='+rec.value);}});}}