Bootstrap+jQuery实现卡片标签样式的分页
前言
很多人问我为什么要写这么多的博客，其实回想起从前，刚刚工作的那会，我也是什么都不会，每天遇到难题的时候只能打开百度，搜索关键词，看看网上的前辈有没有遇到和我一样的难题，又是怎么解决的，好在有很多热心的程序员们有所记录，我也能够顺利的解决问题，工作才会慢慢变得顺心，如今只是想出一己之力，哪怕是某一句代码能够给那些正在被困扰的带来突破口，那便是值得的。
实现效果
需求：要实现的效果原型如下，点击添加信息按钮的时候，会弹出一个弹框，把自己的相关信息填入，点击保存，保存之后，数据会以小卡片的形式显示在前端界面，可以无限添加卡片个数，每页放六个卡片，超过六个则开始进行分页。每一张卡片的内容可以进行编辑修改和删除。
图片.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);
}
}
});
};本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.10.12 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录