http://www.sufeinet.com/plugin.php?id=keke_group

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

分布式系统框架(V2.0) 轻松承载百亿数据,千万流量!讨论专区 - 源码下载 - 官方教程

HttpHelper爬虫框架(V2.7-含.netcore) HttpHelper官方出品,爬虫框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V2.0) 开源的爬虫类,支持多种模式和属性 源码 - 代码生成器 - 讨论区 - 教程- 例子

查看: 16209|回复: 2

[教程] 【通用权限管理系统】菜单管理页面分页html处理

[复制链接]
发表于 2017-12-20 20:47:36 | 显示全部楼层 |阅读模式
【通用权限管理系统】菜单管理页面分页逻辑处理


导读部分






教程部分


本帖子主要讲解菜单管理页面中的分页列表页面html与js的实现方法,效果如下图所示:

本页面,主要继承了母版页ChildMainMaster,本次讲解中,主要讲解分页的html与js实现方式
1. 页面html如下:
[C#] 纯文本查看 复制代码
<asp:Content ID="Content2" ContentPlaceHolderID="body" runat="server">
<div class="si-main">
<div class="si-block">
<div class="si-form">
<table class="table table-form">
<tr>
<td>
<div class="">
<label style="float:left;margin-left:50px;display:inline-block;line-height:30px;">列表查询类型:</label>
<div class="form-control-wrap">
<select name="carreType" id="ddl_searchType" style="width:80px;height:30px;" class="high" data-combobox>
<option value="1" <%if(searchType == "1"){%> selected="selected"<%} %>>菜单ID</option>
<option value="2" <%if(searchType == "2"){%> selected="selected"<%} %>>菜单名称</option>
<option value="3" <%if(searchType == "3"){%> selected="selected"<%} %>>分类ID</option>
<option value="4" <%if(searchType == "4"){%> selected="selected"<%} %>>分类名称</option>
</select>
</div>
<div class="form-control-wrap">
<input class="form-control short" id="txt_searchText" name="txt_searchText" value="<%=searchText %>"/>
</div>
<a href="javascript:;" class="btn btn-success" id="btnSearch">查询</a>
<a class="btn btn-primary" href="/Sys/SysMenuAdd.aspx">添加菜单</a>
</div>
</td>
</tr>
</table>
<table class="table table-page" id="grid">
<thead>
<tr>
<td>菜单编号</td>
<td>菜单名称</td>
<td>父菜单编号</td>
<td>链接地址</td>
<td>排序编码</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<%foreach (var info in list)
{
var trBgColor = string.Empty;
if (info.ParentID == 0) { trBgColor = "rgb(240, 248, 255)"; }
%>
<tr style="background-color:<%=trBgColor %>">
<td> <%=info.MenuID%></td>
<td><%=info.MenuName%></td>
<td><%=info.ParentID%></td>
<td><%=info.LinkUrl%></td>
<td class="color-weak"><%=info.OrderID%></td>
<td>
<a href="/Sys/SysMenuAdd.aspx?action=edit&menuId=<%=info.MenuID %>" class="btn btn-success btn-small">修改</a>
<a href="javascript:;" class="btn btn-success btn-small del" data-value="<%=info.MenuID %>" data-action="del">删除</a>
</td>
</tr>
<%} %>
</tbody>
<tfoot>
<tr>
<td colspan="6">
<div class="pagination-wrap">
<div class="count">
<span>总页数 0</span><span>总记录数 0</span>
</div>
<ul class="pagination" id="pagination">
</ul>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</asp:Content>


从以上代码可以看出,本系统使用的是table进行布局,主要有如下两个样式控制,
1, ‘.table-form’主要用在查询条件使用,
2. ‘.table-page’主要重在分页列表数据显示使用

分页js实现如下:
[C#] 纯文本查看 复制代码
<script type="text/javascript">
var pagerOption = {
container: $( '#pagination' ),
displayPagerCount: 4,
pageSize: <%=PAGESIZE %>,
currentIndex: <%=pageIndex %>,
totalCount: <%=this.TotalCount %>,
pageCallback: function ( pageIndex ) {
var $tbody = $( '#grid' ).find( 'tbody' );
var $trCloned = $tbody.find( 'tr:first' ).clone();
$tbody.empty();

var searchType = $('#ddl_searchType').val();
var searchText = $('#txt_searchText').val();

$.post('/System/SysMenuList.aspx', 
{action:'page', pageIndex:pageIndex, searchType:searchType, searchText:searchText}, 
function (data) {
if (data.reCode > 0) {
$(data.Info).each(function (index, item) {
var $newTr = $trCloned.clone();
var tdArray = $newTr.children('td');
$newTr.attr('bgcolor','');
if(item.ParentID == 0){
$newTr.attr('bgcolor','#d8d8d8');
}
$(tdArray[0]).text(item.MenuID);
$(tdArray[1]).text(item.MenuName);
$(tdArray[2]).text(item.ParentID);
$(tdArray[3]).text(item.LinkUrl);
$(tdArray[4]).text(item.OrderID);

var optStr = "";
optStr += '<a href="/Sys/SysMenuAdd.aspx?action=edit&menuID=' + item.MenuID + '&pageIndex=' + pageIndex + '" class="btn btn-success btn-small">修改</a>';
optStr += '<a href="javascript:;" class="btn btn-success btn-small del" data-value="' + item.MenuID + '" data-action="del" data-pageIndex="' + pageIndex + '">删除</a>';

$(tdArray[5]).html(optStr);

$tbody.append($newTr);
});
pagerOption.currentIndex = pageIndex;
pagerOption.totalCount = data.total;
renderPagination( pagerOption );
}
}, 'json');
}
}

module( ['loadScript'], function(load) { load.onSuccess( '/Resource/js/user-common.js', function() {
renderPagination( pagerOption );
} ); } );
</script>

分页逻辑js主要使用了js ‘/Resource/js/user-common.js’其中计算分页页面显示,以及分页数据添加
在以上的js中,可以看到,使用了克隆的方式,获取id为‘grid’的tbody第一行,对第一行进行克隆
循环调ajax获取的json数据中的list数据,将每一行的数据,替换克隆单元格相对应的数据即可,讲所有的hmtl append到$( '#grid' ).find( 'tbody' )中即可

备注: 如果替换了table的id,以及tfoot中的分页页面ul的id则在js中也要替换想用的id,否则分页数据不能显示,或者分页页面不能显示
替换内容如下:
var pagerOption = {
        container: $( '#pagination' )

以及pageCallback中的tableid,
pageCallback: function ( pageIndex ) {
            var $tbody = $( '#grid' ).find( 'tbody' );
            var $trCloned = $tbody.find( 'tr:first' ).clone();
            $tbody.empty();



1. 开通SVIP会员,免费下载本站所有源码,不限次数据,不限时间
2. 加官方QQ群,加官方微信群获取更多资源和帮助
3. 找站长苏飞做网站、商城、CRM、小程序、App、爬虫相关、项目外包等点这里
 楼主| 发表于 2017-12-20 20:49:42 | 显示全部楼层
占个沙发,加油ing
 楼主| 发表于 2018-1-4 21:33:04 | 显示全部楼层
主要体现了分页html,以及js,其中引用了自己写的一个分页js,大家可以下载源码进行查看,稍后也会出教程,大家一起进步哈
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|苏飞论坛 ( 豫ICP备18043678号-2)

GMT+8, 2024-11-8 14:13

© 2014-2021

快速回复 返回顶部 返回列表