Easyui 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>
jQuery UI
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);
}
MVC3
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 批量编辑和提交
web前台主要代码: <script type="text/javascript"> $(function() { var $dg = $("#dg" ...
- 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 ...
随机推荐
- 5.6.2 Number类型
Number是与数字对应的引用类型.要创建Number对象,可以在调用Number构造函数时向其中传递相应的数值.例如: var numberObject=new Number(10); 与Boole ...
- php分页实例附代码
一个典型的PHP分页实例代码分享,学习php的朋友肯定用得到,主要是了解思路: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- IOS 特定于设备的开发：UIDevice
UIDevice类展示了一些关键的特定于设备的属性,包括使用的iPhone ,Ipad或iPod Touch型号.设备名称.以及OS名称和版本. 他是一种一站式解决方案,用于提取出某些系统详细信息.每 ...
- Aone新拉分支
1.进入Aone新建项目 2.测试人员填huyangjun和husong 3.进入后拉分支 4.弄个日常普通环境 5.吧环境跑起,绑定Host就可以
- Ajax 生成流文件下载 以及复选框的实现
JQuery的ajax函数的返回类型只有xml.text.json.html等类型,没有“流”类型,所以我们要实现ajax下载,不能够使用相应的ajax函数进行文件下载.但可以用js生成一个form, ...
- Azure 网站的新增功能：可配置的环境变量
编辑人员注释:本文章由 WindowsAzure 网站团队的项目经理Erez Benari撰写. Azure最常用的强大功能之一是 XML文档转换 (XDT),通过此功能,您可以在Windows ...
- PHP入门-摘要表格处理问题
几天来学习下来.PHP和C/C++有太多的阶段似系.所以,简单的入门现在看来已经没有问题.然而,由于所选择的条目是一个高速书籍,难免有些粗糙知识.例如,下面的两个问题让我吃了一些损失. 1. 文件标签 ...
- 小编辑 Java 中十进制和十六进制的相互转换
1 2 3 4 5 // 十进制转化为十六进制,结果为C8. Integer.toHexString(200); // 十六进制转化为十进制,结果140. Integer.parseInt(&qu ...
- mysqlcluster笔记
1.config的datamemory和indexmemory规定的内存占有量会在ndb启动时直接占用掉,所以在计算内存时,这两个加起来要小于ndb的内存,这两个还只是数据和索引的内存,查询或者插入时 ...
- c#程序将excel文件转换成xml文件
要程序你自己去组装去,我只写两个部分,一个是读Excel的部分,然后是写入到xml的1) 从指定的excel读出信息string strConn="provider=Microsoft.Je ...