EasyUI学习之easyui datagrid 批量编辑和提交
来源:互联网 发布:算法精解c语言描述epub 编辑:程序博客网 时间:2024/06/03 19:21
前台主要代码:
001
<script type=
"text/javascript"
>
002
$(
function
() {
003
var
$dg = $(
"#dg"
);
004
$dg.datagrid({
005
url :
"servlet/list"
,
006
width : 700,
007
height : 250,
008
columns : [ [ {
009
field :
'code'
,
010
title :
'Code'
,
011
width : 100,
012
editor :
"validatebox"
013
}, {
014
field :
'name'
,
015
title :
'Name'
,
016
width : 200,
017
editor :
"validatebox"
018
}, {
019
field :
'price'
,
020
title :
'Price'
,
021
width : 200,
022
align :
'right'
,
023
editor :
"numberbox"
024
} ] ],
025
toolbar : [ {
026
text :
"添加"
,
027
iconCls :
"icon-add"
,
028
handler :
function
() {
029
$dg.datagrid(
'appendRow'
, {});
030
var
rows = $dg.datagrid(
'getRows'
);
031
$dg.datagrid(
'beginEdit'
, rows.length - 1);
032
}
033
}, {
034
text :
"编辑"
,
035
iconCls :
"icon-edit"
,
036
handler :
function
() {
037
var
row = $dg.datagrid(
'getSelected'
);
038
if
(row) {
039
var
rowIndex = $dg.datagrid(
'getRowIndex'
, row);
040
$dg.datagrid(
'beginEdit'
, rowIndex);
041
}
042
}
043
}, {
044
text :
"删除"
,
045
iconCls :
"icon-remove"
,
046
handler :
function
() {
047
var
row = $dg.datagrid(
'getSelected'
);
048
if
(row) {
049
var
rowIndex = $dg.datagrid(
'getRowIndex'
, row);
050
$dg.datagrid(
'deleteRow'
, rowIndex);
051
}
052
}
053
}, {
054
text :
"结束编辑"
,
055
iconCls :
"icon-cancel"
,
056
handler :endEdit
057
}, {
058
text :
"保存"
,
059
iconCls :
"icon-save"
,
060
handler :
function
() {
061
endEdit();
062
if
($dg.datagrid(
'getChanges'
).length) {
063
var
inserted = $dg.datagrid(
'getChanges'
,
"inserted"
);
064
var
deleted = $dg.datagrid(
'getChanges'
,
"deleted"
);
065
var
updated = $dg.datagrid(
'getChanges'
,
"updated"
);
066
067
var
effectRow =
new
Object();
068
if
(inserted.length) {
069
effectRow[
"inserted"
] = JSON.stringify(inserted);
070
}
071
if
(deleted.length) {
072
effectRow[
"deleted"
] = JSON.stringify(deleted);
073
}
074
if
(updated.length) {
075
effectRow[
"updated"
] = JSON.stringify(updated);
076
}
077
078
$.post(
"servlet/commit"
, effectRow,
function
(rsp) {
079
if
(rsp.status){
080
$.messager.alert(
"提示"
,
"提交成功!"
);
081
$dg.datagrid(
'acceptChanges'
);
082
}
083
},
"JSON"
).error(
function
() {
084
$.messager.alert(
"提示"
,
"提交错误了!"
);
085
});
086
}
087
}
088
} ]
089
});
090
091
function
endEdit(){
092
var
rows = $dg.datagrid(
'getRows'
);
093
for
(
var
i = 0; i < rows.length; i++) {
094
$dg.datagrid(
'endEdit'
, i);
095
}
096
}
097
});
098
</script>
099
<body>
100
<table id=
"dg"
title=
"批量操作"
></table>
101
</body>
102
</html>
后台commit接收类:
Java版本
01
//设置请求编码
02
req.setCharacterEncoding(
"UTF-8"
);
03
//获取编辑数据 这里获取到的是json字符串
04
String deleted = req.getParameter(
"deleted"
);
05
String inserted = req.getParameter(
"inserted"
);
06
String updated = req.getParameter(
"updated"
);
07
08
if
(deleted !=
null
){
09
//把json字符串转换成对象
10
List<Bean> listDeleted = JSON.parseArray(deleted, Bean.
class
);
11
//TODO 下面就可以根据转换后的对象进行相应的操作了
12
}
13
14
if
(inserted !=
null
){
15
//把json字符串转换成对象
16
List<Bean> listInserted = JSON.parseArray(inserted, Bean.
class
);
17
}
18
19
if
(updated !=
null
){
20
//把json字符串转换成对象
21
List<Bean> listUpdated = JSON.parseArray(updated, Bean.
class
);
22
}
Bean.java
01
public
class
Bean {
02
private
String code;
03
private
String name;
04
private
Double price;
05
public
String getCode() {
06
return
code;
07
}
08
public
void
setCode(String code) {
09
this
.code = code;
10
}
11
public
String getName() {
12
return
name;
13
}
14
public
void
setName(String name) {
15
this
.name = name;
16
}
17
public
Double getPrice() {
18
return
price;
19
}
20
public
void
setPrice(Double price) {
21
this
.price = price;
22
}
23
}
PHP版本处理:
01
<?php
02
03
if
(isset(
$_POST
[
"deleted"
])){
04
$deleted
=
$_POST
[
"deleted"
];
//这里获取到的是一个json数组样子字符串,eg:[{code:'1',name:'name',price:323},{..},....]
05
$listDeleted
= json_decode(
$deleted
);
//把这个json数组转化成array对象
06
}
07
08
if
(isset(
$_POST
[
"inserted"
])){
09
$inserted
=
$_POST
[
"inserted"
];
10
$listInserted
= json_decode(
$inserted
);
11
}
12
13
if
(isset(
$_POST
[
"updated"
])){
14
$updated
=
$_POST
[
"updated"
];
15
$listUpdated
= json_decode(
$updated
);
16
}
ASP.NET MVC3版本
01
//获取编辑数据 这里获取到的是json字符串
02
string
deleted = Request.Form[
"deleted"
];
03
string
inserted = Request.Form[
"inserted"
];
04
string
updated = Request.Form[
"updated"
];
05
06
if
(deleted !=
null
){
07
//把json字符串转换成对象
08
List<Bean> listDeleted = JsonDeserialize<List<Bean>>(deleted);
09
//TODO 下面就可以根据转换后的对象进行相应的操作了
10
}
11
12
if
(inserted !=
null
){
13
//把json字符串转换成对象
14
List<Bean> listInserted = JsonDeserialize<List<Bean>>(inserted);
15
}
16
17
if
(updated !=
null
){
18
//把json字符串转换成对象
19
List<Bean> listUpdated = JsonDeserialize<List<Bean>>(updated);
20
}
JsonDeserialize方法:
1
private
T JsonDeserialize<T>(
string
jsonString)
2
{
3
DataContractJsonSerializer ser =
new
DataContractJsonSerializer(
typeof
(T));
4
MemoryStream ms =
new
MemoryStream(Encoding.UTF8.GetBytes(jsonString));
5
T obj = (T)ser.ReadObject(ms);
6
return
obj;
7
}
里面用到的JSON.stringify,主要是把对象转换为字符串的作用。原代码在这里
注意下载这个js后,如果运行出错就去掉最后几行代码。如下删除
1
if
(!Object.prototype.toJSONString) {
2
Object.prototype.toJSONString =
function
(filter) {
3
return
JSON.stringify(
this
, filter);
4
};
5
Object.prototype.parseJSON =
function
(filter) {
6
return
JSON.parse(
this
, filter);
7
};
8
}
0 0
- EasyUI学习之easyui datagrid 批量编辑和提交
- EasyUI学习之easyui datagrid 批量编辑和提交
- easyui datagrid 批量编辑和提交
- ui easyui datagrid 批量编辑和提交
- easyui datagrid 批量编辑和提交
- JQuery EasyUI datagrid 批量编辑和提交
- easyui datagrid 批量编辑和提交
- easyui datagrid 批量编辑和提交
- JQuery EasyUI datagrid 批量编者和提交
- 【EasyUi DataGrid】批量修改提交
- easyui datagrid 批量编辑和提交 并改变修改过单元格的颜色
- EasyUI-DataGrid之批量删除
- EasyUI-DataGrid之批量删除
- EasyUI-DataGrid之批量删除
- easyui datagrid 批量编辑保存删除
- EasyUI datagrid分页,编辑
- Easyui - datagrid 列编辑
- EasyUI DataGrid 编辑单元格
- java面试之泛型
- jquery 动态添加、删除class样式
- java解惑:变量(属性)的覆盖
- 通过proguardgui.bat混淆jar包
- mac连接已安装好svn的windows并且上传数据
- EasyUI学习之easyui datagrid 批量编辑和提交
- 51单片机头文件reg51.h详解
- 时间戳
- java.lang.NoClassDefFoundError: javax/el/ExpressionFactory异常
- buaa2014校赛 1088 再也不会依赖任何人了----线段树
- GO语言学习-内建函数
- hadoop学习笔记:从零开始搭建hadoop集群(完全分布式)
- 个人使用的Android Studio快捷键(MAC版)
- Support Vector Machines