浅谈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 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
javascript 面向对象编程基础 多态
Aug 21 Javascript
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 Javascript
微信小程序 后台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版本号
2006/10/09 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
python单例模式的多种实现方法
2019/07/26 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
Django models文件模型变更错误解决
2020/05/11 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
机电一体化专业应届生求职信
2013/11/27 职场文书
阿德的梦教学反思
2014/02/06 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
MySQL数据管理操作示例讲解
2022/12/24 MySQL