• [Javascript] 动态隐藏和显示 Layui 数据表格的列


    需求:

      设置一个按钮,动态隐藏或展示数据表格的列。默认隐藏部分列,点击按钮进行显示,再次点击就隐藏。

      基于 layui 的数据表格。

    代码:

      绑定按钮事件。

      这里需要设置的列比较多,表格字段名格式:d1_roi、d1_ltv、d2_roi、d2_ltv...

      原理:先清除每列的 layui-hide 的 class,然后给当前列每个格子加上固定宽度即可。

     1 //拓展列切换
     2         $(".js-showhide").click(function(){
     3             var roi_key = '';
     4             var ltv_key = '';
     5             var roi_cell_key = '';
     6             var ltv_cell_key = '';
     7             var days = [2,4,5,6,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,40,50,60,70,80,90];
     8 
     9             $.each(days, function (key, d) {
    10                 //每一列的 key
    11                 roi_key = "[data-field='d"+d+"_roi']";
    12                 ltv_key = "[data-field='d"+d+"_ltv']";
    13 
    14                 //每个单元格的 类
    15                 roi_cell_key = 'laytable-cell-' + $(roi_key).attr('data-key');
    16                 ltv_cell_key = 'laytable-cell-' + $(ltv_key).attr('data-key');
    17 
    18                 //LTV 列
    19                 if($(ltv_key).hasClass('layui-hide')){
    20                     $(ltv_key).removeClass('layui-hide');
    21                     $('.' + ltv_cell_key).css('width', '70px');
    22                 }else{
    23                     $(ltv_key).addClass('layui-hide');
    24                 }
    25 
    26                 //ROI 列
    27                 if($(roi_key).hasClass('layui-hide')){
    28                     $(roi_key).removeClass('layui-hide');
    29                     $('.' + roi_cell_key).css('width', '70px');
    30                 }else{
    31                     $(roi_key).addClass('layui-hide');
    32                 }
    33             });
    34         });
  • 相关阅读:
    geoserver 地图性能和缓存
    geoserver PostGIS的安装和使用
    geoserver 数据图层输出格式
    Centos7Yum安装配置指定版本nginx
    Centos7Yum安装PHP7.2
    CentOS7 中把默认yum源更换成163源
    安装配置Elasticserch的方法
    redis的持久化(RDB&AOF的区别)
    LayerDate渲染多个class出现闪现问题的解决
    explain分析SQL语句详解
  • 原文地址:https://www.cnblogs.com/reader/p/11655588.html
Copyright © 2020-2023  润新知