引入EasyUi所有需要的脚本，样式
<link href="/easyui/themes/default/easyui.css" rel="stylesheet" /> <link href="/easyui/themes/icon.css" rel="stylesheet" /> <script src="/easyui/jquery.min.js"></script> <script src="/easyui/jquery.easyui.min.js"></script> <script src="/easyui/locale/easyui-lang-zh_CN.js"></script>
JS脚本部分
1 <script type="text/javascript"> 2 $(function () { 3 obj = { 4 editRow: undefined, 5 add: function () { 6 7 $('#save,#redo').show(); 8 if (this.editRow == undefined) 9 { 10 /*appenRow 在末尾添加一行*/ 11 $('#box').datagrid('insertRow', { 12 index: 0, 13 row: { 14 cityname: '', 15 intro: '', 16 code: '', 17 } 18 }); 19 //将第一行设置为可编辑状态 20 $("#box").datagrid('beginEdit', 0), 21 this.editRow =0 ; 22 23 } 24 }, 25 26 edit:function() 27 { 28 var rows = $('#box').datagrid('getSelections'); 29 if (rows.length == 1) { 30 if (this.editRow != undefined) { 31 32 $("#box").datagrid('endEdit', this.editRow) 33 34 } 35 if (this.editRow == undefined) { 36 var index=$("#box").datagrid('getRowIndex',rows[0]) 37 $('#save,#redo').show(); 38 $("#box").datagrid('beginEdit', index) 39 this.editRow = index 40 //关闭当前行编辑状态 41 $("#box").datagrid('unselectRow',index) 42 } 43 } 44 else { 45 $.messager.alert('警告', '修改只能选中一行','warning'); 46 } 47 48 }, 49 /*删除*/ 50 remove:function() 51 { 52 var rows = $('#box').datagrid('getSelections'); 53 if (rows.length > 0) { 54 $.messager.confirm('确定操作', '您确定要删除所选中的记录吗', function (flag) { 55 if (flag) 56 { 57 var ids = []; 58 for (var i = 0; i < rows.length; i++) 59 { 60 ids.push(rows[i].cid); 61 } 62 $.ajax( 63 { 64 url: "/cityManager/cityRemove", 65 data:{"ids":ids.join(',')}, 66 type: "post", 67 success: function (data) 68 { 69 if (data.Message == "Success") 70 { 71 $("#box").datagrid("loaded"); 72 $("#box").datagrid("load"); 73 $("#box").datagrid("unselectAll"); 74 $.messager.show({ 75 title: '提示', 76 msg:data.flag+'个信息被删除成功！', 77 }) 78 } 79 }, 80 error: function (data) 81 { 82 $.messager.alert(data); 83 } 84 }); 85 obj.editRow = undefined; 86 } 87 } 88 ) 89 } 90 else { 91 $.messager.alert('警告','请选中一行或多行','info') 92 93 } 94 }, 95 save: function () 96 { 97 //这两句不应该放这里，应该是保存之后放这里 98 //$('#save,#redo').hide(); 99 //this.editRow = false; 100 //将第一行设置为结束编辑 101 //保存当前行的数据结束编辑 102 $("#box").datagrid('endEdit', this.editRow) 103 104 }, 105 redo: function () 106 { 107 $('#save,#redo').hide(); 108 this.editRow = undefined; 109 /*回滚所有从创建或上一次调用acceptChanges函数后更该的数据*/ 110 $("#box").datagrid('rejectChanges') 111 } 112 }; 113 /*加载表格*/ 114 $("#box").datagrid({ 115 url: '/cityManager/cityQuery', 116 singleSelect: false,//多选 117 pagination: true,//分页 118 pageSize: 10,//页面大小 119 pageList: [5, 10, 15, 20, 30, 50, 80, 200], 120 rownumbers:true,//编号 121 title: "城市信息", 122 //右击表格事件 123 onRowContextMenu:function(e,rowIndex,rowData) 124 { 125 /*去掉默认的右击的面板*/ 126 e.preventDefault(); 127 /*显示Menu锁定位置*/ 128 $('#menu').menu('show', { 129 left: e.pageX, 130 top: e.pageY, 131 132 }) 133 }, 134 135 //双击选中行执行的事件（索引行，数据） 136 onDblClickRow: function (rowIndex, rowData) { 137 //将上一次编辑行关闭并且保存 138 if (obj.editRow!=undefined) { 139 $("#box").datagrid('endEdit', obj.editRow); 140 141 } 142 if (obj.editRow == undefined) { 143 $('#save,#redo').show(); 144 $("#box").datagrid('beginEdit', rowIndex); 145 obj.editRow = rowIndex; 146 } 147 }, 148 149 //编辑结束后事件 *添加和跟新的操作在这了*/ 150 onAfterEdit:function(rowIndex,rowDate,changes) 151 { 152 var url = ''; 153 var info = ''; 154 /*从上一次的提交获取所有行，类型参数有，inserted,deleted,updated 155 返回的一个数组 */ 156 var inserted = $("#box").datagrid('getChanges', 'inserted'); 157 var updated = $("#box").datagrid('getChanges', 'updated'); 158 /*添加*/ 159 if (inserted.length> 0) 160 { 161 url = '/cityManager/addCity'; 162 info = '添加'; 163 } 164 /*更新*/ 165 if (updated.length > 0) 166 { 167 url = '/cityManager/EditCity'; 168 var info = '更新'; 169 } 170 $.ajax( 171 { 172 url: url, 173 data: rowDate, 174 type: "post", 175 success: function (data) { 176 if (data.Message == "Success") { 177 $("#box").datagrid("loaded");//重新加载 178 $("#box").datagrid("load");//加载 179 $("#box").datagrid("unselectAll");//去掉所有复选框 180 $.messager.show({ 181 title: '提示', 182 msg: data.flag + '个信息被"'+info+'"成功！', 183 }) 184 } 185 }, 186 error: function (data) { 187 $.messager.alert(data); 188 } 189 }); 190 $('#save,#redo').hide(); 191 obj.editRow = undefined;//将对象重新赋值为undefined 192 }, 193 columns: [[ 194 { 195 field: "cid", 196 title: "编号", 197 align: 'center', 198 300, 199 checkbox:true 200 }, 201 { 202 field: "cityname", 203 title: "城市名称", 204 // hidden: true 隐藏列 205 align: 'center', 206 300, 207 editor: { 208 type: 'validatebox', 209 options: { 210 required:true, 211 } 212 } 213 }, 214 { 215 field: "intro", 216 title: "介绍", 217 align: 'center', 218 100, 219 editor: { //设置为编辑行 220 type: 'validatebox', 221 options: { 222 required: true, 223 } 224 } 225 }, 226 { 227 field: "code", 228 title: "代码", 229 align: 'center', 230 100, 231 editor: { // 232 type: 'validatebox', 233 options: { 234 required: true, 235 } 236 } 237 }, 238 { 239 field: "createtime", 240 title: "创建时间", 241 align: 'center', 242 100, 243 editor: { // 244 type: 'datetimebox', 245 options: { 246 required: true, 247 } 248 } 249 }, 250 ]], 251 toolbar: "#tb", 252 }) 253 }) 254 </script>
HTML部分
1 <table id="box"> </table> 2 <div id="tb" style="padding:5px;height:auto"> 3 <div style="margin-bottom:5px"> 4 <a href="#" class="easyui-linkbutton" onclick="obj.add();" iconcls="icon-add" plain="true">添加</a> 5 <a href="#" class="easyui-linkbutton" onclick="obj.edit();" iconcls="icon-edit" plain="true">修改</a> 6 <a href="#" class="easyui-linkbutton" onclick="obj.remove();" iconcls="icon-remove" plain="true">删除</a> 7 <a href="#" class="easyui-linkbutton" iconcls="icon-save" style="display:none" id="save" onclick="obj.save()" plain="true">保存</a> 8 <a href="#" class="easyui-linkbutton" iconcls="icon-redo" style="display:none" id="redo" onclick="obj.redo()" plain="true">取消编辑</a> 9 </div> 10 </div> 11 <div id="menu" class="easyui-menu" style="100px;display:none"> 12 <div onclick="obj.add();" iconcls="icon-add" plain="true">添加</div> 13 <div onclick="obj.edit();" iconcls="icon-edit" plain="true">修改</div> 14 <div onclick="obj.remove();" iconcls="icon-remove" plain="true">删除</div> 15 </div>
后台.NetMVC代码
1 /*查询*/ 2 public ActionResult cityQuery() 3 { 4 //获取分页的页数 5 int pageNum = Convert.ToInt32(Request.Params["page"]); 6 //获取分页大小 7 int pageSize = Convert.ToInt32(Request.Params["rows"]); 8 var CityList = (from u in db.tb_city 9 orderby u.cid descending 10 where(u.isdelete==0) 11 select u).Skip(pageSize * (pageNum - 1)).Take(pageSize); 12 // using Newtonsoft.Json 序列化转成Json字符串 13 var jsons = JsonConvert.SerializeObject(CityList); 14 15 string json = "{"total":" + db.tb_city.ToList().Count + ","rows": " + jsons + "}"; 16 return Content(json); 17 } 18 /*删除*/ 19 public ActionResult cityRemove() 20 { 21 22 Hashtable ht = new Hashtable(); 23 string[] ids = ConvertHelper.GetString(Request["ids"]).Split(','); 24 int flag = 0; 25 foreach (var item in ids) 26 { 27 tb_city model = db.tb_city.Find(ConvertHelper.GetInteger(item)); 28 model.isdelete =1; 29 TryUpdateModel(model); 30 db.SaveChanges(); 31 flag++; 32 } 33 if (flag > 0) 34 { 35 ht["Message"] = "Success"; 36 ht["flag"] = flag; 37 ht["Resulet"] = true; 38 } 39 else 40 { 41 ht["Message"] = "Error"; 42 ht["Resulet"] = false; 43 } 44 45 46 return Json(ht); 47 48 } 49 /*添加*/ 50 public ActionResult addCity() 51 { 52 Hashtable ht = new Hashtable(); 53 string cityname = ConvertHelper.GetString(Request["cityname"]); 54 string code = ConvertHelper.GetString(Request["code"]); 55 string intro = ConvertHelper.GetString(Request["cityname"]); 56 tb_city model = new tb_city(); 57 model.cityname = cityname; 58 model.code = code; 59 model.intro = intro; 60 model.isdelete = 0; 61 db.tb_city.Add(model); 62 int flag= db.SaveChanges(); 63 64 65 if (flag > 0) 66 { 67 ht["Message"] = "Success"; 68 ht["flag"] = flag; 69 ht["Resulet"] = true; 70 } 71 else 72 { 73 ht["Message"] = "Error"; 74 ht["Resulet"] = false; 75 } 76 return Json(ht); 77 78 } 79 80 /*修改*/ 81 public ActionResult EditCity() 82 { 83 Hashtable ht = new Hashtable(); 84 string id = ConvertHelper.GetString(Request["cid"]); 85 string cityname = ConvertHelper.GetString(Request["cityname"]); 86 string code = ConvertHelper.GetString(Request["code"]); 87 string intro = ConvertHelper.GetString(Request["cityname"]); 88 string user = ConvertHelper.GetString(Request["cityname"]); 89 tb_city model = db.tb_city.Find(ConvertHelper.GetInteger(id)); 90 model.cityname = cityname; 91 model.code = code; 92 model.intro = intro; 93 model.isdelete = 0; 94 TryUpdateModel(model); 95 int flag= db.SaveChanges(); 96 97 98 if (flag > 0) 99 { 100 ht["Message"] = "Success"; 101 ht["flag"] = flag; 102 ht["Resulet"] = true; 103 } 104 else 105 { 106 ht["Message"] = "Error"; 107 ht["Resulet"] = false; 108 } 109 return Json(ht); 110 111 }
运行后的效果
总结：主要是用到了EasyUIDatagrid中 ，编辑结束后事件onAfterEdit，添加和更新在这里编写（从上一次的提交获取所有行，类型参数有，inserted,deleted,updated 返回的一个数组编辑后的数据）
var inserted = $("#box").datagrid('getChanges', 'inserted');
var updated = $("#box").datagrid('getChanges', 'updated');