浅谈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 相关文章推荐
JavaScript中的私有/静态属性介绍
Jul 26 Javascript
THREE.JS入门教程(2)着色器-上
Jan 24 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
红米手机抢购的js代码
Mar 10 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
微信小程序后台持续定位功能使用详解
Aug 23 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 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
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
php Try Catch异常测试
2009/03/01 PHP
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
10个php函数实用却不常见
2015/10/13 PHP
JQuery 入门实例1
2009/06/25 Javascript
jQuery ui 1.7更新小结
2009/08/15 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python中使用PIPE操作Linux管道
2015/02/04 Python
Python处理XML格式数据的方法详解
2017/03/21 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
Python中无限循环需要什么条件
2020/05/27 Python
python实现学生通讯录管理系统
2021/02/25 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
一套软件测试笔试题
2014/07/25 面试题
室内拓展活动方案
2014/02/13 职场文书
金融事务专业求职信
2014/04/25 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS