淺談MVC+EF easyui dataGrid 動(dòng)態(tài)加載分頁表格
首先上javascript的代碼
<script type="text/javascript"> $(function () { LoadGrid(); }) //加載表格!??! function LoadGrid() { $('#roleGrid').datagrid({ width: 900, striped: true, //交替條紋 fitColumns: true, //防止水平滾動(dòng) fit: true,//自動(dòng)補(bǔ)全 iconCls: "icon-save",//圖標(biāo) idField: 'RoleId', //唯一列 url: "GetRoles", dataType: "json", singleSelect: true, //設(shè)置為true將只允許選擇一行 loadMsg: '正在拼命加載,請稍后...', rownumbers: false, //顯示行數(shù) pagination: true, //底部分頁工具欄 nowrap: true, //截取超出部分的數(shù)據(jù) checkOnSelect: true,//點(diǎn)擊一行的時(shí)候 checkbox checked(選擇)/unchecked(取消選擇) pageNumber: 1,//初始化分頁碼。 pageSize: 10, //初始化每頁記錄數(shù)。 pageList: [5, 10, 30], //初始化每頁記錄數(shù)列表 showFooter: false, //定義是否顯示行底 columns: [[ { field: "RoleId", title: "角色編號(hào)", width: 60, align: "center", sortable: "true" }, { field: "RoleName", title: "角色名稱", width: 100, align: "center" }, { field: "RoleRemarks", title: "備注", width: 100, align: "center" }, { field: "IsStatus", title: "狀態(tài)", 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>設(shè)置權(quán)限</>'; 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('確認(rèn)刪除該角色?', { btn: ['確認(rèn)', '取消'], //按鈕 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("系統(tǒng)錯(cuò)誤,請聯(lián)系管理員!", { icon: 0 }); } } }); }, function (index) { layer.close(index); }); }
然后是html
<table id="roleGrid"> </table>
最后是控制器的方法(這一部分是最重要的,表格能否顯示數(shù)據(jù),全看這一部分)
/// <summary> /// 動(dòng)態(tài)生成表格的數(shù)據(jù) /// </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; //行數(shù) 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); }
最后的最后是控制器相關(guān)的方法
/// <summary> /// 分頁的數(shù)據(jù) /// </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> /// 獲取總頁數(shù) /// </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; } }
以上就是小編為大家?guī)淼臏\談MVC+EF easyui dataGrid 動(dòng)態(tài)加載分頁表格全部內(nèi)容了,希望大家多多支持腳本之家~
- EasyUi中的Combogrid 實(shí)現(xiàn)分頁和動(dòng)態(tài)搜索遠(yuǎn)程數(shù)據(jù)
- EasyUI學(xué)習(xí)之DataGird分頁顯示數(shù)據(jù)
- MVC+EasyUI+三層新聞網(wǎng)站建立 分頁查詢數(shù)據(jù)功能(七)
- jQuery EasyUI API 中文文檔 - Pagination分頁
- jQuery EasyUI datagrid實(shí)現(xiàn)本地分頁的方法
- jQuery EasyUI Pagination實(shí)現(xiàn)分頁的常用方法
- EasyUi datagrid 實(shí)現(xiàn)表格分頁
- EasyUI Pagination 分頁的兩種做法小結(jié)
- SSh結(jié)合Easyui實(shí)現(xiàn)Datagrid的分頁顯示
- EasyUi+Spring Data 實(shí)現(xiàn)按條件分頁查詢的實(shí)例代碼
- easyUI使用分頁過濾器對(duì)數(shù)據(jù)進(jìn)行分頁操作實(shí)例分析
相關(guān)文章
jquery中map函數(shù)遍歷數(shù)組用法實(shí)例
這篇文章主要介紹了jquery中map函數(shù)遍歷數(shù)組用法,實(shí)例分析了jQuery中map函數(shù)遍歷數(shù)組的相關(guān)技巧,并提供了一個(gè)自定義遍歷數(shù)組函數(shù)供參考之用,需要的朋友可以參考下2015-05-05jquery的attr方法禁用表單元素禁用輸入內(nèi)容
這篇文章主要介紹了通過jquery的attr方法來禁用表單元素禁輸入內(nèi)容,示例如下,需要的朋友可以參考參考2014-06-06使用CSS和jQuery模擬select并附提交后取得數(shù)據(jù)的代碼
使用CSS和jQuery模擬select并實(shí)現(xiàn)提交后取得數(shù)據(jù),詳細(xì)實(shí)現(xiàn)及截圖如下,感興趣的朋友可以參考下2013-10-10jQuery實(shí)現(xiàn)動(dòng)態(tài)添加和刪除一個(gè)div
我想做一個(gè)可以動(dòng)態(tài)添加刪除div的功能。中間遇到一個(gè)問題,最后在網(wǎng)友的熱心幫助下解決了,使用到的jquery方法和思想就是:事件的綁定和銷毀(unbind)2015-08-08jquery ajax 局部無刷新更新數(shù)據(jù)的實(shí)現(xiàn)案例
這篇文章主要對(duì)jquery ajax 局部無刷新更新數(shù)據(jù)的實(shí)現(xiàn)案例進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02基于jQuery實(shí)現(xiàn)多層次的手風(fēng)琴效果附源碼
今天我們要與大家分享一個(gè)漂亮而靈活的垂直 jQuery 手風(fēng)琴效果。其主要思想是擴(kuò)大手風(fēng)琴片上的點(diǎn)擊和顯示更多的信息。感興趣的朋友可以參考下本文2015-09-09詳解Jquery實(shí)現(xiàn)ready和bind事件
這篇文章主要為大家詳細(xì)介紹了Jquery實(shí)現(xiàn)ready和bind事件的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-04-04基于jquery插件實(shí)現(xiàn)拖拽刪除圖片功能
這篇文章主要介紹了基于jquery插件實(shí)現(xiàn)拖拽刪除圖片功能的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05jQuery插件FusionCharts繪制的2D帕累托圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的2D帕累托圖效果,結(jié)合實(shí)例形式分析了jQuery使用FusionCharts插件載入xml數(shù)據(jù)及繪制2D帕累托圖的具體實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03