淺談MVC+EF easyui dataGrid 動態載入分頁表格

首先上javascript的程式碼

<script type="text/javascript">
 
  $(function () {
    LoadGrid();
  })
 
  //加载表格！！！
  function LoadGrid() {
    $(&#39;#roleGrid&#39;).datagrid({
      width: 900,
      striped: true,  //交替条纹
      fitColumns: true,  //防止水平滚动
      fit: true,//自动补全
      iconCls: "icon-save",//图标
      idField: &#39;RoleId&#39;, //唯一列
      url: "GetRoles",
      dataType: "json",
      singleSelect: true, //设置为true将只允许选择一行
      loadMsg: &#39;正在拼命加载,请稍后...&#39;,
      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 = &#39;<a style="padding:1px;color:black;" onclick="editRole(&#39; + index + &#39;)"><i class="fa fa-edit"></i>编辑</a>&#39;;
         var deleteBtn = &#39;<a style="color:black;" onclick="delRole(&#39; + index + &#39;)"><i class="fa fa-trash-o"></i>删除</>&#39;;
         var setrole = &#39;<a style="color:black;" onclick="setRights(&#39; + index + &#39;)"><i class="fa fa-exclamation-triangle"></i>设置权限</>&#39;;
         return "  " + detail + " | " + deleteBtn + " | " + setrole;
       }
     }
      ]] //列
    });
  };
 
  function editRole(i) { //编辑按钮的方法
    var rows = $("#roleGrid").datagrid("getRows");
    layer.open({
      title: false,
      type: 2,
      closeBtn: false,
      area: [&#39;420px&#39;, &#39;418px&#39;],
      skin: &#39;layui-layer-rim&#39;, //加上边框
      content: [&#39;/Admin/ShowForm/EidtRole&#39;, &#39;no&#39;],
      success: function (layero, index) {
        var body = layer.getChildFrame(&#39;body&#39;, 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(&#39;确认删除该角色？&#39;, {
      btn: [&#39;确认&#39;, &#39;取消&#39;], //按钮
      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;
    
     }
    }