easyui可编辑表格编辑器设置值

假设有这样的场景，使用easyUI的可编辑表格时，有些内容是通过其中一个编辑器编辑完后到后台取数据，返回数据后插入到部分编辑器中，为编辑器设置值可以用以下的方法

function setGridFieldsValue(gridID,rowIndex,fieldArr,rowData,focusField){
    //gridID 是表格的ID，rowIndex是当前编辑行的索引，fieldArr是要插入值的字段数组，rowData是要插入的数据（json对象），focusField是插入数据后，焦点在哪个字段上
    var editors = $("#"+gridID).datagrid("getEditors",rowIndex),
        editorLength = editors.length;
    for(var j=0; j<fieldArr.length; j++){
        for(var i=0; i<editorLength; i++){
            var ed = editors[i];
            if(ed.field == fieldArr[j]){
                $(ed.target)[ed.type]("setValue",rowData[fieldArr[j]]);
            }else if(ed.field == focusField){
                $(ed.target.siblings("span").children("input")).focus();
            }
        }
    }
    $("#"+gridID).datagrid('clearSelections');
}

完整示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>可编辑表格编辑器设置值</title>
        <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css"/>
        <link rel="stylesheet" type="text/css" href="../easyui1.5/themes/bootstrap/easyui.css"/>
        <link rel="stylesheet" type="text/css" href="../easyui1.5/themes/icon.css"/>
        <script src="../easyui1.5/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../easyui1.5/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../easyui1.5/jquery.edatagrid.js" type="text/javascript" charset="utf-8"></script>
        <script src="../easyui1.5/locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            /**
             * 解决在编辑时看不到内容的问题，这是由于使用easyUI的bootstrap主题导致的
             */
            .datagrid-row.datagrid-row-editing.datagrid-row-selected{
                background: #F3F3F3;
                color: #333333;
            }
        </style>
    </head>
    <body>

        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <table id="editorEventGrid" style="width: 100%;height: 400px;"></table>
                    <div id="gridToolbar" class="container-fluid">
                        <div class="row">
                            <div class="col-sm-12">
                                <a class="btn btn-sm btn-primary pull-right" onclick="addRow()">增加</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript">

            var userData = [
                {"uid":1,"username":"张三","age":20,"sex":0,"cell":"13076847475","birthday":"1990-01-01"},
                {"uid":2,"username":"李四","age":30,"sex":1,"cell":"15876847478","birthday":"1990-02-02"},
                {"uid":3,"username":"王五","age":40,"sex":0,"cell":"18976847479","birthday":"1990-03-03"}
            ]

            $(function(){

                var rowEditingIndex=0;
                $("#editorEventGrid").edatagrid({
                    singleSelect:true,
                    striped:true,
                    nowrap:true,
                    fitColumns:true,
                    loadMsg:"加载数据中...",
                    pagination:true,
                    pageNumber:1,
                    pageSize:30,
                    pageList:[30,40,50],
                    toolbar:"#gridToolbar",
                    columns:[[
                        {field:'uid',title:'姓名',width:80,formatter:function(value,row,index){return row.username},editor:{type:'combobox',options:{
                            required:true,
                            textField:'name',
                            valueField:'uid',
                            selectOnNavigation:false,
                            data:[
                                {name:"张三",uid:1},
                                {name:'李四',uid:2},
                                {name:'王五',uid:3},
                                {name:'王老五',uid:4}
                            ],
                            onChange:function(n,o){
                                if(n){
                                    //正常情况下，应该到后台获取数据
                                    var obj = getObj(n);
                                    if(obj){
                                        setGridFieldsValue("editorEventGrid",rowEditingIndex,["age","sex","cell","birthday"],obj,"address");
                                    }
                                }
                            }
                        }}},
                        {field:'age',title:'年龄',width:40,align:'right',editor:'numberbox'},
                        {field:'sex',title:'性别',width:40,formatter:function(value,row,index){return row.sexName},editor:{type:'combobox',options:{
                            textField:'text',
                            valueField:'value',
                            data:[
                                {text:"男",value:0},
                                {text:"女",value:1}
                            ]
                        }}},
                        {field:'cell',title:'手机',width:80,align:'center',editor:{type:'numberbox',options:{required:true}}},
                        {field:'address',title:'地址',width:150,editor:{type:"textbox",options:{required:true}}},
                        {field:'birthday',title:'生日',width:60,align:'center',editor:'datebox'}
                    ]],
                    onAdd:function(index,row){
                        rowEditingIndex = index;
                        //添加行时，让第一个编辑器获取焦点
                        $(".datagrid-row-editing .textbox-text")[0].focus();
                        //为编辑器添加键盘事件
                        var editors = $("#editorEventGrid").edatagrid("getEditors",index);
                        for(var i=0; i<editors.length; i++){
                            var editor = editors[i];
                            $(editor.target.siblings("span").children("input")).on("keydown",function(e){
                                var code = e.keyCode || e.which;
                                if(code == 13){//13是回车键
                                    addRow();
                                }else if(code == 38){//38是方向↑键
                                    cancelRow();
                                }
                            });
                        }
                  },
                  onEndEdit:endEditing
                })

            });

            function addRow(){
                $("#editorEventGrid").edatagrid("addRow");
            }

            function cancelRow(){
                $("#editorEventGrid").edatagrid("cancelRow");
            }

            function endEditing(index,row){
                var ed = $("#editorEventGrid").edatagrid("getEditor",{index:index,field:'uid'});
                var ed2 = $("#editorEventGrid").edatagrid("getEditor",{index:index,field:'sex'});
                row.username = $(ed.target).combobox("getText");
                row.sexName = $(ed2.target).combobox("getText");
            }

            function setGridFieldsValue(gridID,rowIndex,fieldArr,rowData,focusField){
                //gridID 是表格的ID，rowIndex是当前编辑行的索引，fieldArr是要插入值的字段数组，rowData是要插入的数据（json对象），focusField是插入数据后，焦点在哪个字段上
                var editors = $("#"+gridID).datagrid("getEditors",rowIndex),
                    editorLength = editors.length;
                for(var j=0; j<fieldArr.length; j++){
                    for(var i=0; i<editorLength; i++){
                        var ed = editors[i];
                        if(ed.field == fieldArr[j]){
                            $(ed.target)[ed.type]("setValue",rowData[fieldArr[j]]);
                        }else if(ed.field == focusField){
                            $(ed.target.siblings("span").children("input")).focus();
                        }
                    }
                }
            }


            function getObj(uid){
                for(var i=0; i<userData.length; i++){
                    if(userData[i].uid == uid){
                        return userData[i]
                    }
                }
            }

        </script>

    </body>
</html>

原文链接：https://blog.csdn.net/liupq66/article/details/73335800