雷林鹏分享:jQuery EasyUI 数据网格 - 列运算
jQuery EasyUI 数据网格 - 列运算
在本教程中,您将学习如何在可编辑的数据网格(datagrid)中包含一个运算的列。一个运算列通常包含一些从一个或多个其他列运算的值。
首先,创建一个可编辑的数据网格(datagrid)。这里我们创建了一些可编辑列,'listprice'、'amount' 和 'unitcost' 列定义为 numberbox 编辑类型。运算列是 'unitcost' 字段,将是 listprice 乘以 amount 列的结果。
title="Editable DataGrid with Calculated Column" iconCls="icon-edit" singleSelect="true"
idField="itemid" url="data/datagrid_data.json">
Item ID | List Price | Amount | Unit Cost | Attribute | Status |
---|
当用户点击一行的时候,我们开始一个编辑动作。
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);
}
}
下载 jQuery EasyUI 实例
jeasyui-datagrid-datagrid15.zip
本文转载自:w3cschool
(编辑:雷林鹏 来源:网络 侵删)
雷林鹏分享:jQuery EasyUI 数据网格 - 列运算的更多相关文章
- 雷林鹏分享:jQuery EasyUI 数据网格 - 设置冻结列
jQuery EasyUI 数据网格 - 设置冻结列 本实例演示如何冻结一些列,当用户在网格上移动水平滚动条时,冻结列不能滚动到视图的外部. 为了冻结列,您需要定义 frozenColumns 属性. ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 动态改变列
jQuery EasyUI 数据网格 - 动态改变列 数据网格(DataGrid)列可以使用 'columns' 属性简单地定义.如果您想动态地改变列,那根本没有问题.为了改变列,您可以重新调用dat ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 格式化列
jQuery EasyUI 数据网格 - 格式化列 以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 创建列组合
jQuery EasyUI 数据网格 - 创建列组合 easyui 的数据网格(DataGrid)可以创建列组合,如下所示: 在本实例中,我们使用平面数据来填充数据网格(DataGrid)的数据,并把 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 设置排序
jQuery EasyUI 数据网格 - 设置排序 本实例演示如何通过点击列表头来排序数据网格(DataGrid). 数据网格(DataGrid)的所有列可以通过点击列表头来排序.您可以定义哪列可以排 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 自定义排序
jQuery EasyUI 数据网格 - 自定义排序 如果默认的排序行为不满足您的需求,您可以自定义数据网格(datagrid)的排序行为. 最基础的,用户可以在列上定义一个排序函数,函数名是 sor ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 添加复选框
jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 启用行内编辑
jQuery EasyUI 数据网格 - 启用行内编辑 可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行. 本 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 创建自定义视图
jQuery EasyUI 数据网格 - 创建自定义视图 在不同的情况下,您可能需要为数据网格(datagrid)运用更灵活的布局.对于用户来说,卡片视图(Card View)是个不错的选择.这个工具 ...
随机推荐
- eclipse maven项目下载jar包失败解决办法
1.找到我们的本地maven仓库目录 我的是 H:\Java\maven\Repository 2.搜索出该目录下的*lastUpdated.properties文件并删除,如下图所示,可以通过模糊搜 ...
- da5_random模块
import random #标准模块,用来取随机数 print(random.randint(1,100)) #随机取一个整数,顾头顾尾 print(random.uniform(1,900)) # ...
- 图->最短路径->单源最短路径(迪杰斯特拉算法Dijkstra)
文字描述 引言:如下图一个交通系统,从A城到B城,有些旅客可能关心途中中转次数最少的路线,有些旅客更关心的是节省交通费用,而对于司机,里程和速度则是更感兴趣的信息.上面这些问题,都可以转化为求图中,两 ...
- HTML链接式引入CSS和JS
<!-调用CSS-> <link href="./XXXXX.css" rel="stylesheet" type="text/cs ...
- HTTP状态码简单总结
状态码数字的第一位表明了响应类别,如以下5种: 类别 原因短语 1XX Informational(信息性状态码) 接受的请求正在处理 2XX Success(成功状态码) 请求正常处理完毕 ...
- 如何知道网页浏览器cookie是什么?
一直有网友问网页cookie如何获取,其实想知道自己访问网页时的cookie没那么难,用Chrome内核浏览器的debug功能就能看到,怎么查看呢?随ytkah一起来看看吧! 打开网页,按F12键,选 ...
- 2018-2019-2 20175313 实验一《Java开发环境的熟悉》实验报告
一.实验内容及步骤 使用JDK编译.运行简单的Java程序 cd code进入code文件夹 mkdir 20175313创建20175313文件夹 ls查看当前目录 cd 20175313,mkdi ...
- 012-docker-安装-fabric:1.4
一.准备工作 linux 版本.docker.docker-compose go安装且版本较新 uname -a docker --version docker-compose --version g ...
- Cocos Creator的类别
cc是命名空间:cocos creater引擎下的类得加cc; 如cc.Node cc.v2; 1).cc.Component组件类onLoadstartupdatelateUpdateonDestr ...
- CentOS 7 配置Tomcat9连接MySQL
配置Tomcat 首先安装Tomcat 安装Tomcat分为安装Tomcat和安装JDK两个步骤 JDK( Java Development Kit ) 是Sun Microsystems针对Java ...