4.9w+
社区成员
66.8w+
社区内容
- 主页
- ASP
- .NET Framework
- Web Services
- VB
- VC
- 图表区
- 分析与设计
- 组件/控件开发
- LINQ
请教个问题，关于easyui datagrid控件分页的问题
我在一个自己的小程序里，使用了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>
显示的效果图：
我取数据的方式，在控制器里写的方法是这样：
[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>
显示的效果图：
...全文
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);//调用编辑函数
}
}
},
现在要实现，选中一条记录单击，工具栏的编辑，传值到控制器里，为什么会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日
直接看ｄｅｍｏ就好了。
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日
有人给我指导一下吗？