jQuery EasyUI使用教程:数据网格中的列运算

boyanx4个月前技术教程26

jQuery EasyUI最新试用版免费下载>

在本教程中,您将学习如何在可编辑的数据网格中包含一个运算列。计算列一般含有一个或多个其他列计算的值。

首先创建可编辑的数据网格。在这里我们创建了一些可编辑的列,'listprice'、'amount'和'unitcost'列被定义为numberbox编辑类型。运算列是'unitcost'字段,将是listprice乘以amount列的结果。

Item IDList PriceAmountUnit CostAttributeStatus

当用户点击一行时,我们开始一个编辑操作。

var lastIndex;
$('#tt').datagrid({
onClickRow:function(rowIndex){
if (lastIndex != rowIndex){
$(this).datagrid('endEdit', lastIndex);
$(this).datagrid('beginEdit', rowIndex);
}
lastIndex = rowIndex;
},
onBeginEdit:function(rowIndex){
var editors = $('#tt').datagrid('getEditors', rowIndex);
var n1 = $(editors[0].target);
var n2 = $(editors[1].target);
var n3 = $(editors[2].target);
n1.add(n2).numberbox({
onChange:function{
var cost = n1.numberbox('getValue')*n2.numberbox('getValue');
n3.numberbox('setValue',cost);
}
})
}
});

购买jQuery EasyUI最新正版授权!详情请"咨询在线客服"
葡萄城经典UI产品新年大促,惊喜折扣礼品送不停!

本站文章除注明转载外,均为本站原创或翻译

标签: jquery下载

相关文章

jQuery 3.0 正式发布,兼容 Promises/A+

jQuery 3.0 正式发布,此版本从 2014 年 10 月份就开始开发,jQuery 团队想打造成轻量级的,速度更快,向后兼容的 jQuery 版本。此版本移除了所有旧版 IE 的方法,并且借鉴...

穿着木屐跳舞——jQuery图表插件jqchart的使用

先上图:前段时间,论坛上有不少版友问在Access里怎么做图表。——众所周知,尽管Access也有不少图表类型,但并不是做图表的最佳选择。Excel可以有更多选择,做得更漂亮。但是,在Access20...

jQuery EasyUI使用教程:在数据网格中创建列组

jQuery EasyUI最新试用版免费下载>该easyui的数据网格可以创建列组合,如下所示:在本实例中,我们使用平面数据来填充数据网格的数据,并把listprice、unitcost、add...

jQuery

jQuery介绍jQuery是对JavaScript的封装,它是免费、开源的JavaScript函数库,jQuery 极大地简化了 JavaScript 编程jQuery和JavaScript它们的作...

jQuery知识一览

一、概览jQuery官网:https://jquery.com/jQuery是一个高效、轻量并且功能丰富的js库。核心在于查询query。jQuery是一个优秀的js函数库,是React/Vue/An...

DrawSVG – SVG 路径动画 jQuery 插件

jQuery DrawSVG 使用了 jQuery 内置的动画引擎实现 SVG 路径动画,用到了 stroke-dasharray 和 stroke-dashoffset 属性。DrawSVG 是完全...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。