平台开发中的表格

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

相关文章

来自专栏河湾欢儿的专栏

浮动与清除浮动

浮动 float半脱离文档流(对元素,脱离文档流;对内容,在文档流) 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了...

721
来自专栏Guangdong Qi

iOS 计算NSString宽高与计算NSAttributedString的宽高

1833
来自专栏Java技术栈

厉害了,Servlet3的异步处理机制

Servlet3发布好几年了,又有多少人知道它的新特性呢?下面简单介绍下。 主要增加了以下特性: 1、异步处理支持 2、可插性支持 3、注解支持,零配置,可不...

29810
来自专栏岑志军的专栏

iOS动画-定时对UIView进行翻转和抖动

1586
来自专栏菩提树下的杨过

spring cloud 学习(3) - feign入门

默认情况下,spring-boot的redis自动配置,只能注册一个StringRedisTemplate实例,如果希望注入多个,比如:1个读写database...

1828
来自专栏后台及大数据开发

springBoot系列教程03:redis的集成及使用

1.为了高可用,先安装redis集群 参考我的另一篇文章 http://www.cnblogs.com/xiaochangwei/p/7993065.html

733
来自专栏刘晓杰

RN实现头部NavBar

3437
来自专栏24k

spring boot2.0.0 redis序列化解决方案

1594
来自专栏向前进

【笔记】nodejs读取JSON,数组转树

const fs = require('fs'); // --------------- 读取源文件 --------------- const origin...

2334
来自专栏菩提树下的杨过

spring-boot 速成(12) - 如何注入多个redis StringRedisTemplate

默认情况下,spring-boot的redis自动配置,只能注册一个StringRedisTemplate实例,如果希望注入多个,比如:1个读写database...

46510

扫码关注云+社区