浅谈MVC+EF easyui dataGrid 动态加载分页表格


Posted in Javascript onNovember 10, 2016

首先上javascript的代码

<script type="text/javascript">

  $(function () {
    LoadGrid();
  })

  //加载表格!!!
  function LoadGrid() {
    $('#roleGrid').datagrid({
      width: 900,
      striped: true,  //交替条纹
      fitColumns: true,  //防止水平滚动
      fit: true,//自动补全 
      iconCls: "icon-save",//图标 
      idField: 'RoleId', //唯一列
      url: "GetRoles",
      dataType: "json",
      singleSelect: true, //设置为true将只允许选择一行
      loadMsg: '正在拼命加载,请稍后...',
      rownumbers: false,  //显示行数
      pagination: true, //底部分页工具栏 
      nowrap: true,  //截取超出部分的数据
      checkOnSelect: true,//点击一行的时候 checkbox checked(选择)/unchecked(取消选择)
      pageNumber: 1,//初始化分页码。
      pageSize: 10, //初始化每页记录数。
      pageList: [5, 10, 30],  //初始化每页记录数列表
      showFooter: false, //定义是否显示行底
      columns: [[
     { field: "RoleId", title: "角色编号", width: 60, align: "center", sortable: "true" },
     { field: "RoleName", title: "角色名称", width: 100, align: "center" },
     { field: "RoleRemarks", title: "备注", width: 100, align: "center" },
     {
       field: "IsStatus", title: "状态", width: 60, align: "center", formatter: function (value, row, index) {
         if (value == "0") {
           return "正常";
         } else if (value == "1") {
           return "停用";
         }
       }
     },
     {
       field: "edit", title: "操作", align: "center", width: 80, formatter: function (value, row, index) {
         var detail = '<a style="padding:1px;color:black;" onclick="editRole(' + index + ')"><i class="fa fa-edit"></i>编辑</a>';
         var deleteBtn = '<a style="color:black;" onclick="delRole(' + index + ')"><i class="fa fa-trash-o"></i>删除</>';
         var setrole = '<a style="color:black;" onclick="setRights(' + index + ')"><i class="fa fa-exclamation-triangle"></i>设置权限</>';
         return "  " + detail + " | " + deleteBtn + " | " + setrole;
       }
     }
      ]] //列
    });
  };

  function editRole(i) { //编辑按钮的方法
    var rows = $("#roleGrid").datagrid("getRows");
    layer.open({
      title: false,
      type: 2,
      closeBtn: false,
      area: ['420px', '418px'],
      skin: 'layui-layer-rim', //加上边框
      content: ['/Admin/ShowForm/EidtRole', 'no'],
      success: function (layero, index) {
        var body = layer.getChildFrame('body', index);
        body.contents().find("#roleId").val(rows[i].RoleId);
        body.contents().find("#roleName").val(rows[i].RoleName);
        if (rows[i].RoleRemarks != "-") {
          body.contents().find("#remarks").val(rows[i].RoleRemarks);
        }
        body.contents().find("#isstutas").val(rows[i].IsStatus);
      }
    });
  }

  function delRole(i) { //删除用户
    var rows = $("#roleGrid").datagrid("getRows");

    var postData = {
      roleId: rows[i].RoleId
    };

    layer.confirm('确认删除该角色?', {
      btn: ['确认', '取消'], //按钮
      shade: false //不显示遮罩
    }, function (index) {
      $.ajax({
        type: "POST",
        url: "DeleRole",
        data: postData,
        success: function (result) {
          if (result == "true") {
            layer.msg("操作成功!", {
              icon: 6,
              time: 1000,
            }, function () {
              $("#roleGrid").datagrid("reload");
              layer.close(index);
            });
          } else if (result == "false") {
            layer.msg("操作失败!", { icon: 2 });
          } else if (result == "msg") {
            layer.msg("系统错误,请联系管理员!", { icon: 0 });
          }
        }
      });
    }, function (index) {
      layer.close(index);
    });
  }

然后是html

<table id="roleGrid"> </table>

最后是控制器的方法(这一部分是最重要的,表格能否显示数据,全看这一部分)

/// <summary>
    /// 动态生成表格的数据
    /// </summary>
    /// <param name="page"></param>
    /// <param name="rows"></param>
    /// <returns></returns>
    public JsonResult GetRoles(int? page, int? rows)
    {
      page = page == null ? 1 : page; //第几页
      rows = rows == null ? 1 : rows; //行数
      List<role> rList = rService.GetAllRoles(Convert.ToInt32(page), Convert.ToInt32(rows));
      List<role> roleList = new List<role>();
      for (int i = 0; i < rList.Count; i++)
      {
        role r = new role();
        r.RoleId = rList[i].RoleId;
        r.RoleName = rList[i].RoleName;
        if (string.IsNullOrEmpty(rList[i].RoleRemarks))
        {
          r.RoleRemarks = "-";
        }
        else
        {
          r.RoleRemarks = rList[i].RoleRemarks;
        }
        r.IsStatus = rList[i].IsStatus;
        roleList.Add(r);
      }
      var json = new
      {
        total = rService.GetTotal(),
        rows = roleList
      };
      return Json(json, JsonRequestBehavior.AllowGet);
    }

最后的最后是控制器相关的方法

/// <summary>
    /// 分页的数据
    /// </summary>
    /// <param name="page"></param>
    /// <param name="rows"></param>
    /// <returns></returns>
    public List<role> GetAllRoles(int page, int rows)
    {
      using (diamondEntities entity = new diamondEntities())
      {
        IQueryable<role> role = entity.roles.OrderBy(a => a.RoleId).Skip((page - 1) * rows).Take(rows);
        List<role> roleList = role.ToList<role>();
        if (roleList.Count > 0)
        {
          return roleList;
        }
        else
        {
          return null;
        }
      }
    }


    /// <summary>
    /// 获取总页数
    /// </summary>
    /// <returns></returns>
    public int GetTotal()
    {
      using (diamondEntities entity = new diamondEntities())
      {
        IQueryable<role> user = entity.roles.Select(m => m);
        List<role> userList = user.ToList();
        return userList.Count;
      }
    }

以上就是小编为大家带来的浅谈MVC+EF easyui dataGrid 动态加载分页表格全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
BootStrap 导航条实例代码
May 18 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
微信小程序自定义toast实现方法详解【附demo源码下载】
Nov 28 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 Javascript
jQuery实现购物车全功能
Jan 11 jQuery
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 #Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 #Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 #Javascript
微信小程序 删除项目工程实现步骤
Nov 10 #Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 #Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 #Javascript
VueJS全面解析
Nov 10 #Javascript
You might like
php实现源代码加密的方法
2015/07/11 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
html中table数据排序的js代码
2011/08/09 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
javascript基本算法汇总
2016/03/09 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
python字符类型的一些方法小结
2016/05/16 Python
Python实现ping指定IP的示例
2018/06/04 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
微笑面对生活演讲稿
2014/05/13 职场文书
IT工程师岗位职责
2014/07/04 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
学习十八大标语
2014/10/09 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
护士自荐信范文
2015/03/25 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
volatile保证可见性及重排序方法
2022/08/05 Java/Android