easyui中datagrid行内编辑自动计算

在项目开发中，如果列表中涉及的有计算逻辑的，最偷懒的办法的办法，先建一个form表单，摆一些文本框，读取文本框内的值，编写计算逻辑得出结果，So easy!!!

可是有些客户对打开一个新的表单，太麻烦（客户就是上帝，能解决的麻烦，就给客户解决了），希望能在列表中直接编辑字段内容，自动计算值。我这个需求让我废了半天时间。对计算的列，客户想手动的修改计算的结果。然后还有一列，不手动改，也是实时显示计算结果，直接看截图吧。

目标：红色标注的列修改后，现金和蓝色标注列会根据红色标识列自动算出来；蓝色标注列手动修改后，现金自动变换。

实现过程：

根据EasyUI官方文档，需要为DataGrid，设计全局变量，当前编辑行索引 editIndex；
添加单击编辑单元格事件，设置当前行为编辑状态，上次编辑行结束编辑;
为编辑的单元格添加onChange事件，当编辑的内容发生改变是，获取到改变后的值，计算现金和蓝色标注列；
 在计算过程中获取文本框的值，editors[0].target.val)

在结束编辑时，记得提交最后一次编辑的内容：

 $'#gridList').datagrid'endEdit', editIndex);

  具体代码如下：

    $"#gridList").datagrid{
         $window).width),
        height: $window).height) - 200,
        rownumbers: true,
        fitColumns: false,
        pagination: false,
        singleSelect: true,
        columns: [[
            {
                field: 'col0', title: 'col0',  70,
                editor: {
                    type: 'numberbox',
                    options: {
                        precision: 2,
                        onChange: function ) {
                            setEditingfalse); //自动计算
                            return false;
                        }
                    }
                }
            },
            {
                field: 'col1', title: 'col1',  70,
                editor: {
                    type: 'numberbox',
                    options: {
                        precision: 2,
                        onChange: function ) {
                            Calculatefalse);
                            return false;
                        }
                    }
                }
            },
             {
                 field: 'col2', title: 'col2',  70,
                 editor: {
                     type: 'numberbox',
                     options: {
                         precision: 2,
                         onChange: function ) {
                             Calculatetrue);
                             return false;
                         }
                     }
                 }
             },
            { field: 'cash', title: '现金',  70 }
         
        ]],
        onClickCell: onClickCell// 鼠标单击某一行时开启该行的编辑状态
    });

//全局变量需要编辑的行
var editIndex = undefined; 
function endEditing) {
    if editIndex == undefined) { return true }
    if $'#gridList').datagrid'validateRow', editIndex)) {
        $'#gridList').datagrid'endEdit', editIndex);
        editIndex = undefined;
        return true;
    } else {
        return false;
    }
}
function onClickCellindex, field) {
    if editIndex != index) {
        if endEditing)) {
            $'#gridList').datagrid'selectRow', index)
                    .datagrid'beginEdit', index);
            var ed = $'#gridList').datagrid'getEditor', { index: index, field: field });
            if ed) {
                $ed.target).data'textbox') ? $ed.target).textbox'textbox') : $ed.target)).focus);
            }
            editIndex = index;
        } else {
            setTimeoutfunction ) {
                $'#gridList').datagrid'selectRow', editIndex);
            }, 0);
        }
    }
}

/*function: 自动计算结算金额值
* param:AutoCol4--布尔类型，true表示手动修改蓝色列
*/
function CalculateAutoCol4) {
    var editors = $'#gridList').datagrid'getEditors', editIndex);
    if editors.length==0)
        return false;
    var Editor0 = parseInteditors[0].target.val)) //获取文本框的值
    var Editor1 = parseInteditors[1];.target.val));
    
    var oillfee = parseInt Editor0 + Editor1);
    var Col2 = 0;
    if AutoCol4)
        Col2 = editors[2].target.val);
    else 
        $editors[2].target).numberbox'setValue', Col2);
    var cash = parseIntoillfee - Col2);
    row.col2 = oillfee; //刷新第三列的值
    row.cash = cash;//刷新现金列的值
    $"#datagrid-row-r1-2-" + editIndex + " td[field='cash'] div").htmlcash);//实时刷新现金列的限制
}

View Code