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