<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/themes/Easyui/default/easyui.css" rel="stylesheet" />
<link href="~/themes/Easyui/icon.css" rel="stylesheet" />
<script src="~/scripts/jquery-1.9.1.min.js"></script>
<script src="~/scripts/jquery.easyui.min.js"></script>
<script src="~/scripts/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
var editIndex = undefined;
$(function () {
bindData();
bindAddButton();
bindDelButton();
bindSaveButton();
});
function bindData() {
$('#dg').datagrid({
title: '部门管理',
url: '/Home/GetBranch',
pagination: true,
singleSelect: true,
rownumbers: true,
pageNumber: 1,
height: 420,
pageSize: 10,
onClickRow: onClickRow,
pageList: [10, 15, 20, 25, 30],
columns: [[
{ field: 'ID', title: 'ID', hidden: true },
{ field: 'BrcName', title: '部门名称' ,editor:"text"},
{ field: 'BrcComment', title: '备注', editor: "text" }
]],
toolbar: '#tb'
});
}
//编辑状态
function endEditing() {
if (editIndex == undefined) { return true }
if ($('#dg').datagrid('validateRow', editIndex)) {
var ed = $('#dg').datagrid('getEditor', { index: editIndex, field: 'productid' });
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
//单击某行进行编辑
function onClickRow(index) {
if (editIndex != index) {
if (endEditing()) {
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
editIndex = index;
} else {
$('#dg').datagrid('selectRow', editIndex);
}
}
}
//添加一行
function append() {
if (endEditing()) {
$('#dg').datagrid('appendRow', { });
editIndex = $('#dg').datagrid('getRows').length - 1;
$('#dg').datagrid('selectRow', editIndex)
.datagrid('beginEdit', editIndex);
}
}
//删除一行
function remove() {
if (editIndex == undefined) { return }
$('#dg').datagrid('cancelEdit', editIndex)
.datagrid('deleteRow', editIndex);
editIndex = undefined;
}
//撤销编辑
function reject() {
$('#dg').datagrid('rejectChanges');
editIndex = undefined;
}
//获得编辑后的数据,并提交到后台
function saveChanges() {
if (endEditing()) {
var $dg = $('#dg');
var rows = $dg.datagrid('getChanges');
if (rows.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("/Home/Commit", effectRow, function (rsp) {
if (rsp) {
$dg.datagrid('acceptChanges');
bindData();
}
}, "JSON").error(function () {
$.messager.alert("提示", "提交错误了!");
});
}
function bindSaveButton() {
$("#saveButton").click(function () {
saveChanges();
});
}
function bindAddButton() {
$("#addButton").click(function () {
append();
});
}
function bindDelButton() {
$("#delButton").click(function () {
remove();
});
}
</script>
</head>
<body>
<table id="dg">
</table>
<div id="tb">
<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" id="addButton">新增</a>
<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" id="delButton">删除</a>
<a href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-save'" id="saveButton">保存</a>
</div>
</body>
</html>
前台代码
public ActionResult Commit() {
string deleted = Request.Form["deleted"];
string inserted = Request.Form["inserted"];
string updated = Request.Form["updated"];
if (deleted != null)
{
//把json字符串转换成对象
List<Model.Branch> listDeleted = JsonDeserialize<List<Branch>>(deleted);
//下面就可以根据转换后的对象进行相应的操作了
}
if (inserted != null)
{
//把json字符串转换成对象
List<Model.Branch> listInserted = JsonDeserialize<List<Model.Branch>>(inserted);
//下面就可以根据转换后的对象进行相应的操作了
}
if (updated != null)
{
//把json字符串转换成对象
List<Branch> listUpdated = JsonDeserialize<List<Branch>>(updated);
//
}
MVC代码
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;
}