html表格自定义显示列

后台统计，有个表，有60个字段要显示。这时如果页面一次性全部展示出来，大部分屏幕可能不够宽度。

这时就需要固定表格列，但如果只是固定列，太多列了还是比较难查看自己需要的列，这时比较优的方案是，每个账号可以选择显示哪些列显示隐藏。

http://www.layui.com/demo/table/fixed.html

固定表格列

前端实现固定表格列，有很多插件框架实现，这里主要讲下，配合后端实现整个交互逻辑。

相关技术点

1. 固定表格列
2. 字段选择穿梭框
3. 数据库保存隐藏字段

固定表格列，这里用插件layui

http://www.layui.com/demo/table/fixed.html

字段选择穿梭框，使用 bootstrap的双边栏选择框

http://www.jq22.com/jquery-info15984

image.png

数据库保存隐藏字段，这个搭建用任何后端语言都可以实现，这里用PHP。

代码，穿梭框与后端实现交互

function getData(){
    return new Promise(function(resolve, reject){
    $.getJSON('/admin/ad/getField', {}, function (res) {
        field = res.tableFile
        console.log(res);
        resolve(res);
        //reject(
    })
    });
}



getData().then(function(res){
field = res.tableFile
$(document).ready(function () {
var demo2 = $('.demo').doublebox({
nonSelectedListLabel: '显示列',
selectedListLabel: '隐藏列',
preserveSelectionOnMove: 'moved',
moveOnSelect: false,
nonSelectedList: res.show,
selectedList: res.hide,
optionValue: "field",
optionText: "fieldName",
doubleMove: true,
});

layui.use('table', function () {
var table = layui.table;
var w = document.body.scrollWidth - 50;
var h = document.body.scrollHeight - 390;
table.render({
    elem: '#test',
    limit: 10
    , url: '/admin/ad/getData?Ad[type]='+<?php echo isset($_GET['Ad']['type'])?intval($_GET['Ad']['type']):1 ?>
    , width: w
    , height: h
    , cols: [field]
    , page: true
});
});

})

});     

后台API返回对应的显示列，即可，格式如下

{
    "show":[
        {
            "field":"date",
            "fieldName":"时间"
        },
        {
            "field":"clientName",
            "fieldName":"广告主名称"
        },
        {
            "field":"adId",
            "fieldName":"广告id"
        },
        {
            "field":"adName",
            "fieldName":"广告名称"
        },
        {
            "field":"order_roi",
            "fieldName":"下单ROI"
        },
        {
            "field":"quest_reservation_pv",
            "fieldName":"销售线索量"
        }
    ],
    "hide":[
        {
            "field":"contract_flag",
            "fieldName":"购买类型"
        },
        {
            "field":"pos_type",
            "fieldName":"广告位"
        },
        {
            "field":"convclk_pv",
            "fieldName":"可转化点击次数"
        },
        {
            "field":"convclk_cpc",
            "fieldName":"可转化点击成本"
        },
        {
            "field":"clk_pv",
            "fieldName":"点击人数"
        },
        {
            "field":"exp_pv_avg",
            "fieldName":"人均曝光次数"
        },
        {
            "field":"img_uv",
            "fieldName":"图片点击人数"
        },
        {
            "field":"play_pv",
            "fieldName":"视频点击次数"
        },
        {
            "field":"play_uv",
            "fieldName":"视频点击人数"
        },
        {
            "field":"detail_pv",
            "fieldName":"文字链点击次数"
        },
        {
            "field":"ios_act_pv",
            "fieldName":"IOS激活次数"
        },
        {
            "field":"download_complete_pv",
            "fieldName":"APP下载完成次数"
        },
        {
            "field":"install_complete_pv",
            "fieldName":"APP安装完成次数"
        },
        {
            "field":"app_act_pv",
            "fieldName":"APP激活次数"
        },
        {
            "field":"app_reg_pv",
            "fieldName":"APP注册次数"
        },
        {
            "field":"app_addtocart_pv",
            "fieldName":"APP加入购物车次数"
        },
        {
            "field":"app_purchase_pv",
            "fieldName":"APP付费次数"
        },
        {
            "field":"card_use_pv",
            "fieldName":"卡券使用次数"
        },
        {
            "field":"share_page_pv",
            "fieldName":"广告分享次数"
        },
        {
            "field":"share_page_uv",
            "fieldName":"广告分享人数"
        },
        {
            "field":"nointerest_pv",
            "fieldName":"不感兴趣点击次数"
        }
    ],
    "tableFile":[
        {
            "field":"date",
            "width":140,
            "title":"时间",
            "fixed":"left"
        },
        {
            "field":"clientName",
            "width":140,
            "title":"广告主名称",
            "fixed":"left"
        },
        {
            "field":"adId",
            "width":100,
            "title":"广告id",
            "fixed":"left"
        },
        {
            "field":"adName",
            "width":140,
            "title":"广告名称",
            "fixed":"left"
        },
        {
            "field":"balance",
            "width":140,
            "title":"余额",
            "fixed":"left"
        },
        {
            "field":"quest_reservation_pv",
            "width":100,
            "title":"销售线索量"
        }
    ]
}

最终演示效果

QQ20180626-170547.gif