Bootstrap+jQuery實現卡片標籤樣式的分頁
阿新 • • 發佈：2018-12-17
前言
很多人問我為什麼要寫這麼多的部落格，其實回想起從前，剛剛工作的那會，我也是什麼都不會，每天遇到難題的時候只能開啟百度，搜尋關鍵詞，看看網上的前輩有沒有遇到和我一樣的難題，又是怎麼解決的，好在有很多熱心的程式設計師們有所記錄，我也能夠順利的解決問題，工作才會慢慢變得順心，如今只是想出一己之力，哪怕是某一句程式碼能夠給那些正在被困擾的帶來突破口，那便是值得的。
實現效果
需求：要實現的效果原型如下，點選新增資訊按鈕的時候，會彈出一個彈框，把自己的相關資訊填入，點選儲存，儲存之後，資料會以小卡片的形式顯示在前端介面，可以無限新增卡片個數，每頁放六個卡片，超過六個則開始進行分頁。每一張卡片的內容可以進行編輯修改和刪除。
圖片.png
圖片.png
參考：
具體功能程式碼
1：點選新增按鈕，彈出彈框，在彈框裡面填寫想要新增的資訊要素
// 新增標籤 $("#setAdd").on("click", function() { layer.open({ type : 2, title : '新增標籤', area : [ '1000px', '550px' ], fix : false, // � content : basePath + 'signIn/set/toAddSet', end : function() { $('#dataDiv').html(""); getFirstPageOfMemo($("#searchByName").val()); } }); });
2：刪除卡片標籤功能
//刪除標籤 function deleteSignSet(id,fenceId){ if(confirm("確認刪除該標籤")){ $.ajax({ url : basePath + "signIn/set/deleteSignSet", type : "get", data : "id="+id, success : function(data){ if (customGlobal.ajaxCallback(data)) { $('#dataDiv').html(""); getFirstPageOfMemo($("#searchByName").val()); } } }); var newFeature = new ol.Feature(); var electronicParam = { service: 'WFS', version: '1.1.0', request: 'GetFeature', typeName: DBs + ':electronic_fence', // 電子圍欄圖層 outputFormat: 'application/json', cql_filter: "fence_id='" + fenceId + "'" }; $.ajax({ url: wfsUrl, data: $.param(electronicParam), type: 'GET', dataType: 'json', success: function(response){ if(response.features.length == 1){ newFeature.setId(response.features[0].id); updateNewFeature([newFeature],'electronic_fence','remove'); } } }); } }
3：更新修改卡片標籤功能
//更新標籤
function updateSignSet(id){
layer.open({
type : 2,
title : '更新標籤',
area : [ '1000px', '550px' ],
fix : false, // �
content : basePath + 'signIn/set/toUpdateSignSet?id='+id,
end : function() {
$('#dataDiv').html("");
getFirstPageOfMemo($("#searchByName").val());
}
});
}
4：仿安卓開啟或者關閉按鈕功能
//開啟或關閉標籤
function qhImage(id){
var state = 1;
var vSrc = $("#"+id+"").attr("src");
if(vSrc.length == 18){
$("#"+id+"").attr("src","/bison/icon/off.png")
state = 0;
}else{
$("#"+id+"").attr("src","/bison/icon/on.png")
}
$.ajax({
url : basePath+"signIn/set/updateSignSetState",
type : "get",
data : {"id": id, "signState": state},
success : function(data){
}
});
}
5：新增資訊儲存之後，這些資訊會以小卡片的形勢出現在前端分頁裡
//分頁函式
function getFirstPageOfMemo(name){
$.ajax({
url: basePath + "/signIn/set/getSignSetListPage",
datatype: 'json',
type: "POST",
data: { "pageNo": 1,"name":name },
dataType: "json",
success: function (data) {
var curPage = 0;
var tPages = 20;
var pgSize = 6;
if (data != null)
{
tPages = data.totalPages;
curPage = data.currentPage;
pgSize = data.sizeOfPage;
var tableShow = "";
$.each(data.signSetList, function(i, item){
tableShow += "<div class='col-sm-6 col-md-3 table-bordered table-responsive' style='margin:20px 20px 0 20px;'>";
if(item.signState == '1'){
tableShow += "<p class='text-muted'>"+ item.signName + "<img id="+item.id+" src='/bison/icon/on.png' onclick='qhImage("+item.id+")' width='70' height='30' style='position:absolute; right:0'></p><hr/>";
}else{
tableShow += "<p class='text-muted'>"+ item.signName + "<img id="+item.id+" src='/bison/icon/off.png' onclick='qhImage("+item.id+")' width='70' height='30' style='position:absolute; right:0'></p><hr/>";
}
tableShow += "<p class='text-capitalize'>" + dealTime(item.beginTime) + " - "+ dealTime(item.endTime) +"</p>";
tableShow += "<p class='text-description'>" + dealCircle(item.signCircle) + " </p>";
tableShow += "<p class='text-description'>人數:<font >"+ item.count +"</font>人</p>";
tableShow += "<div style='text-align: center;'>";
tableShow += "<a class='btn btn-default' onclick='updateSignSet("+item .id+")'><i class='glyphicon glyphicon-pencil'></i></a>";
tableShow += "<a class='btn btn-default' onclick='deleteSignSet("+item.id+","+item.fenceId+")'><i class='glyphicon glyphicon-trash'></i></a>";
tableShow +="</div></div>";
});
$('#dataDiv').append(tableShow);
$('#aPager').show();
var element = $('#aPager');
var options = {
bootstrapMajorVersion:3,
currentPage: curPage,
numberOfPages: pgSize,
totalPages: tPages,
itemTexts: function (type, page, current) {
switch (type) {
case "first":
return "首頁";
case "prev":
return "上一頁";
case "next":
return "下一頁";
case "last":
return "末頁";
case "page":
return page;
}
},
//點選事件，用於通過Ajax來重新整理整個list列表
onPageClicked: function (event, originalEvent, type, page) {
getMemo(page,$("#searchByName").val());
}
};
element.bootstrapPaginator(options);
}
}
});
};
var getMemo = function(pageNo,name){
$('#dataDiv').html("");
$.ajax({
url: basePath + "/signIn/set/getSignSetListPage",
datatype: 'json',
type: "POST",
data: { "pageNo": pageNo,"name":name },
dataType: "json",
success: function (data) {
if (data != null)
{
tPages = data.totalPages;
curPage = data.currentPage;
pgSize = data.sizeOfPage;
var tableShow = "";
$.each(data.signSetList, function(i, item){
tableShow += "<div class='col-sm-6 col-md-3 table-bordered table-responsive' style='margin:20px 20px 0 20px;'>";
if(item.signState == '1'){
tableShow += "<p class='text-muted'>"+ item.signName + "<img id="+item.id+" src='/bison/icon/on.png' onclick='qhImage("+item.id+")' width='70' height='30' style='position:absolute; right:0'></p><hr/>";
}else{
tableShow += "<p class='text-muted'>"+ item.signName + "<img id="+item.id+" src='/bison/icon/off.png' onclick='qhImage("+item.id+")' width='70' height='30' style='position:absolute; right:0'></p><hr/>";
}
tableShow += "<p class='text-capitalize'>" + dealTime(item.beginTime) + " - "+ dealTime(item.endTime) +"</p>";
tableShow += "<p class='text-description'>" + dealCircle(item.signCircle) + " </p>";
tableShow += "<p class='text-description'>人數:<font >"+ item.count +"</font>人</p>";
tableShow += "<div style='text-align: center;'>";
tableShow += "<a class='btn btn-default' onclick='updateSignSet("+item .id+")'><i class='glyphicon glyphicon-pencil'></i></a>";
tableShow += "<a class='btn btn-default' onclick='deleteSignSet("+item.id+","+item.fenceId+")'><i class='glyphicon glyphicon-trash'></i></a>";
tableShow +="</div></div>";
});
$('#dataDiv').append(tableShow);
}
}
});
};
原文作者：祈澈姑娘 技術部落格：https://www.jianshu.com/u/05f416aefbe1 90後前端妹子，愛程式設計，愛運營，愛折騰。 堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。