需求(想要点击第二个编辑器获取到第一个编辑器的值)
点击一行变为编辑器
第一个输入值,点击第二个,获取第一个值
开发
第一步
给数据表格添加单元格点击事件,保证用户无论点击哪个单元格都将这行所有的单元格变为编辑器(注意数据表格一写要加上单选事件,不然后面就不用看了,我只做了单选)
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);
})
}
},
效果(点击行变为编辑行,点击第二列,取到第一列数据)
选择另一行,其他行结束编辑
新人请多多支持