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 ...
随机推荐
- 2.css的引入方式
网页中引用CSS样式 内联样式 行内样式表 外部样式表 ..链接式 ..导入式 内嵌方式 style标签 <!doctype html> <html> <head> ...
- IE6 IE7 IE8 FF兼容符号
2.区别IE8.IE9 一般来说,我们写的结构比较好的时候,IE8/9下是没区别的.所以可能很少人关注只有IE8或只有IE9才识别的css hack. 因为IE8及以下版本是不支持CSS3的,但是我们 ...
- 4.iptables 网络防火墙
[1] #如果想要iptables作为网络防火墙,iptables所在主机开启核心转发功能,以便能够转发报文. [2] #使用如下命令查看当前主机是否已经开启了核心转发,0表示为开启,1表示已开启 c ...
- idea debug 启动慢出现假死
断点设置不合理引发应用启动慢问题java idea应用启动很慢|非常慢|超级慢的问题排查! 解决关于应用启动超慢这个问题,其实两年前就已经遇到过,https://blog.csdn.net/li396 ...
- linux 查看进程所在目录
一下内容转自:https://blog.csdn.net/spring21st/article/details/50561550 通过 ps 及 top 命令查看进程信息时,只能查到 相对路径,查不到 ...
- 面对对象二,super......反射
一.super() super() : 主动调用其他类的成员 # 单继承 # 在单继承中 super,主要是用来调用父类的方法的. class A: def __init__(self): self ...
- 【随记】SQL备份一张表的数据
SQL Server: SELECT * INTO table_bak FROM table Oracle.MySQL.SQLite: CREATE TABLE table_bak AS ...
- redis 学习笔记（一）
redis 基本类型 String 基本操作: GET 获取存储在给定键中的值 SET 设置存储在给定键中的值 DEL 删除存储在给定键中的值 List 基本操作: LPUSH/RPUSH 从左/右推 ...
- Navicat 连接腾讯云
1.dos窗口下进入mysql,进行远程登录授权 (1)进行授权 mysql>GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '1 ...
- Shiro入门指引
最近项目中用到Shiro,专门对其研究了一番,颇有收获,以下是笔者最近写的博客,希望对大家入门有所帮助. Shiro入门资源整理 Shiro在SpringBoot中的使用 Shiro源码解析-登录篇 ...