• 主页
  • ASP
  • .NET Framework
  • Web Services
  • VB
  • VC
  • 图表区
  • 分析与设计
  • 组件/控件开发
  • LINQ

请教个问题,关于easyui datagrid控件分页的问题

ruan1978 2017-05-17 11:01:31
我在一个自己的小程序里,使用了easyui datagrid的控件,原先做程序时,没有考虑记录多,没有考虑分页的问题,后来记录添加多了,需要分页。我参考了网上的各种代码。分页的属性设置了。但是效果还是没有出来,一页中还是现实全部记录,但是分页会出来,每页显示10条记录效果没有。总共分了多少页也有。
我取数据的方式,在控制器里写的方法是这样:
[HttpPost]
public ActionResult LoadUserData() //属于UserController
{
var json = new { total = permitbll.GetAllUserList().Count, rows = permitbll.GetAllUserList() };
return Json(json, JsonRequestBehavior.DenyGet);
}
前端显示数据的页面代码:
@{
ViewBag.Title = "用户管理";
Layout = "/Views/Shared/_Layout.cshtml";
}
@section script{

$(document).ready(function(){

initUserGrid();

});

function initUserGrid(){

$("#grid").datagrid({

url:'/User/LoadUserData', //从控制器获取数据的方式

fitColumns:true,

rownumbers:true,

toolbar: [
{
text:"新增",
iconCls: 'sys-icon-add',
handler:function() {
addUser();
}
},
{
text:"编辑",
iconCls: 'icon-edit',
handler:function(){
var selected = $('#grid').datagrid('getSelected');
if(null == selected){
$.messager.alert("提示", "您没有选中任何行!");
return;
}
else{
editUser(selected);
}

}
},
{
text:"删除",
iconCls: 'icon-remove',
handler:function() {
}
}
],
pagination:true, //分页属性设置

singleSelect:true,

pageSize: 10, 
   
               pageList: [10,20,30,40],
  
               beforePageText: '第', 
  
               afterPageText: '页    共 {pages} 页',
  
               displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',  

columns:[[

{field:'UId',title:'ID',width:50,align:'center'},

{field:'UName',title:'用户名称',width:200,align:'center'},

{field:'opt',title:'操作',width:70,align:'center',formatter:function(v,r,i){

return "<a href='javascript:delUser("+r.UId+")'><img src='/Content/sys_icons/decline.png' /></a> <a href='javascript:editUser("+r.UId+")'><img src='/Content/sys_icons/disk_edit.png' /></a>";

}}

]]

});
}

}

<table id="grid" data-options="fit:true"></table>
<div id="dialog" style="overflow:hidden"></div>
显示的效果图:
...全文
224 点赞 收藏 9
写回复
9 条回复
ruan1978 2017年05月19日
分页的功能谢谢楼上的 ducker3590 我现在还有个问题,原先做“新增”记录,是放在datagrid里的工具条,修改和删除是放在记录同行的右侧。这种方式从view里的js函数里,传值是通过路由实现的。 原先代码: function initActionGrid(){ $("#grid").datagrid({ url:'/Action/LoadActionData', singleSelect: true, fitColumns:true, rownumbers:true, toolbar: [ {text:"新增",iconCls: 'sys-icon-add', handler:function() {addAction();}}, {text:"编辑",iconCls: 'icon-edit', handler:function() {}}, {text:"删除",iconCls: 'icon-remove', handler:function() {}} ], columns:[[ {field:'AId',title:'ID',width:50,align:'center'}, {field:'AName',title:'动作名',width:200,align:'center'}, {field:'AValue',title:'动作值',width:200,align:'center'}, {field:'opt',title:'操作',width:70,align:'center',formatter:function(v,r,i){ return "<a href='javascript:delAction("+r.AId+")'><img src='/Content/sys_icons/decline.png' /></a> <a href='javascript:editAction("+r.AId+")'><img src='/Content/sys_icons/disk_edit.png' /></a>"; }} ]] }); } view中的修改和删除代码 : function delAction(_aid){ $.messager.confirm("提示","确认要删除此动作吗?",function(b){ if(b){ $.get("/Action/DelAction/",{aid:_aid},function(data){ if(data=="ok"){ $('#grid').datagrid('reload'); } },"text"); } }); } function editAction(_aid){ $('#dialog').dialog({ title:'功能修改', iconCls:'sys-icon-add', width:400, height:300, closed:false, cathe:false, modal:true, onClose:function(){ $("#grid").datagrid("reload"); }, content:createIFrame("/Action/EditAction/"+_aid) }); } 路由配置中做了如下的设置: RouteConfig.cs routes.MapRoute( name: "EditAction", url: "Action/EditAction/{aid}", defaults: new { controller = "Action", action = "EditAction", aid = UrlParameter.Optional } ); routes.MapRoute( name: "RemoveAction", url: "Action/DelAction/{aid}", defaults: new { controller = "Action", action = "DelAction", aid = UrlParameter.Optional } ); 在Controller中的代码: [HttpGet] public ActionResult EditAction(string aid) { ViewBag.Model = permitbll.GetOneAction(aid);//因为路由配置了这个值传过来了 ViewBag.AId = aid; return View(); } 看效果图,如下: 现在要实现,选中一条记录单击,工具栏的编辑,传值到控制器里,为什么会null. text:"编辑", iconCls: 'icon-edit', handler:function(){ var selected = $('#grid').datagrid('getSelected');//获取选中的值 if(null == selected){ $.messager.alert("提示", "您没有选中任何行!"); return; } else{ editUser(selected.UId);//调用编辑函数 } } },
回复 点赞
紫魂一号 2017年05月18日
你后台方法需要根据前台参数分页查询。
回复 点赞
ruan1978 2017年05月18日
楼上的谢谢你,改了改,还是不行!
回复 点赞
ruan1978 2017年05月18日
谢谢7#的,不过语句里多了个分号。 var json = new { total = result.Count, rows = result.Skip((page - 1) * rows).Take(rows)}; 这样编译通过了。
回复 点赞
csdnFUCKINGSUCKS 2017年05月18日
前台不用修改

[HttpPost]
public ActionResult LoadUserData(int page, int rows) 
{
    var result = permitbll.GetAllUserList();
    var json = new { total = result.Count, rows = result.Skip((page - 1) * rows).Take(rows); };
    return Json(json, JsonRequestBehavior.DenyGet);
}
回复 点赞
冰河绝恋 2017年05月18日
直接看demo就好了。
回复 点赞
ruan1978 2017年05月18日
to 4#: [HttpPost]         public ActionResult LoadUserData()   //属于UserController         {             var json = new { total = permitbll.GetAllUserList().Count, rows = permitbll.GetAllUserList() };             return Json(json, JsonRequestBehavior.DenyGet);         } 是不是这个方法改写一下就可以了?
回复 点赞
csdnFUCKINGSUCKS 2017年05月17日
ruan1978 2017年05月17日
有人给我指导一下吗?
回复 点赞
发动态
发帖子
.NET技术社区
创建于2007-09-28

4.9w+

社区成员

66.8w+

社区内容

.NET技术交流专区
社区公告
暂无公告