dategrid快速录入一行数据的一波操作
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>表格的行数据录入效果的实现</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js"></script>
<link rel="stylesheet" href="../js/easyui/themes/icon.css" />
<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
<link rel="stylesheet" href="../js/ztree/zTreeStyle.css" />
<script type="text/javascript">
$(function() {
$("#tabs").datagrid({
columns: [
[{
field: 'id',
title: '编号',
width: '200',
editor: {
type: 'validatebox',
options: {
required: true
}
}
}, {
field: 'name',
title: '商品名称',
width: '200',
editor: {
type: 'validatebox',
options: {
required: true
}
}
}, {
field: 'price',
title: '价格',
width: '200',
editor: {
type: 'validatebox',
options: {
required: true
}
}
}]
],
toolbar: [{
id: 'add',
text: '添加一行数据',
iconCls: 'icon-add',
handler: function() {
$("#tabs").datagrid('appendRow', {
id: 4,
name: '可可',
price: 9000
});
}
}, {
id: 'save',
text: '保存修改',
iconCls: 'icon-save',
handler: function() {
$("#tabs").datagrid('endEdit', currentEditIndex);
currentEditIndex = undefined;
}
}, {
id: 'edit',
text: '修改整行',
iconCls: 'icon-edit',
handler: function() {
if(currentEditIndex != undefined) {
//正在编辑行数据
return;
}
var row = $("#tabs").datagrid('getSelected');
var index = $("#tabs").datagrid('getRowIndex', row);
$("#tabs").datagrid('beginEdit', index);
//获取到全局变量
currentEditIndex = index;
}
}, {
id: 'cancel',
text: '撤销修改',
iconCls: 'icon-cancel',
handler: function() {
$("#tabs").datagrid('cancelEdit', currentEditIndex);
currentEditIndex = undefined;
}
}, {
id: 'delete',
text: '删除整行',
iconCls: 'icon-no',
handler: function() {
var row = $("#tabs").datagrid('getSelected');
var index = $("#tabs").datagrid('getRowIndex', row);
$("#tabs").datagrid('deleteRow', index);
}
}, {
id: 'add',
text: '添加第一行的数据',
iconCls: 'icon-add',
handler: function() {
$("#tabs").datagrid('insertRow', {
index: 0, // 索引从0开始
row: {}
});
//处于开始编辑的状态
$("#tabs").datagrid('beginEdit',0);
currentEditIndex = 0;
}
}],
onBeforeEdit:function(rowIndex, rowData){
//在修改数据之前进行的操作
},
onAfterEdit:function(rowIndex, rowData, changes){
//在保存了修改的内容之后的事件
currentEditIndex = undefined;
},
onCancelEdit:function(rowIndex, rowData){
//在撤销修改之后的事件
currentEditIndex = undefined;
},
url: 'product.json',
singleSelect: true
});
//声明全局变量
var currentEditIndex;
});
</script>
</head> <body>
<table id="tabs" width="400px"> </table>
</body> </html>
附录:
product.json的数据格式展示：
{
"total": 100,
"rows": [
{
"id": 1,
"name": "冰箱",
"price": 1000
}, {
"id": 2,
"name": "电视",
"price": 2000
}, {
"id": 3,
"name": "笔记本",
"price": 4000
}
]
}
dategrid快速录入一行数据的一波操作的更多相关文章
- SQL Server死锁诊断--同一行数据在不同索引操作下引起的死锁
死锁概述 对于数据库中出现的死锁,通俗地解释就是:不同Session(会话)持有一部分资源,并且同时相互排他性地申请对方持有的资源,然后双方都得不到自己想要的资源,从而造成的一种僵持的现象.当然,在任 ...
- 个人永久性免费-Excel催化剂功能第66波-数据快速录入，预定义引用数据逐字提示
在前面好几波的功能中,为数据录入的规范性做了很大的改进,数据录入乃是数据应用之根,没有完整.干净的数据源,再往下游的所有数据应用场景都是空话.在目前IT化进程推进了20多年的现状,是否还仍有必要在Ex ...
- 个人永久性免费-Excel催化剂功能第72波-序列规则下的数据验证有效性好帮手：快速录入窗体辅助录入
Excel作为最好用的数据录入工具,没有之一,如果能够充分利用好Excel的灵活性和规范性,将带来极大的生产力提升,前面的几波功能也有做了几大数据录入的辅助功能,今天再次给大家带来一个特定的使用场景, ...
- JAVAEE——BOS物流项目09：业务受理需求分析、创建表、实现自动分单、数据表格编辑功能使用方法和工作单快速录入
1 学习计划 1.业务受理需求分析 n 业务通知单 n 工单 n 工作单 2.创建业务受理环节的数据表 n 业务通知单 n 工单 n 工作单 3.实现业务受理自动分单 n 在CRM服务端扩展方法根据手 ...
- 在Winform开发框架中，利用DevExpress控件实现数据的快速录入和选择
在实际的项目开发过程中,有好的控件或者功能模块,我都是想办法尽可能集成到我的WInform开发框架中,这样后面开发项目起来,就可以节省很多研究时间,并能重复使用,非常高效方便.在我很早之前的一篇博客& ...
- 项目一:第十一天 2、运单waybill快速录入 3、权限demo演示-了解 5、权限模块数据模型 6、基于shiro实现用户认证-登录（重点）
1. easyui DataGrid行编辑功能 2. 运单waybill快速录入 3. 权限demo演示-了解 4. Apache shiro安全框架概述 5. 权限模块数据模型 6. 基于shiro ...
- 使用MySQL Migration Toolkit快速将Oracle数据导入MySQL[转]
使用MySQL Migration Toolkit快速将Oracle数据导入MySQL上来先说点废话本人最近在学习一些数据库方面的知识,之前接触过Oracle和MySQL,最近又很流行MongoDB非 ...
- Oracle 修改一行数据内存主要变化
向Oracle 数据库发出请求,修改一行数据,在内存中主要有以下变化: 1. 服务器进程将包含该行数据的块读取到内存中 2. 写redo日志.将内存中该数据块指向undo表空间中数据块的变更向量(Ch ...
- 使用MySQLMigrationToolkit快速将Oracle数据导入MySQL
使用MySQL Migration Toolkit快速将Oracle数据导入MySQL 上来先说点废话 本人最近在学习一些数据库方面的知识,之前接触过Oracle和MySQL,最近又很流行MongoD ...
随机推荐
- 【OCP-12c】CUUG最新考试原题整理及答案（071-10）
10.(5-6) choose the best answer:Examine the structure of the EMPLOYEES table:There is a parent/child ...
- OCP 12c最新考试原题及答案（071-5）
5.(4-12) choose two: You executed the following CREATE TABLE statement that resulted in an error: SQ ...
- form在模版中的渲 染方式
链接:https://www.jianshu.com/p/46b2aa2d5a23 form.as_p 渲染表单为一系列的p标签,每个p标签包含一个字段: <p> <label fo ...
- luogu P1518 两只塔姆沃斯牛 The Tamworth Two
luogu P1518 两只塔姆沃斯牛 The Tamworth Two 题目描述 两只牛逃跑到了森林里.农夫John开始用他的专家技术追捕这两头牛.你的任务是模拟他们的行为(牛和John). 追击在 ...
- 2016级算法第三次上机-A.Bamboo的小吃街
A Bamboo的小吃街 分析 经典的两条流水线问题,题目描述基本类似于课件中的流水线调度,符合动态规划最优子结构性质 关键的动态规划式子为: dp[0][j] = min(dp[0][j - 1], ...
- 子元素margin-top为何会影响父元素？
子元素margin-top为何会影响父元素? 引用地址:https://blog.csdn.net/sinat_27088253/article/details/52954688 2016年10月28 ...
- day0203 (whil else)
count = 0while count <= 5 : count += 1 if count == 3:break print("Loop",count) else: pr ...
- dcoker做私有仓库
在官网上拉取私有仓库的镜像.(官网提供的镜像为:registry) docker pull registry 启动镜像,并且映射端口.(启动时加-p参数即可) docker -d -p 5000 ...
- PHP 数组与CSV文件互转
项目说明 数组导出CSV,ZIP文件,CSV,ZIP文件还原数组(Array export file,file restore array)适用于导入导出会员,商品信息注意:读取中文文件名文件.数据时 ...
- 「DB」数据库事务的隔离级别
*博客搬家:初版发布于 2017/04/10 00:37 原博客地址:https://my.oschina.net/sunqinwen/blog/875833 数据库事务的隔离级别 讲事务的隔离 ...