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.3.8 fromCharCode()方法
String构造函数本身还有一个静态方法:fromCharCode().这个方法的任务是接收一或多个字符编码,然后将它们转换成一个字符.从本质上来看,这个方法与实例方法charCodeAt()执行的是 ...
- C#_C++_SDK_WM_KEYDOWN人物卡顿延迟解决方法
提问者采纳 由Keydown和keyup事件组合,keyDown来判定按下,此时开始移动,KeyUp判定松开,这样可行否? 追问 这是我一开始的写法,但就是因为 键盘重复延迟 导致keydown后会有 ...
- squid客户端命令
常用squid客户端命令: squidclient -p mgr:info #取得squid运行状态信息: squidclient -p mgr:mem #取得squid内存使用情况: squidcl ...
- 新唐M0特点分析
1,价格低,05x系列0.6-1.5美金,1xx系列1.5-3.5美金:2,性能好,最新32位CORTEX-M0的ARM核,唯一可工作到+5.5V的CORTEX-M0:3,速度快,CPU核能跑到50M ...
- Hibernate Dialect must be explicitly set
在偶然一次运行hibernate测试类的时候,出现如下错误,Exception in thread "main" org.hibernate.HibernateException: ...
- Uber选拔专车司机:五年以上驾驶经验 两小时视频培训
摘要:说起当时下流行打车软件Uber的司机,还得从春节前在上海一次打车说起.那几天,记者在上海某商场逛到打烊时间,大包小包拎着袋子根本腾不出手拦出租车,而商场门口的出租车临时停靠点更是挤满“血拼”而归 ...
- 编译最新ffmpeg2.0.1到iOS设备
www.mingjianhua.com 转载请注明出处. 上一篇文章讲了用NDKr9编译最新ffmpeg2.0.1到android平台,一般做了Android平台的编解码就免不了要做iOS,这次一起把 ...
- Ext JS学习第十三天 Ext基础之 Ext.Element
•Ext.Element提供了181个方法,嗯,还没完,只是在4.1版本中是这样,最新的4.2版本貌似又增加了新方法,可谓是相当丰富给力.那么根据操作类型基本可以分为查询系.DOM操作系.样式操作系. ...
- .net EF中从数据添加表或视图时无法添加的问题
.net 使用EF模式进行开发,添加实体时不能够正常添加 错误描述: .net中在EF文件中添加数据库中已有的表或视图时不能正常添加,在添加时没有任何的错误提示,但是表或视图就一直拉不过来,,保存也没 ...
- JDK和JRE的差异和区别
来源:http://docs.oracle.com/javase/7/docs/