首页 > 代码库 > Jquery easyui datagrid增改删批量处理
Jquery easyui datagrid增改删批量处理
<link href="http://www.mamicode.com/~/Content/themes/default/easyui.css" rel="stylesheet" />
<link href="http://www.mamicode.com/~/Content/themes/icon.css" rel="stylesheet" />
<script src="http://www.mamicode.com/~/scripts/jquery.min.js"></script>
<script src="http://www.mamicode.com/~/scripts/jquery.easyui.min.js"></script>
<script src="http://www.mamicode.com/~/scripts/easyui-lang-zh_CN.js"></script>
<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>
<script type="text/javascript">
var editIndex = undefined;
$(function () {
bindData();
bindAddButton();
bindDelButton();
bindSaveButton();
});
function bindData() {
$(‘#dg‘).datagrid({
title: ‘部门管理‘,
url: ‘/Home/GetBranch‘,
pagination: false,
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 append(BrcName, BrcComment) {
if (endEditing()) {
$(‘#dg‘).datagrid(‘appendRow‘, { BrcName: BrcName, BrcComment: BrcComment });
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) {
for (var i = 0; i < inserted.length; i++)
{
if (inserted[i].BrcName == "")
{
alert("BrcName不能为空");
return;
}
}
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(‘FFF‘, ‘GGG‘);
});
}
function bindDelButton() {
$("#delButton").click(function () {
remove();
});
}
</script>
后台：
public class TestInfo
{
public string ID { get; set; }
public string BrcName { get; set; }
public string BrcComment { get; set; }
}
public JsonResult GetBranch()
{
tests.Add(new TestInfo() { ID = "1", BrcName = "AAA", BrcComment = "bbb" });
tests.Add(new TestInfo() { ID = "2", BrcName = "bbb", BrcComment = "ccc" });
return Json(tests);
}
[HttpPost]
public ActionResult Commit()
{
tests.Add(new TestInfo() { ID = "1", BrcName = "AAA", BrcComment = "bbb" });
tests.Add(new TestInfo() { ID = "2", BrcName = "bbb", BrcComment = "ccc" });
tests.Add(new TestInfo() { ID = "3", BrcName = "FFF", BrcComment = "GGG" });
string deleted = Request.Form["deleted"];
string inserted = Request.Form["inserted"];
string updated = Request.Form["updated"];
if (deleted != null)
{
//把json字符串转换成对象
List<TestInfo> listDeleted = JsonDeserialize<List<TestInfo>>(deleted);
//下面就可以根据转换后的对象进行相应的操作了
}
if (inserted != null)
{
//把json字符串转换成对象
List<TestInfo> listInserted = JsonDeserialize<List<TestInfo>>(inserted);
//下面就可以根据转换后的对象进行相应的操作了
}
if (updated != null)
{
//把json字符串转换成对象
List<TestInfo> listUpdated = JsonDeserialize<List<TestInfo>>(updated);
//
}
Thread.Sleep(3000);
return Content("true");
}
[NonAction]
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;
}
Jquery easyui datagrid增改删批量处理