整理近期專案——分頁元件+查詢功能+許可權展示3合頁面專案
阿新 • • 發佈：2018-12-29
近期完成小專案中含登入頁、首頁及詳情頁，其中運用到自封裝分頁元件及許可權頁面展示結合查詢功能。話不多說，進主題
- 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路徑需要傳遞。其它的許可權什麼也都沒難度，就不說了。。。嗯，就這些。。。