平台开发中的表格

  表格在平台开发过程中很重要能够方便的查询使用,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 条评论
登录 后参与评论

相关文章

来自专栏ml

Use of Deep Learning in Modern Recommendation System: A Summary of Recent Works(笔记)

注意:论文中,很多的地方出现baseline,可以理解为参照物的意思,但是在论文中,我们还是直接将它称之为基线, 也就是对照物,参照物. 这片论文中,作者没有...

3699
来自专栏机器学习算法与Python学习

Neural Networks for Machine Learning-2

本文为Neural Networks for Machine Learning的第二次课程(回复关键字"NNML2"下载第二讲的视频与PDF课件) 神经网络使用...

3196
来自专栏CDA数据分析师

机器学习的5种“兵法"

在研究机器学习中,理论在其整个自上而下方法中试用于哪里呢? 在传统的机器学习教学中,丰富的数学理论知识对于理解机器学习是至关重要的,我的机器学习教学方法通常是教...

1777
来自专栏腾讯大数据的专栏

腾讯数平精准推荐 | OCR技术之检测篇

本文将主要介绍数平精准推荐团队的文本检测技术。

5.5K12
来自专栏专知

神经网络可解释性最新进展

【导读】近日,Google在distill发表文章“The Building Blocks of Interpretability” 探讨了特征可视化如何与其他...

3666
来自专栏目标检测和深度学习

腾讯数平精准推荐 | OCR技术之检测篇

在过去的数年中,腾讯数平精准推荐(Tencent-DPPR)团队一直致力于实时精准推荐、海量大数据分析及挖掘等领域的技术研发与落地。特别是在广告推荐领域,团队自...

3594
来自专栏AI科技大本营的专栏

课程 | 工程大咖带你入门深度学习+TensorFlow

《深度学习基础与TensorFlow实践》 AI100学院有幸邀请到《深度学习原理与TensorFlow实践》作者之一、百纳信息公司AI方向负责人王琛老师6月...

3095
来自专栏AI科技大本营的专栏

直播课程 | TensorFlow工程大咖带你由浅入深玩转深度学习算法

王琛老师有话说 ? 《深度学习基础与TensorFlow实践》 AI100学院有幸邀请到《深度学习原理与TensorFlow实践》作者之一、百纳信息公司AI...

3396
来自专栏AI科技评论

学界 | 狗狗视角看世界,用视觉数据预测狗的行为

一种新的 CV 任务! AI 科技评论按:来自华盛顿大学艾伦人工智能研究所的 Kiana Ehsani 团队突破传统计算机视觉的研究任务,尝试从目标对象(例如狗...

3327
来自专栏AI科技评论

当 AI 开始学习艺术创作,我们应该觉得担心吗?

AI 科技评论按:随着深度学习爆发式的成功,算法渐渐的被引入了一个人类认为相对安全的领域 —— 创造引人注目的艺术。

532

扫码关注云+社区