Heim >Web-Frontend >js-Tutorial >Eine kurze Diskussion über das dynamische Laden von Paging-Tabellen durch MVC+EF easyui dataGrid

Eine kurze Diskussion über das dynamische Laden von Paging-Tabellen durch MVC+EF easyui dataGrid

高洛峰
高洛峰Original
2016-12-07 11:17:381413Durchsuche

Geben Sie zuerst den Javascript-Code ein

<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>

Zum Schluss die Controller-Methode (dieser Teil ist der wichtigste, ob die Tabelle Daten anzeigen kann, hängt von diesem Teil ab)

/// <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);
    }

Die letzte sind die Controller-bezogenen Methoden

/// <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;
    
     }
    }



Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn