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

boyanx9个月前技术教程60

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 EasyUI使用教程:创建一个菜单按钮

jQuery EasyUI最新版下载>本教程主要为大家展示如何使用jQuery EasyUI创建一个菜单按钮。菜单按钮包含了一个按钮和菜单组件,当点击或将鼠标移动到该按钮上时,相应的菜单就会显示...

关于JQuery引用及基本用法

在JQuery文件中下载,并将其引入html文件。在使用jQuery之前,我们需要到jQuery的官方网站:“https://jquery.com/download/” 把下载好的文件放到工程根目录...

了解jquery这一篇够了

为什么要学jquery现在的「新人」依然可以学习 jQuery 的思想,因为以「新人」的水平,直接理解 Vue / React 的思想难度较大,jQuery 是一个很不错的中间过渡使用javascri...

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

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

jQuery.com遭恶意攻击,谨防安全威胁

jQuery.com是jQuery库的官方网站,该网站目前遭受恶意软件攻击,导致访问该网站时会重定向到一个包含RIG开发部的网站,其中还包含盗取数据信息的恶意软件。以下内容,来至jQuery官方说明。...

jQuery框架有什么特点?如何安装jQuery?

随着Web前端技术的不断发展,互联网上诞生了很多优秀的JavaScript框架,这些框架基本上都封装了JavaScript、DOM和Ajax等操作的功能,为开发人员提供了更加快捷、强大的开发方式。常见...

发表评论    

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