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 ...
随机推荐
- less配置
一.sublime text需要下载考拉,然后要 一直打开着: 1.编译工具用koala编译 下载地址:http://koala-app.com/index-zh.html 2.LESS中的注释: 可 ...
- 《OD大数据实战》环境整理
一.关机后服务重新启动 1. 启动hadoop服务 sbin/hadoop-daemon.sh start namenode sbin/hadoop-daemon.sh start datanode ...
- tcp/ip学习笔记（1）-基本概念
为什么会有tcp/ip 在世界上各地,各种各样的电脑运行着各自不同的操作系统为大家服务,这些电脑在表达同一种信息的时候所使用的方法是千差万别.就好像圣经中上帝打乱了各地人的口音,让他们无法合作一样.计 ...
- 洛谷P4931 情侣？给我烧了！（加强版）（组合数学）
题面 传送门 题解 首先我们算出刚好有\(k\)对情侣的方案数 从\(n\)对情侣中选出\(k\)对,方案数为\({n\choose k}\) 从\(n\)排座位中选出\(k\)排,方案数为\({n\ ...
- classnofoundexception:org.springframework.ui.freemarker.FreeMarkerConfigurationFactory
这个是在整合freemarker的时候出现的问题,在添加依赖spring-context-support.jar之后就好了 但是我在搭建框架的时候出现的问题是明明添加了这个依赖,但是出现一个问题 出现 ...
- easyui里面的API=====》 load
在easyui里面有个API load,这个API实用性质很强,可以直接帮我加载页面的数据到想需要的相应输入框里面,但是也要注意,这些将要被填入数据的输入框里面的属性有个要求:其中输入框里面的name ...
- php 的加法
无意间看到了php中关于加,减,乘,除 的计算方法 这里 http://lxr.php.net/source/xref/PHP-5.6/Zend/zend_operators.h#596 static ...
- php中模拟post，get请求和接受请求详细讲解
在php中我们经常用到curl拓展来进行模拟post.get请求,下面就来具体说说怎么模拟: 一.首先模拟post请求: function http_post_data($url, $query_da ...
- MongoDB mongo.exe启动及闪退解决 转载
转载自:http://blog.csdn.net/wyx_wx/article/details/76108662 启动: 进入MongoDB安装目录下的bin目录,启动mongod.exe 出现如图所 ...
- 求两个数a、b的最大公约数
//求两个数a.b的最大公约数 function gcd(a,b){ return b===0?a:gcd(b,a%b) }