平台开发中的表格

  表格在平台开发过程中很重要能够方便的查询使用,bootstrap开发过程中的

用的比较多的是bootstrap-table连接http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/

还有datatables连接http://datatables.club/example/#data_sources,目前用的是第一种,使用中需要注意

的是,第二次请求的可用性以及table的高度合理不要拉两次滚动条实现下拉。

  使用样例代码

html
<div class="widget-box">
        <table id="table"></table>
    </div>
    
js
var $table = $('#table');
    var first = 0;
    $(document).ready(function() {
        document.getElementById("alModelMenu").className = "submenu open";
        document.getElementById("userModel").className = "active";
        $("#queryDataBtn").click(function() {
            var pins =   $.trim($('#pins').val());
            if (pins.replace(/[,;: ;:]/ig,"") == "") {
                $('#pins').focus();
                alert("请输入有效 pin 列表!");
                return ;
            }
            pins = pins.replace(/[,;: ;:]/ig,",");
            $('#pins').val(pins);
            
            var url = "getUserPicture.do?pins="+pins;
            if(first==0){
                first=1;
                var clientHight = document.body.clientHeight*0.38;
                $table.bootstrapTable({
                    url: url,
                    height: clientHight,
                    columns: [ {
                        field: 'pin',
                        title: '用户'
                    }, {
                        field: 'shopOrder',
                        title: '购买店铺'
                    }, {
                        field: 'shopView',
                        title: '查看店铺'
                    }, {
                        field: 'pinCate3Prefer',
                        title: '三级品类偏好'
                    }, {
                        field: 'pinCate2Prefer',
                        title: '二级品类偏好'
                    }, {
                        field: 'pinCatePrefer',
                        title: '二三级偏好混排'
                    } , {
                        field: 'cmPin',
                        title: '移动、pc沉睡用户'
                    } , {
                        field: 'lepin',
                        title: '用户等级'
                    }, {
                        field: 'pinPriBra',
                        title: '偏好价格段'
                    }, {
                        field: 'PinCate3Brand',
                        title: '三级品牌偏好'
                    }, {
                        field: 'realTimePinCate3Prefer',
                        title: '实时三级品类偏好'
                    }, {
                        field: 'realTimePinCate2Prefer',
                        title: '实时二级品类偏好'
                    }, {
                        field: 'pinCate3PreferShort',
                        title: '短期偏好'
                    }, {
                        field: 'disoffLineVTagPrefer',
                        title: '内容偏好'
                    } , {
                        field: 'pinCat3',
                        title: '三级品类购买周期'
                    } , {
                        field: 'pinCate1Prefer',
                        title: '一级品类偏好'
                    } , {
                        field: 'pinCate1PreferLong',
                        title: '长期一级价格品类偏好'
                    } , {
                        field: 'pinCate3PreferVirtual',
                        title: '虚拟品类三级品类偏好'
                    } , {
                        field: 'pinPreferenceShop',
                        title: '实时店铺'
                    }      ]
                });
            }else{
                $table.bootstrapTable('refresh',{url: url});
            }
        });
        
        $("#idPin").click(function(){
            if($("#idPin").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'pin');
            }else{
                $table.bootstrapTable('hideColumn', 'pin');
            }
        });
                $("#idShopOrder").click(function(){
            if($("#idShopOrder").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'shopOrder');
            }else{
                $table.bootstrapTable('hideColumn', 'shopOrder');
            }
        });
        
       $("#idShopView").click(function(){
            if($("#idShopView").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'shopView');
            }else{
                $table.bootstrapTable('hideColumn', 'shopView');
            }
        });
        
    
          $("#idPinPreferenceShop").click(function(){
            if($("#idPinPreferenceShop").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'pinPreferenceShop');
            }else{
                $table.bootstrapTable('hideColumn', 'pinPreferenceShop');
            }
        });
                $("#idPinCate1Prefer").click(function(){
            if($("#idPinCate1Prefer").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'pinCate1Prefer');
            }else{
                $table.bootstrapTable('hideColumn', 'pinCate1Prefer');
            }
        });
        
        $("#idPinCate2Prefer").click(function(){
            if($("#idPinCate2Prefer").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'pinCate2Prefer');
            }else{
                $table.bootstrapTable('hideColumn', 'pinCate2Prefer');
            }
        });
        
       $("#idPinCate3Prefer").click(function(){
            if($("#idPinCate3Prefer").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'pinCate3Prefer');
            }else{
                $table.bootstrapTable('hideColumn', 'pinCate3Prefer');
            }
        });
                $("#idPinCatePrefer").click(function(){
            if($("#idPinCatePrefer").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'pinCatePrefer');
            }else{
                $table.bootstrapTable('hideColumn', 'pinCatePrefer');
            }
        });
        
        $("#idDisoffLineVTagPrefer").click(function(){
            if($("#idDisoffLineVTagPrefer").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'disoffLineVTagPrefer');
            }else{
                $table.bootstrapTable('hideColumn', 'disoffLineVTagPrefer');
            }
        });
        
                        $("#idPinCate1PreferLong").click(function(){
            if($("#idPinCate1PreferLong").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'pinCate1PreferLong');
            }else{
                $table.bootstrapTable('hideColumn', 'pinCate1PreferLong');
            }
        });
                $("#idCmPin").click(function(){
            if($("#idCmPin").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'cmPin');
            }else{
                $table.bootstrapTable('hideColumn', 'cmPin');
            }
        });
        
                        $("#idLepin").click(function(){
            if($("#idLepin").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'lepin');
            }else{
                $table.bootstrapTable('hideColumn', 'lepin');
            }
        });
        
         $("#idPinPriBra").click(function(){
            if($("#idPinPriBra").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'pinPriBra');
            }else{
                $table.bootstrapTable('hideColumn', 'pinPriBra');
            }
        });
        
           $("#idPinCate3Brand").click(function(){
            if($("#idPinCate3Brand").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'PinCate3Brand');
            }else{
                $table.bootstrapTable('hideColumn', 'PinCate3Brand');
            }
        });
        
        $("#idRealTimePinCate2Prefer").click(function(){
            if($("#idRealTimePinCate2Prefer").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'realTimePinCate2Prefer');
            }else{
                $table.bootstrapTable('hideColumn', 'realTimePinCate2Prefer');
            }
        });
        
        $("#idRealTimePinCate3Prefer").click(function(){
            if($("#idRealTimePinCate3Prefer").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'realTimePinCate3Prefer');
            }else{
                $table.bootstrapTable('hideColumn', 'realTimePinCate3Prefer');
            }
        });
        
        $("#idPinCate3PreferShort").click(function(){
            if($("#idPinCate3PreferShort").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'pinCate3PreferShort');
            }else{
                $table.bootstrapTable('hideColumn', 'pinCate3PreferShort');
            }
        });
        
      $("#idPinCat3").click(function(){
            if($("#idPinCat3").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'pinCat3');
            }else{
                $table.bootstrapTable('hideColumn', 'pinCat3');
            }
        });
        
        $("#idPinCate3PreferVirtual").click(function(){
            if($("#idPinCate3PreferVirtual").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'pinCate3PreferVirtual');
            }else{
                $table.bootstrapTable('hideColumn', 'pinCate3PreferVirtual');
            }
        });
        
        //复选框的值.
        $("#all").click(function() {
            if ($(this).attr("checked") == 'checked') { // 全选
                $("input[name='clusters']").each(function() {
                    $(this).attr("checked", "checked");
                    $table.bootstrapTable('showColumn', 'pin');
                });
            } else { // 取消全选
                $("input[name='clusters']").each(function() {
                    $(this).removeAttr("checked");
                    $table.bootstrapTable('hideColumn', 'pin');
                });
            }
        });
        
  });

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏域名资讯

号外号外:喜力公司收购“AppleFox.com”域名

有外媒消息称:又一批域名有了新动态,他们都是哪些域名呢?请往下看

2070
来自专栏域名资讯

康品汇完成A轮融资 据悉使用三拼域名

美团点评发起设立的产业基金龙珠资本,竞技世界参投,领投上海社区生鲜品牌“康品汇”A轮融资,官网域名启用:kangpinhui.com。

760
来自专栏Petrichor的专栏

组装台式机遇坑总结

  早期还写过一篇组装台式机的博客《如何自己组装电脑(从配件到整机)来省下一大笔钱》和一篇选择模组非模组的博客《电源:模组 & 非模组(一个码农眼中的 ...

1422
来自专栏安恒信息

澳政府网站遭黑客袭击,60万份个人资料遭泄露

据报道,一名16岁的澳大利亚青年日前轻易地潜入澳大利亚维多利亚州大众交通(5.76, -0.06,-1.03%)运输网站,并获得了60万份网站用户的个人机密数据...

2596
来自专栏运维技术迷

查询IP地址归属详情

最近经常需要查询IP地址的归属和AS信息,所以就找了一下相关的资讯。目前全球公有三个IP/AS地址管理机构,分别如下: InterNic: 负责美国及其他地...

4105
来自专栏龙行天下CSIEM

科学瞎想系列之七十六 轴电流是个神马鬼(2)

【图片部分来自网络如有侵权敬请邮箱联系。欢迎原文转发到朋友圈,未经许可的媒体平台谢绝转载,如需转载或合作请邮件联系。联系邮箱laolicsiem@126.com...

1223
来自专栏SAP最佳业务实践

从SAP最佳业务实践看企业管理(195)-盘点后的盈亏处理

财产清查的方法有实地盘点法、抽样盘点法、估算法、测量计算法、对账单法、查询法。 对清查结果先放入"待处理财产损溢"查明原因后再转出 (一)存货清查结果的账务处...

3308
来自专栏域名资讯

医鸣数据使用组合域名 融资近亿元

11月17日消息 近日,国中创投投资的近亿元人民币对中国医疗大数据平台医鸣数据进行B轮融资,致远资本担任本轮融资独家财务顾问。

750
来自专栏龙行天下CSIEM

科学瞎想系列之三十七 船舶动力系统(3)

上一篇说了船舶混合动力系统,这篇就说说船舶综合电力系统。所谓船舶综合电力系统就是指全船所有动力能源均采用电力,包括推进动力、辅机动力、军船上某些高能武器...

2784
来自专栏域名资讯

有得卖获近亿元融资 三拼域名给力十足

全品类以旧换新平台“有得卖”今日宣布完成近亿元 B+ 轮融资,投资方为“中国人保”、“启迪控股”合作成立的人保远望基金,人保远望也是其 B 轮投资的...

1886

扫码关注云+社区