<!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快速录入一行数据的一波操作的更多相关文章

  1. SQL Server死锁诊断--同一行数据在不同索引操作下引起的死锁

    死锁概述 对于数据库中出现的死锁,通俗地解释就是:不同Session(会话)持有一部分资源,并且同时相互排他性地申请对方持有的资源,然后双方都得不到自己想要的资源,从而造成的一种僵持的现象.当然,在任 ...

  2. 个人永久性免费-Excel催化剂功能第66波-数据快速录入,预定义引用数据逐字提示

    在前面好几波的功能中,为数据录入的规范性做了很大的改进,数据录入乃是数据应用之根,没有完整.干净的数据源,再往下游的所有数据应用场景都是空话.在目前IT化进程推进了20多年的现状,是否还仍有必要在Ex ...

  3. 个人永久性免费-Excel催化剂功能第72波-序列规则下的数据验证有效性好帮手:快速录入窗体辅助录入

    Excel作为最好用的数据录入工具,没有之一,如果能够充分利用好Excel的灵活性和规范性,将带来极大的生产力提升,前面的几波功能也有做了几大数据录入的辅助功能,今天再次给大家带来一个特定的使用场景, ...

  4. JAVAEE——BOS物流项目09:业务受理需求分析、创建表、实现自动分单、数据表格编辑功能使用方法和工作单快速录入

    1 学习计划 1.业务受理需求分析 n 业务通知单 n 工单 n 工作单 2.创建业务受理环节的数据表 n 业务通知单 n 工单 n 工作单 3.实现业务受理自动分单 n 在CRM服务端扩展方法根据手 ...

  5. 在Winform开发框架中,利用DevExpress控件实现数据的快速录入和选择

    在实际的项目开发过程中,有好的控件或者功能模块,我都是想办法尽可能集成到我的WInform开发框架中,这样后面开发项目起来,就可以节省很多研究时间,并能重复使用,非常高效方便.在我很早之前的一篇博客& ...

  6. 项目一:第十一天 2、运单waybill快速录入 3、权限demo演示-了解 5、权限模块数据模型 6、基于shiro实现用户认证-登录(重点)

    1. easyui DataGrid行编辑功能 2. 运单waybill快速录入 3. 权限demo演示-了解 4. Apache shiro安全框架概述 5. 权限模块数据模型 6. 基于shiro ...

  7. 使用MySQL Migration Toolkit快速将Oracle数据导入MySQL[转]

    使用MySQL Migration Toolkit快速将Oracle数据导入MySQL上来先说点废话本人最近在学习一些数据库方面的知识,之前接触过Oracle和MySQL,最近又很流行MongoDB非 ...

  8. Oracle 修改一行数据内存主要变化

    向Oracle 数据库发出请求,修改一行数据,在内存中主要有以下变化: 1. 服务器进程将包含该行数据的块读取到内存中 2. 写redo日志.将内存中该数据块指向undo表空间中数据块的变更向量(Ch ...

  9. 使用MySQLMigrationToolkit快速将Oracle数据导入MySQL

    使用MySQL Migration Toolkit快速将Oracle数据导入MySQL 上来先说点废话 本人最近在学习一些数据库方面的知识,之前接触过Oracle和MySQL,最近又很流行MongoD ...

随机推荐

  1. “全栈2019”Java第六十四章:接口与静态方法详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  2. 将整个文件读入string中

    size_t GetFileSize(FILE* file) { fseek(file, , SEEK_END); return static_cast<size_t>(ftell(fil ...

  3. str中的join方法; set集合;深浅拷贝

    一.str中的join方法 1,用join可以吧列表转换为字符串 将列表转换成字符串. 每个元素之间用_拼接 s = "_". join(['德玛', ''赵信'', '易']) ...

  4. [AIR] AS3读取txt文档

    package { import flash.display.Sprite; import flash.events.Event; import flash.filesystem.File; impo ...

  5. ipython 导入模块 非法ascii字符问题

    SyntaxError: Non-ASCII character '\xe2‘ ipython  使用了 python2    加入 #coding=utf-8 ipython3 使用 python3

  6. Mondrian Schema Workbench 概念及常用参数

    Schema Schema 定义了一个多维数据库.包含了一个逻辑模型,而这个逻辑模型的目的是为了书写 MDX 语言的查询语句.这个逻辑模型实际上提供了这几个概念: Cubes (立方体).维度( Di ...

  7. [Alpha]Scrum Meeting#6

    github 本次会议项目由PM召开,时间为4月8日晚上10点30分 时长25分钟 任务表格 人员 昨日工作 下一步工作 木鬼 整理开会记录 撰写并发布之前因为清明耽误的博客 SiMrua 寻找方法捕 ...

  8. linux系统管理(1)之 内核编译选项查看

    三个方法 proc文件系统 ubunut debain 红帽等 proc文件系统 /proc/config.gz This file shows you the compile-time config ...

  9. Java转python第二天

    1.dict基本操作 dic = {"name":"张三","age":21} # 增 dic['high'] = 185 # 增加 ,结果 ...

  10. final学习

    类加载过程 1.装载:查找和导入Class文件 2.链接:其中解析步骤是可以选择的 (a)检查:检查载入的class文件数据的正确性 (b)准备:给类的静态变量分配存储空间 (c)解析:将符号引用转成 ...