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');

巴特西

EasyuiDatagird绑定分页.NetMVC

最新文章

热门文章