效果如图：
参见 EasyUI 官方 Demo 及文档
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <script src="~/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script> <table id="datagrid" class="easyui-datagrid" title="" style=" 100%;" data-options="rownumbers:true,autoRowHeight:false,pagination:true,toolbar:'#tb',footer:'#ft',fit:true, pageSize:50,singleSelect:true,collapsible:true,url:'@Url.Action("GetGridJSON")',method:'post',fixed:true, remoteSort:false,onClickCell: onClickCell,onAfterEdit:onAfterEdit, multiSort:true"> <thead> <tr> <th data-options="field:'Id',checkbox:true"></th> <th data-options="field:'Url',editor:'text'">Url</th> <th data-options="field:'MenuNo',editor:'text'">MenuNo</th> <th data-options="field:'MenuLevel',editor:'text'">MenuLevel</th> <th data-options="field:'MenuName',editor:'text'">MenuName</th> </tr> </thead> </table> <div id="tb" style="padding: 2px 5px;"> <a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true">增加</a> @*<a href="#" class="easyui-linkbutton" iconcls="icon-edit" plain="true">修改</a>*@ <a href="#" class="easyui-linkbutton" iconcls="icon-cancel" plain="true">删除</a> <a href="#" class="easyui-linkbutton" iconcls="icon-xls" plain="true">导出Excel</a> <a href="#" class="easyui-linkbutton" iconcls="icon-scan" plain="true">扫描添加</a> <select onchange="$('#datagrid').datagrid({singleSelect:(this.value==0)})"> <option value="0">选中单行</option> <option value="1">选中多行</option> </select> <input class="easyui-textbox" id="MenuNo" value="" name="MenuNo" data-options="prompt:'MenuNo:'" style="height: 22px; 120px"> <input class="easyui-textbox" id="url" value="" name="url" data-options="prompt:'url:'" style="height: 22px; 120px"> <input class="easyui-textbox" id="MenuName" value="" name="MenuName" data-options="prompt:'MenuName:'" style="height: 22px; 120px"> <a href="#" class="easyui-linkbutton" onclick="doSearch()" iconcls="icon-search">查询</a> <div id="w" class="easyui-window" title="Modal Window" data-options="modal:true,closed:true" style="padding: 10px;"> </div> </div> <script> var UrlActionToExcel = "@Url.Action("ToExcel")"; $(document).ready(function () { $("[iconcls='icon-scan']").click(function () { $.ajax({ type: "GET", url: "scan", async: false, success: function (data) { doSearch(); parent.showMsgTopCenter("提示", "已经生成" + data + "行记录"); } }); }); }); </script> <script type="text/javascript"> $.extend($.fn.datagrid.methods, { editCell: function (jq, param) { return jq.each(function () { var opts = $(this).datagrid('options'); var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields')); for (var i = 0; i < fields.length; i++) { var col = $(this).datagrid('getColumnOption', fields[i]); col.editor1 = col.editor; if (fields[i] != param.field) { col.editor = null; } } $(this).datagrid('beginEdit', param.index); for (var i = 0; i < fields.length; i++) { var col = $(this).datagrid('getColumnOption', fields[i]); col.editor = col.editor1; } }); } }); var editIndex = undefined; function endEditing() { if (editIndex == undefined) { return true } if ($('#datagrid').datagrid('validateRow', editIndex)) {// 检测 数据是否发生 改变 $('#datagrid').datagrid('endEdit', editIndex);// 触发 onAfterEdit 方法 editIndex = undefined; return true; } else { return false; } } function onClickCell(index, field, data) { if (endEditing()) { $('#datagrid').datagrid('selectRow', index) .datagrid('editCell', { index: index, field: field, data: data }); editIndex = index; } } function onAfterEdit(rowIndex, rowData, changes) {// onAfterEdit 在 rowData 本行数据 ，changes 发生改变的数据 for (change in changes) { var temp = {}; temp[change] = changes[change]; temp["Id"] = rowData.Id; temp["MenuLevel"] = rowData.MenuLevel; // 这是 int 类型 ，后台 只排除 string == null,所有要加上 $.ajax({ type: "POST", url: "updateCell", traditional: true, data: temp,//每次 只修改 一行数据中的 某一个字段 async: false, dataType: "json", sunccess: function (data) {//dataType 没有限制 parent.showMsgTopCenter("提示", "已修改" + data + "行数据");
} }) } } </script>
public void UpdateCell(Sys_Menu model) { ef_Help.ModifyWithOutproNames<Sys_Menu>(model); Response.Write(db.SaveChanges()); Response.End(); } public int Scan() { var My_Assembly = Assembly.GetExecutingAssembly();// 获得 当前 正在 运行 的程序集 My_Assembly.GetType().GetMethods(); string[] ReturnTyoes = { "ActionResult", "Int32", "String" };//只接收 返回值类型 为 这3中的方法。 var Models = db.Sys_Menu.ToList();// 菜单集合 List<string> UrlArr = new List<string>();// 扫描 Url 集合 foreach (Type type in My_Assembly.GetTypes())//遍历所有 类 { if (type.Name.Contains("Controller") && type.FullName.Contains("Areas"))// 只扫描 Areas 下的 Controller 类 { var FullName = type.FullName.Split('.'); var AreaName = FullName[2];//获得区域名称 var ControllerName = FullName[4].Substring(0, FullName[4].Length - "Controller".Length);//获得 Control 名称 foreach (var Method in type.GetMethods())//遍历 所有 方法 { if (ReturnTyoes.Contains(Method.ReturnType.Name) && Method.DeclaringType.Name != "Object")// 排除 基类 Object ，及它的方法 { var ActionNameAttribute = Method.GetCustomAttributes(typeof(ActionNameAttribute), false); var MethodName = ActionNameAttribute.Length > 0 ? ((ActionNameAttribute)Method.GetCustomAttributes(typeof(ActionNameAttribute), false)[0]).Name : Method.Name; var Url = string.Format("/{0}/{1}/{2}", AreaName, ControllerName, MethodName);//获得 真实 action (有ActionNameAttribute标记的 ) if (Models.Where(X => X.Url == Url).FirstOrDefault() == null && !UrlArr.Contains(Url))// 排除 已有的Url { UrlArr.Add(Url); } } } } } foreach (var url in UrlArr) { db.Sys_Menu.Add(new Sys_Menu() { MenuLevel = 0, MenuName = "未知", MenuNo = "未知", Url = url }); } return db.SaveChanges(); }