easyUI在可编辑的datagrid中计算两列的值
来源:互联网 发布:中公教育网络课程入口 编辑:程序博客网 时间:2024/06/10 03:59
在这个教程中你将学习如何包含一个运算的列在可编辑的datagrid中,一个运算列通常包含一些运算值从一个或多个其他列.
查看Demo
首先,创建一个可编辑的datagrid,这就是我们创建的一些可编辑列,'listprice','amount' 和'unitcost' 列定义为numberbox 编辑类型,运算列是 'unitcost'字段,
将是 listprice 乘以 amount列的结果.
- <tableid="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>
- <thfield="itemid"width="80">Item ID</th>
- <thfield="listprice"width="80"align="right"editor="{type:'numberbox',options:{precision:1}}">List Price</th>
- <thfield="amount"width="80"align="right"editor="{type:'numberbox',options:{precision:0}}">Amount</th>
- <thfield="unitcost"width="80"align="right"editor="numberbox">Unit Cost</th>
- <thfield="attr1"width="150"editor="text">Attribute</th>
- <thfield="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;
- }
- });
- 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 示例代码:
easyui-datagrid-demo.zip
- easyUI在可编辑的datagrid中计算两列的值
- easyUI在可编辑的datagrid中计算两列的值
- 【easyui】datagrid的列可编辑
- easyUI在可编辑的datagrid中加入combogrid 实现下拉选择填充列
- easyUI在可编辑的datagrid中加入combogrid 实现下拉选择填充列
- JQUERY EASYUI DATAGRID设置可编辑行的某个列不可编辑
- 【EasyUI】——可编辑的DataGrid
- easyui 1.4 以上版本datagrid editors 计算两列的值
- easyui实现可新增不可编辑的datagrid及动态配置列隐藏/显示
- 在easyui中DataGrid 里的列数据进行格式化
- EasyUI datagrid可编辑
- Easyui - datagrid 列编辑
- jQuery-easyUI的使用:datagrid实现可编辑表格
- EasyUI获取DataGrid中某一列的所有值
- EasyUI获取DataGrid中某一列的所有值
- jQuery EasyUI DataGrid 可编辑列级联操作
- datagrid 中编辑模板列的问题
- EasyUI-DataGrid编辑时出现下拉列表框选择,同时修改其它列的值
- 【ACM经典01】约瑟夫环问题---STL解法
- 技术备忘1
- linux下的Kconfig文件
- 一个合格的程序员应该读过哪些书
- 最简单的as调用js
- easyUI在可编辑的datagrid中计算两列的值
- 用英文写出1到1000的所有数字需要多少个字母?
- H264通过RTMP发布 V2.0 (Red5 Wowza 测试通过)
- int 13H int 10H int 15H
- POJ 2001 Shortest Prefixes
- tongeasy 中间件概述、安装帮助文档
- LUA中函数返回表的时候的问题
- oracle job的创建和删除
- 深入理解字节对齐