关闭

datatable的动态列隐藏按钮及实现方式

3308人阅读 评论(0) 收藏 举报

以下参照datatable中文网api中的例子编写而成。

其中用到的css如下:

.showColumn{
position:relative;
display:inline-block;
z-index:9999;
height:100%;
padding-left:0px;
}
.showColumn  .margin-comm.span-btn{
height:23px;
vertical-align:middle;
display:inline-block;
}
.showColumn .showul{
list-style:none;
display:none;
position:absolute;
left:6px; 
border:1px solid #ccc;
}
.showul ul li{
  width: 115px;
  height: 23px;
  border: 0;
  background: #666464;
}
.showul ul li:hover{
  background: #eef9f9;
  cursor: pointer;
}
.showul ul li input{
  margin-left: 5px;
  vertical-align: middle;
}


1、添加按钮事件

        <div class="showColumn"  style="position:relative;display:inline-block;z-index:9999;height:100%;padding-left:0px;">
                         <!--<span class="margin-comm icon-set" style="width:20px;margin-top:5px;height:20px;vertical-align:middle;display:inline-block;" ></span>
                     <div class="showul" style="list-style:none;display:none; position:absolute;left:6px; border:1px solid #ccc; ">
                      <ul>
                            <!--  <li><input type="checkbox" class="toggle-vis" data-column="2">服务器名称</li>
     <li><input type="checkbox" class="toggle-vis" data-column="3">IP</li>
     <li><input type="checkbox" class="toggle-vis" data-column="4">CPU/内存</li>
     <li><input type="checkbox" class="toggle-vis" data-column="5">数据盘大小</li>
     <li><input type="checkbox" class="toggle-vis" data-column="6">操作系统</li>
     <li><input type="checkbox" class="toggle-vis" data-column="7">状态</li> -->
                        </ul>
                     </div> -->
                        </div> 

2、编写对列的过滤,其中隐藏的列不显示在是否隐藏的菜单中,项目中使用的列使用json数据写好的,方便起见,直接粘贴过来了。

    var contentcolumns = [{
        "sTitle": "选择",
        "sClass": "center",
        "bSortable" : false, // 不排序
        "bVisible": true,
        "render": function (data, type, row) {
            if (type == "display") {
                var location = row.cplLocation;
                var cplServer = row.cplServer;
                var ftp = "",audits = "";
                //所在片库
                if (location.length > 0) {
                    for (var i = 0, len=location.length; i < len; i++) {
                        var flag = i==len-1?"":",";
                        ftp += location[i].ftp.ftpName +flag;
                    }
                }
                //所在影厅
                if(cplServer.length > 0){
                    for (var i = 0,len=cplServer.length; i < len; i++) {
                        var flag = i==len-1?"":",";
                        audits += cplServer[i].number + flag;
                    }
                }
                return '<input type="checkbox" uuid="' + row.UUID  + '" oFtp="'+JSON.stringify(location).replace(/\"/g,"'")
                    + '" audits="'+audits+'" ftp="' + ftp + '" noexitnumber="' + row.noExitNumber + '" cplTitle="' + row.contentTitleText +'">';
            } else {
                return row;
            }
        },
    }, {
        "sTitle": "状态",
        "sClass": "center",
        "sDefaultContent": "",
        "bSortable" : false, // 不排序
        "bVisible": true,
        "render":function(data, type, row){
            if(type == "display"){
                var usedBySPL = row.usedBySPL;
                if(usedBySPL){
                return '<i class="is-has-playlist"></i>';
                }
            }
        }
    }, {
        "sTitle": "加密",
        "sClass": "center",
        "sDefaultContent": "" ,
        "mData":"requiredKdm",
        "bSortable" : false, // 不排序
        "bVisible": true,
        "render":function(data, type, row){
            if(type == "display"){
                return cplIsRequiredKdm(data);
            }
        }
    }, {
        "sTitle": "格式",
        "sClass": "center",
        "sDefaultContent": "",
        "bSearchable": true,
        "mData": "stereoscopic",
        "bSortable" : false, // 不排序
        "bVisible": true,
        "render":function(data, type, row){
            return '<i class="film-'+data.replace(/\D/,"d")+'"></i>';
        }
    }, {
        "sTitle": "标题",
        "sClass": "center",
        "sDefaultContent": "",
        "sWidth":"300px",
        "bSortable" : true, // 排序
        "bVisible": true,
        "mData": "contentTitleText"
    }, {
        "sTitle": "属性",
        "sClass": "center",
        "mData": "attribute",
        "sDefaultContent": "",
        "bSortable" : true, // 排序
        "bVisible": false,
    }, {
        "sTitle": "备注标题",
        "sClass": "center",
        "sDefaultContent": "",
        "bSortable" : true, // 排序
        "bVisible": true,
        "mData": "attachedTitle"
    }, {
        "sTitle": "类型",
        "sClass": "center",
        "sDefaultContent": "",
        "bSearchable": true,
        "bSortable" : true, // 排序
        "bVisible": true,
        "mData": "contentKind"
    }, {
        "sTitle": "创建日期",
        "sClass": "center",
        "mData": "issueDate",
        "sDefaultContent": "",
        "bSortable" : true, // 排序
        "bVisible": false,
    }, {
        "sTitle": "时长",
        "sClass": "center",
        "sDefaultContent": "",
        "bSortable" : true, // 排序
        "bVisible": true,
        "mData": "duration"
    }, {
        "sTitle": "结束时间",
        "sClass": "center",
        "sDefaultContent": "",
        "bSortable" : true, // 排序
        "bVisible": true,
        "mData": "endPoint"
    }, {
        "sTitle": "通道",
        "sClass": "center",
        "sDefaultContent": "",
        "bSortable" : true, // 排序
        "bVisible": true,
        "mData": "macroCaption",
    }, {
        "sTitle": "音量",
        "sClass": "center",
        "sDefaultContent": "",
        "bSortable" : true, // 排序
        "bVisible": false,
        "mData": "volume"
    }, {
        "sClass": "center",
        "sTitle": "所属片库",
        "mData": "cplLocation[0].ftp.ftpName",
        "sDefaultContent": "null",
        "bSortable" : true, // 排序
        "bVisible": false,
        "render": function (data, type, row) {
            if (data) {
                return data.replace(/0/g, ' ');
            }
        }
    }, {
        "sClass": "center",
        "mData": "cplServer[0].number",
        "sTitle": "所属影厅",
        "sDefaultContent": "null",
        "bVisible": false,
        "bSortable" : true, // 排序
        "render": function (data, type, row) {
            if(type == "display"){
                var cplServer =row.cplServer,
                    audits = "";
                if(cplServer.length > 0){
                    for (var i = 0; i < cplServer.length; i++) {
                        audits += cplServer[i].number+ "&nbsp;";
                    }
                }
                return audits;
            }else{
                return data;
            }
        }
    }, {
        "sClass": "center",
        "mData": "UUID",
        "sDefaultContent": "",
        "bSortable" : true, // 排序
        "bVisible": false,
    }, {
        "sTitle": "上传时间",
        "sClass": "center",
        "sDefaultContent": "",
        "bSortable" : true, // 排序
        "bVisible": true,
        "mData": "uploadTime",
        "render":function(data, type, row){
        return data.replace("T"," ");
        }
    }];


3、写个公用方法,对其中列的表头的文字过滤出来,将表头的文字放在按钮点击出来的框中,以下方法的调用时再datatable绘成以后的回调函数中调用,其中的参数是表的列的json数组。

//的回调函数中使用的动态改变列的方法
function cloumsTitle(columJson){
    var insertHtml = '<span class="margin-comm span-btn"><i class="icon-set"></i>显示/隐藏列</span><div class="showul"><ul>';
    for (var i = 1; i < columJson.length; i++){
        if(columJson[i].bVisible){
            var stitle =  columJson[i].sTitle;
            insertHtml += '<li><input type="checkbox" class="toggle-vis" checked=checked data-column="'+i+'"><span style="margin-left:5px;width:30px;overflow:hidden;text-overflow:ellipsis;line-height:23px;">'+stitle+'</span></li>';
        }
    }
    insertHtml +='</ul></div>'; 
    $('.showColumn').html(insertHtml);
}

4、对按钮点击事件的处理。

//隐藏table列的方法

//如果当前的这个弹出框在,就隐藏,否则相反。

//隐藏table列的方法
$(document).on('click', '.showColumn', function(e){
    e.stopPropagation();
    if($('.showul').hide()){
        $('.showul').show();
    } else{
        $('.showul').hide();
    }
 });
//隐藏table列的方法,在选项外点击,打开的选项收起来
$(document).click(function(e) {
    if (!$(e.target).is(".showColumn") && !$(e.target).is(".showul")) {
        $('.showul').hide();
    }
});


5、datatable定义完毕以后,用以下代码实现对datatable表列的隐藏或出现。

 $('.toggle-vis').on('change',function(e){
            e.preventDefault();
            var column = table.api().column($(this).attr('data-column'));
            column.visible(!column.visible());
        });

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:13063次
    • 积分:462
    • 等级:
    • 排名:千里之外
    • 原创:30篇
    • 转载:18篇
    • 译文:2篇
    • 评论:0条
    文章分类