原型图
重要的实现代码
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 + "![](/bison/icon/on.png)</p><hr/>"; }else{ tableShow += "<p class='text-muted'>"+ item.signName + "![](/bison/icon/off.png)</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); } } }); };