浅谈MVC+EF easyui dataGrid 动态加载分页表格
首先上javascript的代码
<scripttype="text/javascript">
$(function(){
LoadGrid();
})
//加载表格！！！
functionLoadGrid(){
$('#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,//点击一行的时候checkboxchecked(选择)/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"正常";
}elseif(value=="1"){
return"停用";
}
}
},
{
field:"edit",title:"操作",align:"center",width:80,formatter:function(value,row,index){
vardetail='<astyle="padding:1px;color:black;"onclick="editRole('+index+')"><iclass="fafa-edit"></i>编辑</a>';
vardeleteBtn='<astyle="color:black;"onclick="delRole('+index+')"><iclass="fafa-trash-o"></i>删除</>';
varsetrole='<astyle="color:black;"onclick="setRights('+index+')"><iclass="fafa-exclamation-triangle"></i>设置权限</>';
return" "+detail+" | "+deleteBtn+" | "+setrole;
}
}
]]//列
});
};
functioneditRole(i){//编辑按钮的方法
varrows=$("#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){
varbody=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);
}
});
}
functiondelRole(i){//删除用户
varrows=$("#roleGrid").datagrid("getRows");
varpostData={
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);
});
}elseif(result=="false"){
layer.msg("操作失败！",{icon:2});
}elseif(result=="msg"){
layer.msg("系统错误,请联系管理员！",{icon:0});
}
}
});
},function(index){
layer.close(index);
});
}
然后是html
<tableid="roleGrid"></table>
最后是控制器的方法（这一部分是最重要的，表格能否显示数据，全看这一部分）
///<summary>
///动态生成表格的数据
///</summary>
///<paramname="page"></param>
///<paramname="rows"></param>
///<returns></returns>
publicJsonResultGetRoles(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=newList<role>();
for(inti=0;i<rList.Count;i++)
{
roler=newrole();
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);
}
varjson=new
{
total=rService.GetTotal(),
rows=roleList
};
returnJson(json,JsonRequestBehavior.AllowGet);
}
最后的最后是控制器相关的方法
///<summary>
///分页的数据
///</summary>
///<paramname="page"></param>
///<paramname="rows"></param>
///<returns></returns>
publicList<role>GetAllRoles(intpage,introws)
{
using(diamondEntitiesentity=newdiamondEntities())
{
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)
{
returnroleList;
}
else
{
returnnull;
}
}
}
///<summary>
///获取总页数
///</summary>
///<returns></returns>
publicintGetTotal()
{
using(diamondEntitiesentity=newdiamondEntities())
{
IQueryable<role>user=entity.roles.Select(m=>m);
List<role>userList=user.ToList();
returnuserList.Count;
}
}
以上就是小编为大家带来的浅谈MVC+EFeasyuidataGrid动态加载分页表格全部内容了，希望大家多多支持毛票票~