项目中有个datagrid需要编辑行时,用到Editor的属性,那么如何添加一个事件
问题:同一个编辑行中的某个单元格值改变时,修改其他单元格的值
页面用到的datagrid
检查项编号 | 检查项名称 | 检查项结果 | 检查状态 | 参考值 | 项目单位 |
---|
如上所示,我编辑行时,只要修改检查项和检查结果两个列,是检查项结果值改变,带出检查状态
js中如何实现
//grid的单击事件 this.grid.onClickRow = function(rowIndex,rowData) { //单击时触发编辑行事件 $('#list').datagrid('beginEdit',rowIndex); //获取当前修改行编辑器的数据 var editors = $('#list').datagrid('getEditors', rowIndex); //获取行编辑器第一个对象 var editor1 = editors[0]; var editor2 = editors[1]; //console.log(rowData); //为对象的数字框添加onChange事件 editor1.target.numberbox({ onChange:function(newValue,oldValue){ if(newValue > 0) { //获取检查项的最小值和最大值 var minValue = parseFloat(rowData.MinValue); var maxValue = parseFloat(rowData.MaxValue); if(newValue > maxValue){ //设置combobox的值为偏高(2) editor2.target.combobox('setValue',2); } else if(newValue < minValue){ //设置combobox的值为偏低(1) editor2.target.combobox('setValue',1); } else{ //设置combobox的值正常(0) editor2.target.combobox('setValue',0); } 传递检查项结果data数据 //var dts={"ItemId": rowData.Uid,"ProjectId":rowData.ProjectId,"ProjectResult":newValue}; 请求计算结果(正常(0)、偏低(1)、偏高(2)) //com.ajax({ // type: 'POST', // url: '/api/bpum/PumPrenatalInspect/GetProjectState/' + rowData.Uid, // data: JSON.stringify(dts), // success: function (str) // { // //设置combobox的值 // editor2.target.combobox('setValue',str); // }, // error: function (e) { // com.message('error', e.responseText); // } //}); } } }); }
图片实例:
实现原理:
通过行单击事件中rowIndex获取行的编辑器对象editors,由于我们只有两个列编辑的,所以editors[0]就获取第一列检查项结果编辑的对象,
editors[1]获取检查状态的对象,由于第一个单元格是numberBox,第二个combobox,我们给numberBox绑定一个onChage()事件,判断当第一个单元格
值改变时,修改第二个单元格的值。其他类型也可以修改,改成对应类型就可以了(修改数值也可以用ajax请求后修改,但是会出现刷新问题)
参考网址:
https://www.cnblogs.com/linvan/p/6607465.html