EasyuiDatagird绑定分页.NetMVC

引入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脚本部分

 <script type="text/javascript">
     $(function () {
         obj = {
             editRow: undefined,
             add: function () {

                 $('#save,#redo').show();
                 if (this.editRow == undefined)
                  {
                     /*appenRow  在末尾添加一行*/
                     $('#box').datagrid('insertRow', {
                         index: 0,
                         row: {
                             cityname: '',
                             intro: '',
                             code: '',
                         }
                     });
                     //将第一行设置为可编辑状态
                     $("#box").datagrid('beginEdit', 0),
                    this.editRow =0 ;

                 }
             },

             edit:function()
             {
                 var rows = $('#box').datagrid('getSelections');
                 if (rows.length == 1) {
                     if (this.editRow != undefined) {

                         $("#box").datagrid('endEdit', this.editRow)

                     }
                     if (this.editRow == undefined) {
                         var index=$("#box").datagrid('getRowIndex',rows[0])
                         $('#save,#redo').show();
                         $("#box").datagrid('beginEdit', index)
                         this.editRow = index
                         //关闭当前行编辑状态
                         $("#box").datagrid('unselectRow',index)
                     }
                 }
                 else {
                     $.messager.alert('警告', '修改只能选中一行','warning');
                 }

             },
             /*删除*/
             remove:function()
             {
                 var rows = $('#box').datagrid('getSelections');
                 if (rows.length > 0) {
                     $.messager.confirm('确定操作', '您确定要删除所选中的记录吗', function (flag) {
                         if (flag)
                         {
                             var ids = [];
                             for (var i = 0; i < rows.length; i++)
                             {
                                 ids.push(rows[i].cid);
                             }
                             $.ajax(
                                 {
                                     url: "/cityManager/cityRemove",
                                     data:{"ids":ids.join(',')},
                                     type: "post",
                                     success: function (data)
                                     {
                                         if (data.Message == "Success")
                                         {
                                             $("#box").datagrid("loaded");
                                             $("#box").datagrid("load");
                                             $("#box").datagrid("unselectAll");
                                             $.messager.show({
                                                 title: '提示',
                                                 msg:data.flag+'个信息被删除成功！',
                                             })
                                         }
                                     },
                                     error: function (data)
                                     {
                                         $.messager.alert(data);
                                     }
                                 });
                                  obj.editRow = undefined;
                         }
                     }
                     )
                 }
                 else {
                     $.messager.alert('警告','请选中一行或多行','info')

                 }
             },
             save: function ()
             {
                 //这两句不应该放这里，应该是保存之后放这里
                 //$('#save,#redo').hide();
                 //this.editRow = false;
                 //将第一行设置为结束编辑
                 //保存当前行的数据结束编辑
                 $("#box").datagrid('endEdit', this.editRow)

             },
             redo: function ()
             {
                 $('#save,#redo').hide();
                 this.editRow = undefined;
                 /*回滚所有从创建或上一次调用acceptChanges函数后更该的数据*/
                $("#box").datagrid('rejectChanges')
             }
         };
         /*加载表格*/
         $("#box").datagrid({
             url: '/cityManager/cityQuery',
             singleSelect: false,//多选
             pagination: true,//分页
             pageSize: 10,//页面大小
             pageList: [5, 10, 15, 20, 30, 50, 80, 200],
             rownumbers:true,//编号
             title: "城市信息",
             //右击表格事件
             onRowContextMenu:function(e,rowIndex,rowData)
             {
                 /*去掉默认的右击的面板*/
                 e.preventDefault();
                 /*显示Menu锁定位置*/
                 $('#menu').menu('show', {
                     left: e.pageX,
                     top: e.pageY,

                 })
             },

             //双击选中行执行的事件（索引行，数据）
             onDblClickRow: function (rowIndex, rowData) {
                 //将上一次编辑行关闭并且保存
                 if (obj.editRow!=undefined) {
                     $("#box").datagrid('endEdit', obj.editRow);

                 }
                 if (obj.editRow == undefined) {
                     $('#save,#redo').show();
                     $("#box").datagrid('beginEdit', rowIndex);
                     obj.editRow = rowIndex;
                 }
             },

             //编辑结束后事件 *添加和跟新的操作在这了*/
           onAfterEdit:function(rowIndex,rowDate,changes)
           {
               var url = '';
               var info = '';
               /*从上一次的提交获取所有行，类型参数有，inserted,deleted,updated
               返回的一个数组 */
               var inserted = $("#box").datagrid('getChanges', 'inserted');
               var updated = $("#box").datagrid('getChanges', 'updated');
               /*添加*/
                if (inserted.length> 0)
                 {
                     url = '/cityManager/addCity';
                    info = '添加';
                }
               /*更新*/
                 if (updated.length > 0)
                 {
                     url = '/cityManager/EditCity';
                     var info = '更新';
                 }
                 $.ajax(
                     {
                         url: url,
                         data: rowDate,
                         type: "post",
                         success: function (data) {
                             if (data.Message == "Success") {
                                 $("#box").datagrid("loaded");//重新加载
                                 $("#box").datagrid("load");//加载
                                 $("#box").datagrid("unselectAll");//去掉所有复选框
                                 $.messager.show({
                                     title: '提示',
                                     msg: data.flag + '个信息被"'+info+'"成功！',
                                 })
                             }
                         },
                         error: function (data) {
                             $.messager.alert(data);
                         }
                     });
                 $('#save,#redo').hide();
                 obj.editRow = undefined;//将对象重新赋值为undefined
             },
           columns: [[
               {
                   field: "cid",
                   title: "编号",
                   align: 'center',
                   width: 300,
                   checkbox:true
               },
                 {
                     field: "cityname",
                     title: "城市名称",
                     //   hidden: true 隐藏列
                     align: 'center',
                     width: 300,
                     editor: {
                         type: 'validatebox',
                         options: {
                             required:true,
                         }
                     }
                 },
                 {
                     field: "intro",
                     title: "介绍",
                     align: 'center',
                     width: 100,
                     editor: {  //设置为编辑行
                         type: 'validatebox',
                         options: {
                             required: true,
                         }
                     }
                 },
             {
                 field: "code",
                 title: "代码",
                 align: 'center',
                 width: 100,
                 editor: {  //
                     type: 'validatebox',
                     options: {
                         required: true,
                     }
                 }
             },
             {
                 field: "createtime",
                 title: "创建时间",
                 align: 'center',
                 width: 100,
                 editor: {  //
                     type: 'datetimebox',
                     options: {
                         required: true,
                     }
                 }
             },
             ]],
             toolbar: "#tb",
         })
     })
 </script>

HTML部分

 <table id="box"> </table>
 <div id="tb" style="padding:5px;height:auto">
     <div style="margin-bottom:5px">
         <a href="#" class="easyui-linkbutton" onclick="obj.add();" iconcls="icon-add" plain="true">添加</a>
         <a href="#" class="easyui-linkbutton" onclick="obj.edit();" iconcls="icon-edit" plain="true">修改</a>
         <a href="#" class="easyui-linkbutton" onclick="obj.remove();" iconcls="icon-remove" plain="true">删除</a>
         <a href="#" class="easyui-linkbutton" iconcls="icon-save" style="display:none" id="save" onclick="obj.save()" plain="true">保存</a>
         <a href="#" class="easyui-linkbutton" iconcls="icon-redo" style="display:none" id="redo" onclick="obj.redo()" plain="true">取消编辑</a>
     </div>
 </div>
 <div id="menu" class="easyui-menu" style="width:100px;display:none">
     <div onclick="obj.add();" iconcls="icon-add" plain="true">添加</div>
     <div onclick="obj.edit();" iconcls="icon-edit" plain="true">修改</div>
     <div onclick="obj.remove();" iconcls="icon-remove" plain="true">删除</div>
 </div>

后台.NetMVC代码

       /*查询*/
         public ActionResult cityQuery()
         {
             //获取分页的页数
             int pageNum = Convert.ToInt32(Request.Params["page"]);
             //获取分页大小
             int pageSize = Convert.ToInt32(Request.Params["rows"]);
             var CityList = (from u in db.tb_city
                           orderby u.cid descending
                           where(u.isdelete==0)
                           select u).Skip(pageSize * (pageNum - 1)).Take(pageSize);
             //     using Newtonsoft.Json 序列化转成Json字符串
             var jsons = JsonConvert.SerializeObject(CityList);

             string json = "{\"total\":" + db.tb_city.ToList().Count + ",\"rows\": " + jsons + "}";
             return Content(json);
         }
         /*删除*/
         public ActionResult cityRemove()
         {

             Hashtable ht = new Hashtable();
             string[] ids = ConvertHelper.GetString(Request["ids"]).Split(',');
             int flag = 0;
             foreach (var item in ids)
             {
                 tb_city model = db.tb_city.Find(ConvertHelper.GetInteger(item));
                 model.isdelete =1;
                 TryUpdateModel(model);
                 db.SaveChanges();
                 flag++;
             }
             if (flag > 0)
             {
               ht["Message"] = "Success";
               ht["flag"] = flag;
               ht["Resulet"] = true;
             }
             else
             {
              ht["Message"] = "Error";
              ht["Resulet"] = false;
             }

             return Json(ht);

         }
         /*添加*/
         public ActionResult addCity()
         {
             Hashtable ht = new Hashtable();
             string cityname = ConvertHelper.GetString(Request["cityname"]);
             string code = ConvertHelper.GetString(Request["code"]);
             string intro = ConvertHelper.GetString(Request["cityname"]);
             tb_city model = new tb_city();
             model.cityname = cityname;
             model.code = code;
             model.intro = intro;
              model.isdelete = 0;
              db.tb_city.Add(model);
             int flag= db.SaveChanges();

             if (flag > 0)
             {
                 ht["Message"] = "Success";
                 ht["flag"] = flag;
                 ht["Resulet"] = true;
             }
             else
             {
                 ht["Message"] = "Error";
                 ht["Resulet"] = false;
             }
             return Json(ht);

         }

         /*修改*/
         public ActionResult EditCity()
         {
             Hashtable ht = new Hashtable();
             string id = ConvertHelper.GetString(Request["cid"]);
             string cityname = ConvertHelper.GetString(Request["cityname"]);
             string code = ConvertHelper.GetString(Request["code"]);
             string intro = ConvertHelper.GetString(Request["cityname"]);
            string user = ConvertHelper.GetString(Request["cityname"]);
            tb_city model = db.tb_city.Find(ConvertHelper.GetInteger(id));
             model.cityname = cityname;
             model.code = code;
             model.intro = intro;
              model.isdelete = 0;
              TryUpdateModel(model);
             int flag= db.SaveChanges();

             if (flag > 0)
             {
                 ht["Message"] = "Success";
                 ht["flag"] = flag;
                 ht["Resulet"] = true;
             }
             else
             {
                 ht["Message"] = "Error";
                 ht["Resulet"] = false;
             }
             return Json(ht);

         }

运行后的效果

总结：主要是用到了EasyUIDatagrid中 ，编辑结束后事件onAfterEdit，添加和更新在这里编写（从上一次的提交获取所有行，类型参数有，inserted,deleted,updated 返回的一个数组编辑后的数据）

var inserted = $("#box").datagrid('getChanges', 'inserted');

var updated = $("#box").datagrid('getChanges', 'updated');