淺談MVC+EF easyui dataGrid 動態(tài)加載分頁表格
首先上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, //顯示行數(shù)
pagination: true, //底部分頁工具欄
nowrap: true, //截取超出部分的數(shù)據(jù)
checkOnSelect: true,//點擊一行的時候 checkbox checked(選擇)/unchecked(取消選擇)
pageNumber: 1,//初始化分頁碼。
pageSize: 10, //初始化每頁記錄數(shù)。
pageList: [5, 10, 30], //初始化每頁記錄數(shù)列表
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: "狀態(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>設置權限</>';
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("系統(tǒng)錯誤,請聯(lián)系管理員!", { icon: 0 });
}
}
});
}, function (index) {
layer.close(index);
});
}
然后是html
<table id="roleGrid"> </table>
最后是控制器的方法(這一部分是最重要的,表格能否顯示數(shù)據(jù),全看這一部分)
/// <summary>
/// 動態(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);
}
最后的最后是控制器相關的方法
/// <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 動態(tài)加載分頁表格全部內容了,希望大家多多支持腳本之家~
- EasyUi中的Combogrid 實現(xiàn)分頁和動態(tài)搜索遠程數(shù)據(jù)
- EasyUI學習之DataGird分頁顯示數(shù)據(jù)
- MVC+EasyUI+三層新聞網站建立 分頁查詢數(shù)據(jù)功能(七)
- jQuery EasyUI API 中文文檔 - Pagination分頁
- jQuery EasyUI datagrid實現(xiàn)本地分頁的方法
- jQuery EasyUI Pagination實現(xiàn)分頁的常用方法
- EasyUi datagrid 實現(xiàn)表格分頁
- EasyUI Pagination 分頁的兩種做法小結
- SSh結合Easyui實現(xiàn)Datagrid的分頁顯示
- EasyUi+Spring Data 實現(xiàn)按條件分頁查詢的實例代碼
- easyUI使用分頁過濾器對數(shù)據(jù)進行分頁操作實例分析
相關文章
jquery中map函數(shù)遍歷數(shù)組用法實例
這篇文章主要介紹了jquery中map函數(shù)遍歷數(shù)組用法,實例分析了jQuery中map函數(shù)遍歷數(shù)組的相關技巧,并提供了一個自定義遍歷數(shù)組函數(shù)供參考之用,需要的朋友可以參考下2015-05-05
使用CSS和jQuery模擬select并附提交后取得數(shù)據(jù)的代碼
使用CSS和jQuery模擬select并實現(xiàn)提交后取得數(shù)據(jù),詳細實現(xiàn)及截圖如下,感興趣的朋友可以參考下2013-10-10
jQuery實現(xiàn)動態(tài)添加和刪除一個div
我想做一個可以動態(tài)添加刪除div的功能。中間遇到一個問題,最后在網友的熱心幫助下解決了,使用到的jquery方法和思想就是:事件的綁定和銷毀(unbind)2015-08-08
jquery ajax 局部無刷新更新數(shù)據(jù)的實現(xiàn)案例
這篇文章主要對jquery ajax 局部無刷新更新數(shù)據(jù)的實現(xiàn)案例進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02
jQuery插件FusionCharts繪制的2D帕累托圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的2D帕累托圖效果,結合實例形式分析了jQuery使用FusionCharts插件載入xml數(shù)據(jù)及繪制2D帕累托圖的具體實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03

