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 ...
随机推荐
- 求解任意图的最小支配集（Minimun Dominating Set）
给定一个无向图G =(V,E),其中V表示图中顶点集合,E表示边的集合.G的最小控制顶点集合为V的一个子集S∈V:假设集合R表示V排除集合S后剩余顶点集合,即R∩S=∅,R∪S=V:则最小控制顶点集合 ...
- 波利亚（Polya)罐子模型
(波利亚(Polya)罐子模型)罐中有a个白球,b个黑球,每次从罐中随机抽取一球,观察其颜色后,连同附加的c个同色球 (波利亚(Polya)罐子模型)罐中有a个白球,b个黑球,每次从罐中随机抽取一 ...
- PLSQL基本操作手册
第1章 用PLSQL连接Oracle数据库 PLSQL只能用来连接Oracle数据库(不象PB还可以连接JDBC.ODBC),所以必须首先安装并配置Oracle客户端. §1.1 初次登录PLSQL ...
- P4093 [HEOI2016/TJOI2016]序列
题目链接 题意分析 我们假设每一个数都有一个变动范围\([L_i,R_i]\) 那么我们令\(dp[i]\)表示以\(i\)结尾的最长不下降子序列的长度 那么就是\(dp[i]=max\{dp[j]+ ...
- ipython 导入模块 非法ascii字符问题
SyntaxError: Non-ASCII character '\xe2‘ ipython 使用了 python2 加入 #coding=utf-8 ipython3 使用 python3
- 四大算法解决最短路径问题（Dijkstra+Bellman-ford+SPFA+Floyd）
什么是最短路径问题? 简单来讲,就是用于计算一个节点到其他所有节点的最短路径. 单源最短路算法:已知起点,求到达其他点的最短路径. 常用算法:Dijkstra算法.Bellman-ford算法.SPF ...
- fetch网络请求 get 和 post
//在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise* Promise 是异步编程的一种解决方案* Promise 对 ...
- 1016 部分A+B （15 分)
// 题目不难,感觉变量定义的有点儿多了#include <iostream> #include <cmath> using namespace std; int main() ...
- web及时通信传输的几种方法
有哪些: 轮询.长轮询.iframe流.websocket 轮询:http的请求有一个很明显的缺点,就是只能有客户端发起,不能由服务端主动推送,所以轮询就是定时向服务器发送请求,去获取数据 优点:传输 ...
- jieba和文本词频统计
---恢复内容开始--- 一.结巴中文分词涉及到的算法包括: (1) 基于Trie树结构实现高效的词图扫描,生成句子中汉字所有可能成词情况所构成的有向无环图(DAG): (2) 采用了动态规划查找最大 ...