近期完成小项目中含登录页、首页及详情页，其中运用到自封装分页组件及权限页面展示结合查询功能。话不多说，进主题
- login页
index首页
这里先说需求，该界面分3种权限，第一种、二种为管理员，管理员登录后无法新增数据，查询条件只有已审核及未审核，显示表格中备案数量及状态，第三种权限登录后，可新增，查询条件为已备案未备案，无备案数量栏，状态栏为已备案/未备案。其中，分页组件自封装。代码如下：
1.下拉框使用bootstrap组件，但是该组件有问题。选择具体选项后，默认‘请选择’三个字选项丢失，导致用户只能选择其中某一项，自行修改了下
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle please_btn" data-toggle="dropdown">
<span class="buttonText">请选择</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" onclick="shows($(this).text())" class="check_Box">已审核</a></li>
<li><a href="#" onclick="shows($(this).text())" class="uncheck_Box">未审核</a></li>
</ul>
</div>
//完善下拉框组件
$(".please_btn").click(function(){
if($('.buttonText').text() != '请选择'){
$("li").remove(".check_Box_pl");
$(".dropdown-menu").prepend('<li class="check_Box_pl"><a href="#" onclick="shows($(this).text())">请选择</a></li>');
}
});
//改变下拉框函数
function shows(a) {
$('.buttonText').text(a)
}
效果如下：
具体权限进入展示不做赘述，这里主要讲分页组件的搭配，组件封装思路是创建分页组件对象，由后端控制每页显示数据条数，后端提供条目总数，点击分页每个按钮时传递给后端当前页码。初始数据参数如下：
// 发送请求，获取页面初始数据/分页数据
getPageNum(itemListDataUrl);
/*自定义分页参数对象*/
var pageDataObj = {
obj_box: '.tab_con',//翻页容器
total_item: '',//条目总数
per_num: '',//每页条目数
current_page: 1,//当前页初始值
userRole: '',//用户权限数值
urlData: ''//搜索http路径
};
function getPageNum(url) {
$.ajax({
type: "post",
url: url,//全局访问地址
dataType: "json", //返回数据形式为json
data: {
pageNumber: 1//访问初始页第一页
},
success: function (res) {
console.log(res);
//判断用户权限
//权限代码省略
if (res.bidItem.content) {
pageDataObj.total_item = res.bidItem.totalElements;//获取总数据数量
pageDataObj.per_num = res.totalCount;//设置每页条数数量
pageDataObj.urlData = url;//设置请求路径
//用分页方法,初始化数据*/
page_ctrl(pageDataObj);
}
},
});
}
封装的分页JS代码，有需要的，可以直接将HTML和分页JS全部复制走，按需求使用
<!-- 表格table代码 -->
<div class="row project_height_con">
<table class="table table-bordered table-hover tab_con">
<thead>
<tr>
<th>编号</th>
<th>项目名称</th>
<th>发布时间</th>
<th class="status_cont">状态</th>
<th class="admin_status_cont">状态</th>
</tr>
</thead>
<tbody class="table_tbody">
</tbody>
</table>
<div class="page_con"></div>
</div>
分页组件的css代码如下：
.page_ctrl{
text-align: center;
margin: 10px auto;
box-sizing: border-box;
}
.page_ctrl *{
line-height: 26px;
}
.page_ctrl button{
margin:0 3px;
min-width:30px;
background: #ffffff;
border: 1px solid #e5e5e5;
color: #5e5e5e;
cursor: pointer;
outline: none;
text-align: center;
}
.page_ctrl button:hover{
background: #2e608f;
color: #ffffff;
}
.page_ctrl .btn_dis{
cursor: default;
opacity: .7;
background: #eeeeee;
color: #5e5e5e;
}
.page_ctrl .btn_dis:hover{
background: #eeeeee;
color: #5e5e5e;
}
.page_ctrl .current_page{
background: #3b7ab5;
color: #ffffff;
}
.page_ctrl .input_page_num{
width:30px;
height: 26px;
margin:0 3px;
padding: 0;
text-align: center;
background: #ffffff;
border: 1px solid #e5e5e5;
color: #5e5e5e;
outline: none;
}
.page_ctrl .page_total,.page_ctrl .page_text{
color: #2b2b2b;
font-size: 13px;
}
分页组件的JS代码如下：
function page_ctrl(data_obj) {
var url = data_obj.urlData;
var userRole = data_obj.userRole;
var obj_box = (data_obj.obj_box !== undefined) ? data_obj.obj_box : function () {
return;
};//翻页容器dom对象,必要参数
var total_item = (data_obj.total_item !== undefined) ? parseInt(data_obj.total_item) : 0;//数据条目总数,默认为0,组件将不加载
var per_num = (data_obj.per_num !== undefined) ? parseInt(data_obj.per_num) : 10;//每页显示条数,默认为10条
var current_page = (data_obj.current_page !== undefined) ? parseInt(data_obj.current_page) : 1;//当前页,默认为1
var total_page = Math.ceil(total_item / per_num);//计算总页数,不足1页,不加载组件
if (total_page < 1) {
return;
}
//在指定容器内加载分页数据
$(".table_tbody").replaceWith('<tbody class="table_tbody">')
//在指定容器内加载分页插件
$(obj_box).next().html('<div class="page_ctrl"></div>');
function page_even() {
/*加载数据*/
function change_content() {
// 根据实际项目需要，编写自己的AJAX代码。发送ajax请求，获取数据
if (url == searchDataUrl) {
$.ajax({
type: "post",
url: url,
dataType: "json",
data: {
itemName: itemName,
bidItemCode: itemCode,
companyName: seach_inpt_company,
statusNum: statusNum,
pageNumber: current_page,
},
success: function (res) {
var resdataArr = res.bidItem.content;
var page_content = '';//当前页内容
if (userRole == 3) {
for (var i = 0; i < resdataArr.length; i++) {
console.log(resdataArr[i].bidItemStatus.bidItemStatusName);
if (resdataArr[i].fileCount) {
page_content += '<tr onclick="productDetails(this)">' +
'<td>' + resdataArr[i].code + '</td>' +
'<td>' + resdataArr[i].itemName + '</td>' +
'<td>' + resdataArr[i].publishTime + '</td>' +
'<td>' + '已备案' + '</td></tr>';
} else {
page_content += '<tr onclick="productDetails(this)">' +
'<td>' + resdataArr[i].code + '</td>' +
'<td>' + resdataArr[i].itemName + '</td>' +
'<td>' + resdataArr[i].publishTime + '</td>' +
'<td>' + '未备案' + '</td></tr>';
}
}
} else if (userRole == 1 || userRole == 2) {
for (var i = 0; i < resdataArr.length; i++) {
page_content += '<tr onclick="productDetails(this)">' +
'<td>' + resdataArr[i].code + '</td>' +
'<td>' + resdataArr[i].itemName + '</td>' +
'<td>' + resdataArr[i].publishTime + '</td>' +
'<td>' + resdataArr[i].fileCount + '</td>'+
'<td>' + resdataArr[i].bidItemStatus.bidItemStatusName + '</td></tr>';
}
}
$(obj_box).children('.table_tbody').html(page_content);
}
})
} else {
$.ajax({
type: "post",
url: url,
dataType: "json", //返回数据形式为json
data: {
pageNumber: current_page//访问初始页第一页
},
success: function (res) {
console.log(res);
if (res.bidItem.content) {
var resdataArr = res.bidItem.content;
var page_content = '';//当前页内容
if (userRole == 3) {
for (var i = 0; i < resdataArr.length; i++) {
if (resdataArr[i].fileCount) {
page_content += '<tr onclick="productDetails(this)">' +
'<td>' + resdataArr[i].code + '</td>' +
'<td>' + resdataArr[i].itemName + '</td>' +
'<td>' + resdataArr[i].publishTime + '</td>' +
'<td>' + '已备案' + '</td></tr>';
} else {
page_content += '<tr onclick="productDetails(this)">' +
'<td>' + resdataArr[i].code + '</td>' +
'<td>' + resdataArr[i].itemName + '</td>' +
'<td>' + resdataArr[i].publishTime + '</td>' +
'<td>' + '未备案' + '</td></tr>';
}
}
} else if (userRole == 1 || userRole == 2) {
for (var i = 0; i < resdataArr.length; i++) {
page_content += '<tr onclick="productDetails(this)">' +
'<td>' + resdataArr[i].code + '</td>' +
'<td>' + resdataArr[i].itemName + '</td>' +
'<td>' + resdataArr[i].publishTime + '</td>' +
'<td>' + resdataArr[i].fileCount + '</td>'+
'<td>' + resdataArr[i].bidItemStatus.bidItemStatusName + '</td></tr>';
}
}
$(obj_box).children('.table_tbody').html(page_content);
}
},
});
}
}
change_content();
var inp_val = (current_page == total_page) ? 1 : current_page + 1;//跳转页数,input默认显示值
var append_html = '<button class="prev_page">上一页</button>';
for (var i = 0; i < total_page - 1; i++) {
if (total_page > 8 && current_page > 6 && i < current_page - 3) {
if (i < 2) {
append_html += '<button class="page_num">' + (i + 1) + '</button>';
}
else if (i == 2) {
append_html += '<span class="page_dot">•••</span>';
}
}
else if (total_page > 8 && current_page < total_page - 3 && i > current_page + 1) {
if (current_page > 6 && i == current_page + 2) {
append_html += '<span class="page_dot">•••</span>';
} else if (current_page < 7) {
if (i < 8) {
append_html += '<button class="page_num">' + (i + 1) + '</button>';
} else if (i == 8) {
append_html += '<span class="page_dot">•••</span>';
}
}
//append_html+='<span class="page_dot">•••</span>';
}
else {
if (i == current_page - 1) {
append_html += '<button class="page_num current_page">' + (i + 1) + '</button>';
}
else {
append_html += '<button class="page_num">' + (i + 1) + '</button>';
}
}
}
if (current_page == total_page) {
append_html += '<button class="page_num current_page">' + (i + 1) + '</button>';
} else {
append_html += '<button class="page_num">' + (i + 1) + '</button>';
}
append_html += '<button class="next_page">下一页</button><span class="page_total">共 ' + total_page + ' 页, 到第</span><input class="input_page_num" type="text" value="' + inp_val + '"><span class="page_text">页</span><button class="to_page_num">确定</button>';
$('.page_ctrl').append(append_html);
if (current_page == 1) {
$('.page_ctrl .prev_page').attr('disabled', 'disabled').addClass('btn_dis');
} else {
$('.page_ctrl .prev_page').removeAttr('disabled').removeClass('btn_dis');
}
if (current_page == total_page) {
$('.page_ctrl .next_page').attr('disabled', 'disabled').addClass('btn_dis');
} else {
$('.page_ctrl .next_page').removeAttr('disabled').removeClass('btn_dis');
}
}
page_even(userRole);
$('.page_ctrl').on('click', 'button', function () {
var that = $(this);
if (that.hasClass('prev_page')) {
if (current_page != 1) {
current_page--;
that.parent('.page_ctrl').html('');
page_even();
}
}
else if (that.hasClass('next_page')) {
if (current_page != total_page) {
current_page++;
that.parent('.page_ctrl').html('');
page_even();
}
}
else if (that.hasClass('page_num') && !that.hasClass('current_page')) {
current_page = parseInt(that.html());
that.parent('.page_ctrl').html('');
page_even();
}
else if (that.hasClass('to_page_num')) {
current_page = parseInt(that.siblings('.input_page_num').val());
that.parent('.page_ctrl').html('');
page_even();
}
});
}
这里说明，我的分页组件思路是：一进入页面，就会发送请求，拿到后端返回的数据条数及每页显示数量，形成分页组件栏，然后在分页组件JS内部发送ajax请求，拿数据渲染，这里因权限关系有些代码臃肿，后期再优化；另外这相当于发送两次请求，效率也有些问题，再优化吧，头疼。因数据渲染和查询功能路径不一样，所以组件中url路径需要传递。其它的权限什么也都没难度，就不说了。。。嗯，就这些。。。
扫一扫
884
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
