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

下面直接给你最实用、最常见的扩展编辑器（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秒出效果）
结合之前的行内编辑，超级专业！

<table id="dg" class="easyui-datagrid" title="扩展编辑器示例" style="width:800px;height:400px"
    data-options="singleSelect:true, fitColumns:true, onClickRow:onClickRow">
    <thead>
        <tr>
            <th data-options="field:'id',width:60">ID</th>
            <th data-options="field:'name',width:120,editor:{type:'validatebox',options:{required:true}}">姓名（必填）</th>
            <th data-options="field:'age',width:80,editor:{type:'numberbox',options:{min:1,max:120,precision:0}}">年龄</th>
            <th data-options="field:'birthday',width:120,editor:'datebox'">生日</th>
            <th data-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>
            <th data-options="field:'salary',width:100,align:'right',editor:{type:'numberspinner',options:{min:1000,max:100000,increment:500}}">薪资（微调）</th>
            <th data-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>
// 行内编辑核心代码（和之前一样）
var editIndex = undefined;
function endEditing(){
    if (editIndex == undefined){return true}
    if ($('#dg').datagrid('validateRow', editIndex)){
        $('#dg').datagrid('endEdit', editIndex);
        editIndex = undefined;
        return true;
    } else {
        return false;
    }
}
function onClickRow(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){
            var input = $('<input type="text">').appendTo(container);
            return input.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 里获取编辑器，实现联动
function onClickRow(index){
    if (endEditing()){
        $('#dg').datagrid('selectRow', index).datagrid('beginEdit', index);
        editIndex = index;

        var provEditor = $('#dg').datagrid('getEditor', {index:index, field:'province'});
        var cityEditor = $('#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分钟内看到完美扩展效果！