Bootstrap+jQuery实现卡片标签样式的分页

前言

很多人问我为什么要写这么多的博客,其实回想起从前,刚刚工作的那会,我也是什么都不会,每天遇到难题的时候只能打开百度,搜索关键词,看看网上的前辈有没有遇到和我一样的难题,又是怎么解决的,好在有很多热心的程序员们有所记录,我也能够顺利的解决问题,工作才会慢慢变得顺心,如今只是想出一己之力,哪怕是某一句代码能够给那些正在被困扰的带来突破口,那便是值得的。

实现效果

需求:要实现的效果原型如下,点击添加信息按钮的时候,会弹出一个弹框,把自己的相关信息填入,点击保存,保存之后,数据会以小卡片的形式显示在前端界面,可以无限添加卡片个数,每页放六个卡片,超过六个则开始进行分页。每一张卡片的内容可以进行编辑修改和删除。

图片.png

图片.png

参考:

https://www.jianshu.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); 
              }
         }
        
    });
};

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏有趣的Python

3- vue django restful framework 打造生鲜超市 - model设计和资源导入

使用Python3.6与Django2.0.2(Django-rest-framework)以及前端vue开发的前后端分离的商城网站 项目支持支付宝支付(...

4697
来自专栏运维小白

原QQ坦白说之解密教程

背景:之前在QQ上突然有人发坦白说给我,第一感觉就是谁恶搞我,想找到是谁,是谁在恶作剧 ? ---- QQ坦白说之解密教程 一、模拟手机QQ 首先使用谷歌...

4419
来自专栏肖洒的博客

【爬虫】(四)西电研究生教务系统技术文档

关于教务系统的一系列爬取工作已经初步完成,Holi爬虫组的工作也算正式进入优化阶段。 我们需要根据后台组的需要,转换成CVS或数据库形式。需要和后台组进行商量。...

7531
来自专栏DeveWork

制作WordPress“带Gravatar头像评论”小工具(集成主题中、含选项)

最近在进一步折腾WordPress 主题的开发,在侧边栏小工具那里想做一个可独立于主题的、类似插件的带头像评论小工具。通过WordPress 官方文档与一些资料...

2235
来自专栏CaiRui

RAID技术

磁盘阵列(Redundant Arrays of Independent Disks,RAID),有“独立磁盘构成的具有冗余能力的阵列”之意。 磁盘阵列是由很多...

40415
来自专栏后端技术探索

nginx防止DDOS攻击配置(二)

我们用的高防服务器只防流量攻击不防CC,现在的攻击多数都是混合型的,而且CC攻击很多,防CC只能自己搞了,按照第一篇的配置,在实际的使用中效果并不理想。限制每秒...

5062
来自专栏一个会写诗的程序员的博客

yarn详细入门教程Yarn简介一键安装常用命令

Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。就像我们可以从官方文档了解...

3054
来自专栏Java学习123

互联网各种免费接口整理

54311
来自专栏Jack-Cui

Python3网络爬虫(十):这个帅哥、肌肉男横行的世界(爬取帅哥图)

运行平台: Windows Python版本: Python3.x IDE: Sublime text3 1 前言     之前,感觉网上类似于《爬取...

2316
来自专栏FreeBuf

极客DIY:只用两步教你制作一款可编程键盘

对于那些工作时需要与许多组合键打交道的人(比如经常使用Photoshop的人)来说,一款可编程键盘无疑是十分实用的。 本期的DIY将为大家带来一款可编程键盘,其...

2386

扫码关注云+社区

领取腾讯云代金券