很多人问我为什么要写这么多的博客，其实回想起从前，刚刚工作的那会，我也是什么都不会，每天遇到难题的时候只能打开百度，搜索关键词，看看网上的前辈有没有遇到和我一样的难题，又是怎样处理的，好在有很多热心的程序员们有所记录，我也能够顺利的处理问题，工作才会慢慢变得顺心，如今只是想出一己之力，哪怕是某一句代码能够给那些正在被困扰的带来突破口，那便是值得的。
需求：要实现的效果原型如下，点击增加信息按钮的时候，会弹出一个弹框，把自己的相关信息填入，点击保存，保存之后，数据会以小卡片的形式显示在前台界面，可以无限增加卡片个数，每页放六个卡片，超过六个则开始进行分页。每一张卡片的内容可以进行编辑修改和删除。
图片.png
图片.png参考：
https://www.songma.com/p/007bc3416c1d
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.songma.com/u/05f416aefbe1
90后前台妹子，爱编程，爱经营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起讨论交流。