新聞動態   News
聯係cblv8app菠萝官网下载   Contact
你的位置:首頁 > 新聞動態

jQuery EasyUI DataGrid - 列運算

2014-11-05

在本教程中,您將學習如何在可編輯的數據網格(datagrid)中包含一個運算的列。一個運算列通常包含一些從一個或多個其他列運算的值

查看Demo

首先,創建一個可編輯的datagrid,這就是cm888tw草莓app下载創建的一些可編輯列,'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>

當用戶點擊一行的時候,cblv8app菠萝官网下载開始一個編輯動作.




[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. });    

創建運算關係在一些列之間,cherrytv樱桃官网應該得到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 示例代碼: