<rt id="o1hh4"></rt>
    <source id="o1hh4"><nav id="o1hh4"><strike id="o1hh4"></strike></nav></source>
    <cite id="o1hh4"></cite>
    <rt id="o1hh4"></rt>
      <source id="o1hh4"><nav id="o1hh4"><strike id="o1hh4"></strike></nav></source>
      <cite id="o1hh4"></cite>
      <rt id="o1hh4"></rt>
        <source id="o1hh4"><nav id="o1hh4"><strike id="o1hh4"></strike></nav></source>
        <cite id="o1hh4"></cite>
        新闻动态   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 示例代码:


        成 人 h动 漫在线播放