加入收藏 | 网站地图 | | RSS | WAP
你好,游客 登录 注册 搜索

jQuery EasyUI批量添加、编辑datagrid中的数据

[日期:2013-02-28] 作者: 来源: [字体: ]

jQuery EasyUI官方只有单个编辑datagrid某一行的数据示例,没有批量添加或者更新datagrid中所有数据的示例。整理如下:

前台代码:

<script type="text/JavaScript">

$(function() {

var $dg = $("#dg");

$dg.datagrid({

url : "servlet/list",

width : 700,

height : 250,

columns : [ [ {

field : 'code',

title : 'Code',

width : 100,

editor : "validatebox"

}, {

field : 'name',

title : 'Name',

width : 200,

editor : "validatebox"

}, {

field : 'price',

title : 'Price',

width : 200,

align : 'right',

editor : "numberbox"

} ] ],

toolbar : [ {

text : "添加",

iconCls : "icon-add",

handler : function() {

$dg.datagrid('appendRow', {});

var rows = $dg.datagrid('getRows');

$dg.datagrid('beginEdit', rows.length - 1);

}

}, {

text : "编辑",

iconCls : "icon-edit",

handler : function() {

var row = $dg.datagrid('getSelected');

if (row) {

var rowIndex = $dg.datagrid('getRowIndex', row);

$dg.datagrid('beginEdit', rowIndex);

}

}

}, {

text : "删除",

iconCls : "icon-remove",

handler : function() {

var row = $dg.datagrid('getSelected');

if (row) {

var rowIndex = $dg.datagrid('getRowIndex', row);

$dg.datagrid('deleteRow', rowIndex);

}

}

}, {

text : "结束编辑",

iconCls : "icon-cancel",

handler :endEdit

}, {

text : "保存",

iconCls : "icon-save",

handler : function() {

endEdit();

if ($dg.datagrid('getChanges').length) {

var inserted = $dg.datagrid('getChanges', "inserted");

var deleted = $dg.datagrid('getChanges', "deleted");

var updated = $dg.datagrid('getChanges', "updated");

 

var effectRow = new Object();

if (inserted.length) {

effectRow["inserted"] = JSON.stringify(inserted);

}

if (deleted.length) {

effectRow["deleted"] = JSON.stringify(deleted);

}

if (updated.length) {

effectRow["updated"] = JSON.stringify(updated);

}

 

$.post("servlet/commit", effectRow, function(rsp) {

if(rsp.status){

$.messager.alert("提示", "提交成功!");

$dg.datagrid('acceptChanges');

}

}, "JSON").error(function() {

$.messager.alert("提示", "提交错误了!");

});

}

}

} ]

});

 

function endEdit(){

var rows = $dg.datagrid('getRows');

for ( var i = 0; i < rows.length; i++) {

$dg.datagrid('endEdit', i);

}

}

});

</script>

<body>

<table id="dg" title="批量操作"></table>

</body>

</HTML>

后台接收处理类:

//PHP版处理最简单

<?php

 

if(isset($_POST["deleted"])){

$deleted = $_POST["deleted"];//这里获取到的是一个json数组样子字符串,eg:[{code:'1',name:'name',price:323},{..},....]

$listDeleted = json_decode($deleted); //把这个json数组转化成array对象

}

 

if(isset($_POST["inserted"])){

$inserted = $_POST["inserted"];

$listInserted = json_decode($inserted);

}

 

if(isset($_POST["updated"])){

$updated = $_POST["updated"];

$listUpdated = json_decode($updated);

}

Java版需要手工将json转换为对象集合:

//设置请求编码

req.setCharacterEncoding("UTF-8");

//获取编辑数据 这里获取到的是json字符串

String deleted = req.getParameter("deleted");

String inserted = req.getParameter("inserted");

String updated = req.getParameter("updated");

 

if(deleted != null){

//把json字符串转换成对象

List<Bean> listDeleted = JSON.parseArray(deleted, Bean.class);

//TODO 下面就可以根据转换后的对象进行相应的操作了

}

 

if(inserted != null){

//把json字符串转换成对象

List<Bean> listInserted = JSON.parseArray(inserted, Bean.class);

}

 

if(updated != null){

//把json字符串转换成对象

List<Bean> listUpdated = JSON.parseArray(updated, Bean.class);

}

public class Bean {

private String code;

private String name;

private Double price;

public String getCode() {

return code;

}

public void setCode(String code) {

this.code = code;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public Double getPrice() {

return price;

}

public void setPrice(Double price) {

this.price = price;

}

}

Bean类是单个对象的类。

关键词:批量  编辑  添加  EasyUI  DataGrid 

收藏 推荐 打印 | 录入:blue1000 | 阅读:
本文评论   查看全部评论 (2)
表情: 姓名: 字数
点评:
       
评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事/刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
第 2 楼
* 匿名 发表于 2016/12/25 16:15:51
http://www.blue1000.com/bkhtml/c117/2012-11/70996.htm 服务明星事迹材料 http://www.135995.com/show/1673.html 标兵事迹材料 http://www.135995.com/show/1672.html
第 1 楼
* 匿名 发表于 2016/12/24 16:00:21
http://www.blue1000.com/bkhtml/c117/2012-11/70996.htm 建筑工程催款函 http://www.135995.com/show/16114.html 工程进度款催款函 http://www.135995.com/show/16113.html