[转]easyui datagrid 批量编辑和提交
web前台主要代码:
<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>
后台commit接收类:
Java版本处理
//设置请求编码
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);
}
Bean.java
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;
}
}
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);
}
ASP.NET MVC3版本:
//获取编辑数据 这里获取到的是json字符串
string deleted = Request.Form["deleted"];
string inserted = Request.Form["inserted"];
string updated = Request.Form["updated"]; if(deleted != null){
//把json字符串转换成对象
List<Bean> listDeleted = JsonDeserialize<List<Bean>>(deleted);
//TODO 下面就可以根据转换后的对象进行相应的操作了
} if(inserted != null){
//把json字符串转换成对象
List<Bean> listInserted = JsonDeserialize<List<Bean>>(inserted);
} if(updated != null){
//把json字符串转换成对象
List<Bean> listUpdated = JsonDeserialize<List<Bean>>(updated);
}
JsonDeserialize方法:
private T JsonDeserialize<T>(string jsonString)
{
DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(T));
MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(jsonString));
T obj = (T)ser.ReadObject(ms);
return obj;
}
里面用到的JSON.stringify,主要是把对象转换为字符串的作用。原代码在这里
注意下载这个js后,如果运行出错就去掉最后几行代码。如下删除
if (!Object.prototype.toJSONString) {
Object.prototype.toJSONString = function (filter) {
return JSON.stringify(this, filter);
};
Object.prototype.parseJSON = function (filter) {
return JSON.parse(this, filter);
};
}
转:http://www.jeasyuicn.com/easyui-datagrid-batch-edit-and-submit.html
[转]easyui datagrid 批量编辑和提交的更多相关文章
- easyui datagrid 批量编辑和提交数据
easyui datagrid 行编辑和提交方,废话就不多说了,直接上代码 <div style="margin: 5px;"> <table id=" ...
- Easyui datagrid 批量编辑和提交
<script type="text/javascript"> $(function() { var $dg = $("#dg"); $dg.dat ...
- EASYUI datagrid批量修改与提交
http://www.cnblogs.com/szytwo/archive/2012/08/29/2662169.html 前台主要代码: <script type="text/jav ...
- easyui datagrid可编辑表格使用经验分享
文章目录 1相关接口方法 2列属性formatter 3编辑器类型 3.1基于my97的编辑器 3.2简单的密码编辑器 3.3动态增加/删除编辑器 4字段的级联操作 4.1combobox的级联操作 ...
- 关于EasyUI DataGrid行编辑时嵌入时间控件
本人做一个名为“安徽中控”项目时,为快速开发基础数据增删改模块,遂采用EasyUIDatagrid将所有增删改查的操作都集中于表格中,并且所有增删改查操作都集中于泛型对象,从而不必为每个表写具体的增删 ...
- EasyUI DataGrid能编辑
创建DataGrid <table id="tt"></table> $('#tt').datagrid({ title:'Editable Dat ...
- EasyUI datagrid 行编辑
一.HTML: <div class="info"> <div class="info_tt"> <span class=&quo ...
- easyui datagrid行编辑中数据联动
easyui的datagrid中行内编辑使用数据联动.即:当编辑产品编号时,该行的产品名称自动根据产品编号显示出来. 在编辑中获取当前行的索引 function getRowIndex(target) ...
- EasyUI Datagrid 取编辑修改后的内容
<script type="text/javascript"> $(function () { $('#tt').datagrid({ iconCls: 'icon-e ...
随机推荐
- 翻译--Blazing fast node.js: 10 performance tips from LinkedIn Mobile
1.避免使用同步代码: // Good: write files asynchronously fs.writeFile('message.txt', 'Hello Node', function ( ...
- 聊聊CSS postproccessors
阿里妈妈 @一丝 准备发布其CSSGrace,即CSS后处理插件,于是顺便聊聊CSS postprocessors. 从Rework说起 Rework是TJ大神开发的CSS预处理框架.但为什么会出 ...
- 【转】Windows Phone 8 开发环境的搭建
1.先安装Microsoft Visual Studio 2012旗舰版,安装包自己下载. 系统必须是Win8 X64 对于软硬件的检测可以参照: Windows Phone 8开发环境搭建之一.电脑 ...
- [开发笔记]-MarkDown语法
马克飞象MarkDown在线编辑器 http://maxiang.info/?basic 1. H1--H6 相应数量的# 2. 底线形式 = H1(最高阶标题)和- H2(第二阶标题) 3. 段落和 ...
- 题目:打印出所有的 "水仙花数 ",所谓 "水仙花数 "是指一个三位数,其各位数字立方和等于该数本身。例如:153是一个 "水仙花 数 ",因为153=1的三次方+5的三次方+3的三次方。
题目:打印出所有的 "水仙花数 ",所谓 "水仙花数 "是指一个三位数,其各位数字立方和等于该数本身.例如:153是一个 "水仙花 数 ", ...
- Android学习笔记----TimerTask中显示Toast的问题
今天想在TimerTask的run函数中调用Toast显示一下提示信息,却总是导致程序崩溃.可是try语句块却又无法捕获到异常,代码如下: ...... Timer timer = new Timer ...
- Spring MVC 事务配置
Spring MVC事务配置 要了解事务配置的所有方法,请看一下<Spring事务配置的5种方法> 本文介绍两种配置方法: 一. XML,使用tx标签配置拦截器实现事务 一. ...
- Android实现自适应正方形GridView(陌陌引导页面效果)
1.http://blog.chengyunfeng.com/?p=465 2.备注,慢慢研究
- C#下水晶报表打印自定义纸张
在VB6中,如果要自定义纸张很方便: Rpt.PaperSize = crPaperUser Rpt.SetUserPaperSize lZZG, lZZK 但在C#中却不行了,没有发现 SetU ...
- 在linux下挂载、卸载U盘
首先你得保证你的U盘的格式是fat格式. 先进入/mnt/目录新建一个usb目录 cd /mnt/ mkidr usb 先fdisk -l,然后插上U盘,fdisk -l 查看是否有新的硬盘添加上来了 ...