引入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 width: 300,
199 checkbox:true
200 },
201 {
202 field: "cityname",
203 title: "城市名称",
204 // hidden: true 隐藏列
205 align: 'center',
206 width: 300,
207 editor: {
208 type: 'validatebox',
209 options: {
210 required:true,
211 }
212 }
213 },
214 {
215 field: "intro",
216 title: "介绍",
217 align: 'center',
218 width: 100,
219 editor: { //设置为编辑行
220 type: 'validatebox',
221 options: {
222 required: true,
223 }
224 }
225 },
226 {
227 field: "code",
228 title: "代码",
229 align: 'center',
230 width: 100,
231 editor: { //
232 type: 'validatebox',
233 options: {
234 required: true,
235 }
236 }
237 },
238 {
239 field: "createtime",
240 title: "创建时间",
241 align: 'center',
242 width: 100,
243 editor: { //
244 type: 'datetimebox',
245 options: {
246 required: true,
247 }
248 }
249 },
250 ]],
251 toolbar: "#tb",
252 })
253 })
254 </script>
View Code
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="width: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>
View Code
后台.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 }
View Code
运行后的效果
总结：主要是用到了EasyUIDatagrid中 ，编辑结束后事件onAfterEdit，添加和更新在这里编写（从上一次的提交获取所有行，类型参数有，inserted,deleted,updated 返回的一个数组编辑后的数据）
var inserted = $(“#box”).datagrid(‘getChanges’, ‘inserted’);
var updated = $(“#box”).datagrid(‘getChanges’, ‘updated’);