浅谈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 解析后的xml对象的读取方法细解
Jul 25 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
Jun 17 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
NO3第三帝国留言簿制作过程
2006/10/09 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
在Python中使用Mako模版库的简单教程
2015/04/08 Python
简述Python2与Python3的不同点
2018/01/21 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
python中类与对象之间的关系详解
2020/12/16 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
迪拜航空官方网站:flydubai
2017/04/20 全球购物
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
应届实习生的自我评价范文
2014/01/05 职场文书
教师党性分析材料
2014/02/04 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
公司周年庆典标语
2014/10/07 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
2014全年工作总结
2014/11/27 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
详解Spring事件发布与监听机制
2021/06/30 Java/Android
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技