【获取数据表格(datagrid)中编辑器(editor)的值】

需求（想要点击第二个编辑器获取到第一个编辑器的值）

点击一行变为编辑器

 

 第一个输入值，点击第二个，获取第一个值

开发 

        第一步

        给数据表格添加单元格点击事件，保证用户无论点击哪个单元格都将这行所有的单元格变为编辑器(注意数据表格一写要加上单选事件，不然后面就不用看了，我只做了单选)

onClickCell: function (rowIndex, field, value) {//在用户点击一个单元格的时候触发
    editsIndex = rowIndex;
    if(field =='orderNo' || field =='productName' || field =='productModel' || field == 'orderQty' || field == 'deliveryDate'
                    ||field =='customerName'||field =='projectName'){//点击其他结束编辑行
         $('#addGrid').datagrid('beginEdit', rowIndex);//开始编辑行
    }else{
         $('#addGrid').datagrid('endEdit', rowIndex);//结束编辑行
    }

}

        所用事件

 

 第二步

        获取到每个编辑器

var addEditor=$('#addGrid').datagrid('getEditors', rowIndex);//获取指定行的编辑器。

         所用事件

 第三步

        给每一个编辑器另上点击事件

for (var i = 0; i < addEditor.length; i++) {
    addEditor[i].target.click(function (data) {//target：目标编辑器的jQuery对象。


    })
}

第四步

        获取选中的行，通过选中的行返回行的索引，再过能行的索引就能获取到指定行的编辑器，之后通过val方法返回被选元素的值。（这就是只能单选的原因，不然getSelected方法就会没用）

var row=$('#addGrid').datagrid('getSelected');//获取选择中的行
var rowIndex=$('#addGrid').datagrid('getRowIndex',row);//根据选择中的行得到行序号
var editds=$('#addGrid').datagrid('getEditors',rowIndex);//根据序号获取该行所有的编辑器组
var editdsValue1=editds[0].target.val();//通过单个编辑器获取该编辑器的值
console.log(editdsValue1);

        所用事件

 

 

 

第五步 

        本来没有第五步，在测试的时候发现，当该行为编辑器行，点击其他行，该行没有删除，第一次没有任务问题，当数据表格当中存在多行编辑器时，再次点击编辑器行并没有被选中，第四步就取值就会出现问题

        问题（当点击其他行的编辑器时，取的值还是被选中行的值） 

        解决当启动该行为编辑器时，同时将其他行编辑器关闭，并同时选中目前编辑器所在的行

onBeforeEdit:function (rowIndex, rowData) {//在用户开始编辑一行的时候触发
    var rows= $('#addGrid').datagrid('getRows');//返回当前页的所有行。
    for (var i = 0; i < rows.length; i++) {
        if (i===rowIndex){
            $('#addGrid').datagrid('clearSelections');//清除所有选择的行
            $('#addGrid').datagrid('selectRow',rowIndex);//选择一行，行索引从0开始
        }else {
            $('#addGrid').datagrid('endEdit', i);//关闭行编辑器
        }
    }
},

         所用事件

 

 完整代码如下

onBeforeEdit:function (rowIndex, rowData) {//在用户开始编辑一行的时候触发
                    var rows= $('#addGrid').datagrid('getRows');
                    for (var i = 0; i < rows.length; i++) {
                        if (i===rowIndex){
                            $('#addGrid').datagrid('clearSelections');
                            $('#addGrid').datagrid('selectRow',rowIndex);
                        }else {
                            $('#addGrid').datagrid('endEdit', i);
                        }
                    }
                },
onClickCell: function (rowIndex, field, value) {//在用户点击一个单元格的时候触发
                    //
                    var addEditor=$('#addGrid').datagrid('getEditors', rowIndex);
                    for (var i = 0; i < addEditor.length; i++) {
                        addEditor[i].target.click(function (data) {
                            var row=$('#addGrid').datagrid('getSelected');
                            var rowIndex=$('#addGrid').datagrid('getRowIndex',row);
                            var editds=$('#addGrid').datagrid('getEditors',rowIndex);
                            var editdsValue1=editds[0].target.val();
                            console.log(editdsValue1);
                        })
                    }
                },

效果(点击行变为编辑行，点击第二列，取到第一列数据)

选择另一行，其他行结束编辑 

---

---

 

 新人请多多支持