浅谈MVC+EF easyui dataGrid 动态加载分页表格

首先上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 动态加载分页表格全部内容了，希望大家多多支持脚本之家~