easyUI在可编辑的datagrid中计算两列的值

来源：互联网发布：白鲨外设淘宝店编辑：程序博客网时间：2024/06/10 08:28

@author YHC

在这个教程中你将学习如何包含一个运算的列在可编辑的datagrid中,一个运算列通常包含一些运算值从一个或多个其他列.

查看Demo

首先,创建一个可编辑的datagrid,这就是我们创建的一些可编辑列,'listprice','amount' 和'unitcost' 列定义为numberbox 编辑类型,运算列是 'unitcost'字段,

将是 listprice 乘以 amount列的结果.

<table id="tt" style="width:600px;height:auto"          title="Editable DataGrid with Calculated Column" iconCls="icon-edit" singleSelect="true"          idField="itemid" url="data/datagrid_data.json">      <thead>          <tr>              <th field="itemid" width="80">Item ID</th>              <th field="listprice" width="80" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>              <th field="amount" width="80" align="right" editor="{type:'numberbox',options:{precision:0}}">Amount</th>              <th field="unitcost" width="80" align="right" editor="numberbox">Unit Cost</th>              <th field="attr1" width="150" editor="text">Attribute</th>              <th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}">Status</th>          </tr>      </thead>  </table>

当用户点击一行的时候,我们开始一个编辑动作.

var lastIndex;  $('#tt').datagrid({      onClickRow:function(rowIndex){          if (lastIndex != rowIndex){              $('#tt').datagrid('endEdit', lastIndex);              $('#tt').datagrid('beginEdit', rowIndex);              setEditing(rowIndex);          }          lastIndex = rowIndex;      }  });

创建运算关系在一些列之间,我们应该得到editors和绑定一些事件到他们上面.

function setEditing(rowIndex){      var editors = $('#tt').datagrid('getEditors', rowIndex);      var priceEditor = editors[0];      var amountEditor = editors[1];      var costEditor = editors[2];      priceEditor.target.bind('change', function(){          calculate();      });      amountEditor.target.bind('change', function(){          calculate();      });      function calculate(){          var cost = priceEditor.target.val() * amountEditor.target.val();          $(costEditor.target).numberbox('setValue',cost);      }  }

下载 EasyUI 示例代码:

easyui-datagrid-demo.zip