easyui中datagrid行内编辑自动计算

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

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

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

实现过程：

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

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

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

  具体代码如下：

    $("#gridList").datagrid({
        width: $(window).width(),
        height: $(window).height() - 200,
        rownumbers: true,
        fitColumns: false,
        pagination: false,
        singleSelect: true,
        columns: [[
            {
                field: 'col0', title: 'col0', width: 70,
                editor: {
                    type: 'numberbox',
                    options: {
                        precision: 2,
                        onChange: function () {
                            setEditing(false); //自动计算
                            return false;
                        }
                    }
                }
            },
            {
                field: 'col1', title: 'col1', width: 70,
                editor: {
                    type: 'numberbox',
                    options: {
                        precision: 2,
                        onChange: function () {
                            Calculate(false);
                            return false;
                        }
                    }
                }
            },
             {
                 field: 'col2', title: 'col2', width: 70,
                 editor: {
                     type: 'numberbox',
                     options: {
                         precision: 2,
                         onChange: function () {
                             Calculate(true);
                             return false;
                         }
                     }
                 }
             },
            { field: 'cash', title: '现金', width: 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 onClickCell(index, 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 {
            setTimeout(function () {
                $('#gridList').datagrid('selectRow', editIndex);
            }, 0);
        }
    }
}

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

View Code