浅谈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 常见开发使用技巧总结
Dec 26 Javascript
js 中 document.createEvent的用法
Aug 29 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
JavaScript字符串转数字的简单实现方法
Nov 27 Javascript
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
微信小程序 后台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
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
Python中的startswith和endswith函数使用实例
2014/08/25 Python
vscode 远程调试python的方法
2017/12/01 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
Python如何读写二进制数组数据
2020/08/01 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
纪念建党演讲稿范文
2014/01/13 职场文书
工艺员岗位职责
2014/02/11 职场文书
个人授权委托书范本
2014/04/03 职场文书
社区科普工作方案
2014/06/03 职场文书
大学生个人求职信例文
2014/07/07 职场文书
建筑安全责任书范本
2014/07/24 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
团日活动总结格式
2015/05/11 职场文书
文艺晚会开场白
2015/05/29 职场文书
唐山大地震观后感
2015/06/05 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang