雷林鹏分享：jQuery EasyUI 数据网格 - 列运算

Posted 2021-02-17 雷林鹏

　　jQuery EasyUI 数据网格 - 列运算

　　在本教程中，您将学习如何在可编辑的数据网格(datagrid)中包含一个运算的列。一个运算列通常包含一些从一个或多个其他列运算的值。

　　首先，创建一个可编辑的数据网格(datagrid)。这里我们创建了一些可编辑列，‘listprice‘、‘amount‘ 和 ‘unitcost‘ 列定义为 numberbox 编辑类型。运算列是 ‘unitcost‘ 字段，将是 listprice 乘以 amount 列的结果。

　　

　　title="Editable DataGrid with Calculated Column" iconCls="icon-edit" singleSelect="true"

 

　　idField="itemid" url="data/datagrid_data.json">

　　

 

　　

 

　　

 

　　

 

　　

 

　　

 

　　

 

　　

 

　　

 

　　

 

　　

Item ID	List Price	Amount	Unit Cost	Attribute	Status

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

　　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);

　　}

　　}

　　下载 jQuery EasyUI 实例

　　jeasyui-datagrid-datagrid15.zip

　　本文转载自：w3cschool

　　(编辑：雷林鹏 来源：网络 侵删)