利用easyui的行编辑自动增加一行来进行增删有详细注解
jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点。
easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件。
easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。
使用 easyui,您不需要写太多 javascript 代码,一般情况下您只需要使用一些 html 标记来定义用户界面。
HTML 网页的完整框架。
easyui 节省了开发产品的时间和规模。
easyui 非常简单,但是功能非常强大。
先给大家展示效果图:
Html代码:
1
2
|
<table id= "dd" > </table> |
引入JS文件和CSS样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
<script src= "http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/jquery-1.4.4.min.js" type= "text/javascript" ></script> <script src= "http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/jquery.easyui.min.js" type= "text/javascript" ></script> <link href= "http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/themes/default/easyui.css" rel= "stylesheet" type= "text/css" /> type= "text/css" /> <script src= "http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/locale/easyui-lang-zh_CN.js" type= "text/javascript" ></script> <script type= "text/javascript" > $( function () { var datagrid; //定义全局变量datagrid var editRow = undefined; //定义全局变量:当前编辑的行 datagrid = $( "#dd" ).datagrid({ url: ‘UserCenter.aspx‘, //请求的数据源 iconCls: ‘icon-save‘, //图标 pagination: true , //显示分页 pageSize: 15, //页大小 pageList: [15, 30, 45, 60], //页大小下拉选项此项各value是pageSize的倍数 fit: true , //datagrid自适应宽度 fitColumn: false , //列自适应宽度 striped: true , //行背景交换 nowap: true , //列内容多时自动折至第二行 border: false , idField: ‘ID‘, //主键 columns: [[ //显示的列 {field: ‘ID‘, title: ‘编号‘, width: 100, sortable: true , checkbox: true }, { field: ‘UserName‘, title: ‘用户名‘, width: 100, sortable: true , editor: { type: ‘validatebox‘, options: { required: true } } }, { field: ‘RealName‘, title: ‘真实名称‘, width: 100, editor: { type: ‘validatebox‘, options: { required: true } } }, { field: ‘Email‘, title: ‘邮箱‘, width: 100, editor: { type: ‘validatebox‘, options: { required: true } } } ]], queryParams: { action: ‘query‘ }, //查询参数 toolbar: [{ text: ‘添加‘, iconCls: ‘icon-add‘, handler: function () { //添加列表的操作按钮添加,修改,删除等 //添加时先判断是否有开启编辑的行,如果有则把开户编辑的那行结束编辑 if (editRow != undefined) { datagrid.datagrid( "endEdit" , editRow); } //添加时如果没有正在编辑的行,则在datagrid的第一行插入一行 if (editRow == undefined) { datagrid.datagrid( "insertRow" , { index: 0, // index start with 0 row: { } }); //将新插入的那一行开户编辑状态 datagrid.datagrid( "beginEdit" , 0); //给当前编辑的行赋值 editRow = 0; } } }, ‘-‘, { text: ‘删除‘, iconCls: ‘icon-remove‘, handler: function () { //删除时先获取选择行 var rows = datagrid.datagrid( "getSelections" ); //选择要删除的行 if (rows.length > 0) { $.messager.confirm( "提示" , "你确定要删除吗?" , function (r) { if (r) { var ids = []; for ( var i = 0; i < rows.length; i++) { ids.push(rows[i].ID); } //将选择到的行存入数组并用,分隔转换成字符串, //本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id alert(ids.join(‘,‘)); } }); } else { $.messager.alert( "提示" , "请选择要删除的行" , "error" ); } } }, ‘-‘, { text: ‘修改‘, iconCls: ‘icon-edit‘, handler: function () { //修改时要获取选择到的行 var rows = datagrid.datagrid( "getSelections" ); //如果只选择了一行则可以进行修改,否则不操作 if (rows.length == 1) { //修改之前先关闭已经开启的编辑行,当调用endEdit该方法时会触发onAfterEdit事件 if (editRow != undefined) { datagrid.datagrid( "endEdit" , editRow); } //当无编辑行时 if (editRow == undefined) { //获取到当前选择行的下标 var index = datagrid.datagrid( "getRowIndex" , rows[0]); //开启编辑 datagrid.datagrid( "beginEdit" , index); //把当前开启编辑的行赋值给全局变量editRow editRow = index; //当开启了当前选择行的编辑状态之后, //应该取消当前列表的所有选择行,要不然双击之后无法再选择其他行进行编辑 datagrid.datagrid( "unselectAll" ); } } } }, ‘-‘, { text: ‘保存‘, iconCls: ‘icon-save‘, handler: function () { //保存时结束当前编辑的行,自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台 datagrid.datagrid( "endEdit" , editRow); } }, ‘-‘, { text: ‘取消编辑‘, iconCls: ‘icon-redo‘, handler: function () { //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行 editRow = undefined; datagrid.datagrid( "rejectChanges" ); datagrid.datagrid( "unselectAll" ); } }, ‘-‘], onAfterEdit: function (rowIndex, rowData, changes) { //endEdit该方法触发此事件 console.info(rowData); editRow = undefined; }, onDblClickRow: function (rowIndex, rowData) { //双击开启编辑行 if (editRow != undefined) { datagrid.datagrid( "endEdit" , editRow); } if (editRow == undefined) { datagrid.datagrid( "beginEdit" , rowIndex); editRow = rowIndex; } } }); }); </script> |
利用easyui的行编辑自动增加一行来进行增删有详细注解的更多相关文章
- Jquery easyui开启行编辑模式增删改操作
Jquery easyui开启行编辑模式增删改操作 Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </ ...
- [转]Jquery easyui开启行编辑模式增删改操作
本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html ...
- 市委组织部考核项目——利用EasyUi中可编辑的DataGrid控件对多行数据进行编辑并提交
http://blog.csdn.net/cjr15233661143/article/details/19041165 市委组织部考核项目中需要录入原始数据,拿开发区的数据录入举例说明,见下图,需要 ...
- 关于EasyUI DataGrid行编辑时嵌入时间控件
本人做一个名为“安徽中控”项目时,为快速开发基础数据增删改模块,遂采用EasyUIDatagrid将所有增删改查的操作都集中于表格中,并且所有增删改查操作都集中于泛型对象,从而不必为每个表写具体的增删 ...
- easyui datagrid 行编辑功能
datagrid现在具有行编辑能力了,使用时只须在columns中为需要编辑的列添加一个editor属性,编辑保存时同时具有数据校验能力. 看一个例子效果图: 代码如下: $('#tt').datag ...
- easyui datagrid行编辑中数据联动
easyui的datagrid中行内编辑使用数据联动.即:当编辑产品编号时,该行的产品名称自动根据产品编号显示出来. 在编辑中获取当前行的索引 function getRowIndex(target) ...
- EasyUI datagrid 行编辑
一.HTML: <div class="info"> <div class="info_tt"> <span class=&quo ...
- 小程序实现textarea行数自动增加
查找网上案例很多,但是都不是很满意,参考大牛案例终结了一下,话不多说代码如下: 实现效果: 前段代码 <view class="text-box"> <view& ...
- easyui datagrid 批量编辑和提交数据
easyui datagrid 行编辑和提交方,废话就不多说了,直接上代码 <div style="margin: 5px;"> <table id=" ...
随机推荐
- 一次线上Redis类转换异常排查引发的思考
之前同事反馈说线上遇到Redis反序列化异常问题,异常如下: XxxClass1 cannot be cast to XxxClass2 已知信息如下: 该异常不是必现的,偶尔才会出现: 出现该异常后 ...
- Windows 10 win 10 切换输入法的快捷键
Windows 10 win 10 切换输入法的快捷键 怎么切换输入法 中文 英文 切换 Windows键 + 空格键 切换输入法 Shift+Alt 切换中英文 Windows键形状如下 ...
- 判断一个类型是否为可空类型 System Nullable
bool IsNullableType(Type theType) { return (theType.IsGenericType && theType. G ...
- git生成并添加SSH key
1.安装Git Bash https://git-scm.com/downloads 2.鼠标右键git bash here 3.执行以下命令: ① cd ~/.ssh/ [如果没有对应的文 ...
- go-gin-api 规划目录和参数验证(二)
概述 首先同步下项目概况: 上篇文章分享了,使用 go modules 初始化项目,这篇文章咱们分享: 规划目录结构 模型绑定和验证 自定义验证器 制定 API 返回结构 废话不多说,咱们开始吧. 规 ...
- mvn手动上传jar到本地仓库
mvn install:install-file -Dfile=G:\elastic-project\workspace\out\artifacts\xxl_job_core_jar\xxl-job- ...
- scala中分组的算子的用法
val rdd= sc.parallelize(List(("tom",1),("jerry",3),("kitty",2),(" ...
- WPF 精修篇 获取系统颜色和字体样式
原文:WPF 精修篇 获取系统颜色和字体样式 看效果 <Grid> <Rectangle Fill="{DynamicResource {x:Static SystemCo ...
- Asp.Net Core采用MailKit部署到Linux Docker连接邮件服务器报错
前段时间看文章了解到发邮件的SmtpClient已经过时了,微软官方推荐大家用其他解决方案,例如MailKit. https://docs.microsoft.com/zh-cn/dotnet/api ...
- java DES转C#DES加密解密
一个程序用到java的cn.core.jar加密的,需要在.NET 中解密,发现JAVA的des算法与C#的有点区别. 自己不太懂加密解密算法,所以找了个省事的方法,用IKVM.NET,用这个将cn. ...