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

标签：

在这个教程中你将学习如何包含一个运算的列在可编辑的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>   

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

    }   

});   

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

    }   

}   

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在可编辑的datagrid中计算两列的值

标签：

原文地址：http://www.cnblogs.com/lucy-12/p/5047231.html