Easyui+MVC行内编辑
在.NET中进行行内编辑，主要适用于从表的编辑，删除，增加和批量提交。一般主表不做此种应用，适个人的具体情况使用。
因为是在Easyui基础上开发的， 所以里边调用了大量的Easyui方法，不懂得可以看资料里边的Easyui中文版，获取自己从网上找一下资源。
直接先上效果图
下边是步骤，很详细很详细的步骤呦。
1、先加一个列表
<body>
<table id="custromList"></table>
</body>2、书写显示的内容
<script type="text/javascript">
$(function () {
$("#custromList").datagrid({
fit: true,
title: '顾客信息表',
striped: true, //下划线
url: '@Url.Action("GetAll")',
rownumbers: true,//行数
border: false, //边框
columns: [[
{
field: 'ID', title: '编号', hailgn: 'center', align: 'center', width: 100
},
{
field: 'C_name', title: '顾客姓名', hailgn: 'center', align: 'center', width: 200, editor: { type: "validatebox", options: { required: true } }
},
{
field: 'C_age', title: '顾客年龄', hailgn: 'center', align: 'center', width: 200, editor: { type: "numberbox", options: { required: true } },
},
{
field: 'C_date', title: '出生年月', hailgn: 'center', align: 'center', formatter: formatDatebox, width: 200, editor: { type: "datebox", options: { required: true } }
},
{
field: 'action', title: '操作', hailgn: 'center', align: 'center', formatter: formatDatebox, width: 200,
},
]],
});
});上边是显示的代码，我说一下需要注意的几个点。
（1）在你的每个字段后边加上编辑editors，他的作用是定义在编辑行的时候使用的编辑器。
（2）URL调的方法是获取所有值，这个需要自己写，因为每个人写的可能都不一样哦，根据自己的项目写。
3、添加操作的按钮。
在上文显示的操作里边，加入编辑和删除按钮。
formatter: function (value, row, index) {
if (row.editing == true) {
return "<a href='#' onclick='saveRow(" + index + ")'>确认</a> <a href='#' onclick='reRow(" + index + ")'>取消</a>"
}
else {
return "<a href='#' onclick='editRow(" + index + ")'>编辑</a> <a href='#' onclick='deleteRow(" + index + ")'>删除</a>"
}
}这是easyui中的一种写法，可以自己进行一些修改。放在上文操作显示的里边就行。里边设计的编辑方法、删除方法、确定方法、取消方法如下：
function editRow(index)
{
$('#custromList').datagrid('beginEdit', index);//开始编辑行。
} function saveRow(index)
{
$('#custromList').datagrid('endEdit', index);
} function deleteRow(index)
{
$.messager.confirm('确认', '确定要删除吗？', function (r) {
if (r) {
$('#custromList').datagrid('deleteRow', index);
}
});
}function reRow(index)
{
$('#custromList').datagrid('cancelEdit', index);
}endEdit和beginEdit可以查阅Easyui的相关文档。
在这些执行以后，应该你点击按钮可能会有一些反应了，但是你还少几个方法的配合，那就是告诉系统在你编辑前，编辑中，编辑后做些什么。
//触发前触发
onBeforeEdit: function (index, row)
{
row.editing = true;
$('#custromList').datagrid('refreshRow', index);
},
//完成编辑后触发
onAfterEdit: function (index, row)
{
row.editing = false;
$('#custromList').datagrid('refreshRow', index);
},
//取消编辑后触发
onCancelEdit:function(index,row)
{
row.editing = false;
$('#custromList').datagrid('refreshRow', index);
}4、添加的实现
现在肯定有反应了，这个时候你需要添加功能的实现了。
对了，上边的三个方法是在首次加载里边哦。
<a class="easyui-linkbutton" iconcls="icon-add" onclick="addRow();">添加</a>在你的Table上边加上这个按钮。如果嫌样式的问题，可以自行查看easyui文档。
添加的方法:
function addRow()
{
$('#custromList').datagrid('appendRow', {});//追加一个新行。新行将被添加到最后的位置。
var lastRowIndex=$('#custromList').datagrid('getRows').length-1;//返回当前页的最后一行。
$('#custromList').datagrid('beginEdit', lastRowIndex);//开始编辑行。
}5、提交
最后一个功能也是最重要的功能，那就是提交数据了，毕竟之前的不管是添加，还是修改，删除，都是在前台的缓存，并没有真的把他们存到了数据库中，你还需要一个功能进行提交服务器哦。
<a class="easyui-linkbutton" iconcls="icon-save" onclick="Save();">批量提交</a>先在添加旁边加个按钮哦。
保存的方法：
function Save() {
var len = $('#custromList').datagrid('getChanges').length;
if (len > 0) {
var inserted = $("#custromList").datagrid('getChanges',"inserted");//获取新添加的行
var deleted = $("#custromList").datagrid('getChanges',"deleted");//获取删除的行
var updated = $("#custromList").datagrid('getChanges',"updated");//获取修改的行
var data = {};
data.Inserted = inserted;
data.Deleted = deleted;
data.Updated = updated;
$.ajax({
url: '@Url.Action("Save")',
type: 'POST',
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
alert(msg.msg);
}
});}
else {
alert("没有发生变化的数据！");
return;
}}这个有一个后台的方法，就是提交三个方法，我也是想了会写的，我贴出来，希望对你的代码有帮助。
public ActionResult Save(Customers ps)
{
string state = "true";
string msg = "提交成功";
if (ps.Inserted != null)
{
foreach (var item in ps.Inserted)
{
Bll.Add(item);
}
}
else if (ps.Deleted !=null)
{
foreach (var item in ps.Deleted)
{
Bll.Delete(x => x.ID == item.ID);
}
}
else if (ps.Updated !=null)
{
foreach (var item in ps.Updated)
{
Bll.Modify(item);
}
}
else
{
state = "false";
msg = "提交失败";
}
return Json(new { state = state, msg = msg });
}对了，忘了一个重要的，我还在UI层中建了一个类，来放他的添加，删除，修改。
public List<CO.Model.Customer> Inserted { get; set; }
public List<CO.Model.Customer> Deleted { get; set; }
public List<CO.Model.Customer> Updated { get; set; }这样下来，一个基于easyui的行内编辑就实现啦，还有什么不了解的，可以评论哦，或者有补充意见也可以留言哦，欢迎评论。
