新闻动态   News
联系我们   Contact
你的位置:首页 > 新闻动态

jQuery EasyUI DataGrid - 列运算

2014-11-05

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

查看Demo

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

将是 listprice 乘以 amount列的结果.

  1. <tableid="tt"style="width:600px;height:auto"

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

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

  4. <thead>

  5. <tr>

  6. <thfield="itemid"width="80">Item ID</th>

  7. <thfield="listprice"width="80"align="right"editor="{type:'numberbox',options:{precision:1}}">List Price</th>

  8. <thfield="amount"width="80"align="right"editor="{type:'numberbox',options:{precision:0}}">Amount</th>

  9. <thfield="unitcost"width="80"align="right"editor="numberbox">Unit Cost</th>

  10. <thfield="attr1"width="150"editor="text">Attribute</th>

  11. <thfield="status"width="60"align="center"editor="{type:'checkbox',options:{on:'P',off:''}}">Status</th>

  12. </tr>

  13. </thead>

  14. </table>

  1. <tableid="tt"style="width:600px;height:auto"

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

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

  4. <thead>

  5. <tr>

  6. <thfield="itemid"width="80">Item ID</th>

  7. <thfield="listprice"width="80"align="right"editor="{type:'numberbox',options:{precision:1}}">List Price</th>

  8. <thfield="amount"width="80"align="right"editor="{type:'numberbox',options:{precision:0}}">Amount</th>

  9. <thfield="unitcost"width="80"align="right"editor="numberbox">Unit Cost</th>

  10. <thfield="attr1"width="150"editor="text">Attribute</th>

  11. <thfield="status"width="60"align="center"editor="{type:'checkbox',options:{on:'P',off:''}}">Status</th>

  12. </tr>

  13. </thead>

  14. </table>

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




[javascript]view plaincopy
  1. var lastIndex;  

  2. $('#tt').datagrid({  

  3.    onClickRow:function(rowIndex){  

  4. if (lastIndex != rowIndex){  

  5.            $('#tt').datagrid('endEdit', lastIndex);  

  6.            $('#tt').datagrid('beginEdit', rowIndex);  

  7.            setEditing(rowIndex);  

  8.        }  

  9.        lastIndex = rowIndex;  

  10.    }  

  11. });  

[javascript]view plaincopy
  1. var lastIndex;    

  2. $('#tt').datagrid({    

  3.    onClickRow:function(rowIndex){    

  4. if (lastIndex != rowIndex){    

  5.            $('#tt').datagrid('endEdit', lastIndex);    

  6.            $('#tt').datagrid('beginEdit', rowIndex);    

  7.            setEditing(rowIndex);    

  8.        }    

  9.        lastIndex = rowIndex;    

  10.    }    

  11. });    

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




[javascript]view plaincopy
  1. function setEditing(rowIndex){  

  2. var editors = $('#tt').datagrid('getEditors', rowIndex);  

  3. var priceEditor = editors[0];  

  4. var amountEditor = editors[1];  

  5. var costEditor = editors[2];  

  6.    priceEditor.target.bind('change', function(){  

  7.        calculate();  

  8.    });  

  9.    amountEditor.target.bind('change', function(){  

  10.        calculate();  

  11.    });  

  12. function calculate(){  

  13. var cost = priceEditor.target.val() * amountEditor.target.val();  

  14.        $(costEditor.target).numberbox('setValue',cost);  

  15.    }  

  16. }  

[javascript]view plaincopy
  1. function setEditing(rowIndex){    

  2. var editors = $('#tt').datagrid('getEditors', rowIndex);    

  3. var priceEditor = editors[0];    

  4. var amountEditor = editors[1];    

  5. var costEditor = editors[2];    

  6.    priceEditor.target.bind('change', function(){    

  7.        calculate();    

  8.    });    

  9.    amountEditor.target.bind('change', function(){    

  10.        calculate();    

  11.    });    

  12. function calculate(){    

  13. var cost = priceEditor.target.val() * amountEditor.target.val();    

  14.        $(costEditor.target).numberbox('setValue',cost);    

  15.    }    

  16. }    




下载 EasyUI 示例代码: