Easyui+MVC行内编辑

来源：互联网发布：优化设计编辑：程序博客网时间：2024/06/06 18:09

在.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>&nbsp;<a href='#' onclick='reRow(" + index + ")'>取消</a>"                      }                      else {                          return "<a href='#' onclick='editRow(" + index + ")'>编辑</a>&nbsp;<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的行内编辑就实现啦，还有什么不了解的，可以评论哦，或者有补充意见也可以留言哦，欢迎评论。

阅读全文

1 0