下面直接给你最实用、最常见的扩展编辑器（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);}});}}你现在直接复制方法1到你的页面，刷新就能看到各种高级编辑器效果了！
结合之前的复选框 + 分页 + 行内编辑，完美后台管理系统就齐活了。
想要我给你一个完整的HTML示例（带远程数据 + 多编辑器 + 联动下拉 + 保存校验）？
或者你告诉我你想扩展什么编辑器（比如“颜色选择器”、“文件上传”、“富文本”），我2分钟给你写好自定义代码，复制就能跑！
快说说你现在的需求（比如“要日期+时间选择器”或“联动下拉”），我手把手帮你搞定，5分钟内看到完美扩展效果！
