[转]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 ...
随机推荐
- Test Tex
\begin{equation}\label{exampleone}r = r_F+ \beta (r_M - r_F) + \epsilon\end{equation}
- Swift编程语言中的方法引用
由于Apple官方的<The Swift Programming Guide>对Swift编程语言中的方法引用介绍得不多,所以这里将更深入.详细地介绍Swift中的方法引用. Swift与 ...
- WPF 创建桌面快捷方式
#region 创建桌面快捷方式 string deskTop = System.Environment.GetFolderPath(System.Environment.SpecialFolder. ...
- POJ-1475-Pushing Boxes(BFS)
Description Imagine you are standing inside a two-dimensional maze composed of square cells which ma ...
- Windows Live Writer配置步骤
推荐文档: [超详细教程]使用Windows Live Writer 2012和Office Word 2013 发布文章到博客园全面总结 Live Writer 使用小贴示:发博客时始终使用图片原始 ...
- Unity5网络模块UNet介绍
前段时间,研究了一下UNet,经过项目实践,大致整理了下遇到的问题. 源码Bitbucket:需要说明的是,这个项目只包含上层的包装,一些低层的网络实现在Unity内部,如NetworkTranspo ...
- 修改 上传图片按钮input-file样式。。
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- SQL调优 - Hints指定索引 解决慢查询案例
背景 每当交易高峰时期,可能会暴露一些平时无法发现的问题,机遇和挑战并存.下面聊聊最近解决的一个案例,因为执行计划走错导致慢查询,进而引发应用线程阻塞.线程池爆满,最后应用功能瘫痪.如何标本兼治的解决 ...
- 『Golang』跨平台TUI(基于文字的用户界面)库Terbox-Go文档翻译
原文 package termbox import "github.com/nsf/termbox-go" termbox-go 是一个用于创建跨平台TUI(基于文本的用户界面)的 ...
- java--遍历自定义数组
比如像下面这样 for (int i : new int[]{1,4,8}){ System.out.println(i); } 或者这样: for (String i : new String[]{ ...