Question

我试图点击数据表列，点击更改链接大小字体的列表

Toggle column: <a class="toggle-vis" data-column="0" id="tog-vis-00">ID</a> - 
               <a class="toggle-vis" data-column="1" id="tog-vis-01">Position</a> - 
               <a class="toggle-vis" data-column="2" id="tog-vis-02">Office</a> - 
               <a class="toggle-vis" data-column="3" id="tog-vis-03">Age</a> - 
               <a class="toggle-vis" data-column="4" id="tog-vis-04">Start date</a> - 
               <a class="toggle-vis" data-column="5" id="tog-vis-05">Salary</a>

和隐藏/取消隐藏列的JQuery是

$('a.toggle-vis').on( 'click', function (e) {
        e.preventDefault();

        var column = table.column( $(this).attr('data-column') );
        column.visible( ! column.visible() );
        DrawHideColum();

    } );

我的功能＆＃34; DrawHideColum＆＃34;更改文本的字体大小，以便在列表中找到容易找到的隐藏列。

function DrawHideColum(){
    if (table.columns(0).visible().join(', ') === 'true'){
        $('#tog-vis-00').css("font-weight","bold");
    } else {
        $('#tog-vis-00').css("font-weight", "normal");
    }
    if (table.columns(1).visible().join(', ') === 'true'){
        $('#tog-vis-01').css("font-weight","bold");
    } else {
        $('#tog-vis-01').css("font-weight", "normal");
    }
    ......
}

如果我有100列，如何使用DrawHideColum dinamically？提前谢谢。

Answer 1

如果我理解正确，您只需要更改被点击元素的font-weight属性。您可以在一个功能中执行此操作：

$('a.toggle-vis').on( 'click', function (e) {
    e.preventDefault();

    var column = table.column($(this).attr('data-column'));
    column.visible(!column.visible());

    if(column.visible()) {
        $(e.target).css("font-weight","bold");
    } else {
        $(e.target).css("font-weight","normal");
    }
});

您可以添加一些CSS类，例如：visible-column和hidden-column。然后，可以轻松调用toggleClass()函数来替换丑陋的 if-else 语句：

$('a.toggle-vis').on( 'click', function (e) {
    e.preventDefault();

    var column = table.column($(this).attr('data-column'));
    column.visible(!column.visible());

    $(e.target).toggleClass("visible-column","hidden-column");
});

使用这段代码自动设置所有列的CSS属性：

$('a.toggle-vis').each(function(){
    var column = table.column( $(this).attr('data-column') );

    if(column.visible()) {
        $(e.target).css("font-weight","bold");
    } else {
        $(e.target).css("font-weight","normal");
    }
});

Answer 2

我可能没有正确地暴露这个问题，但最后的功能就是这个......

function DrawHideColum(){         
        var n = 0;

        table.columns().visible().each( function() {
            if (table.columns(n).visible().join(', ') === 'true'){
                $('a[data-column="' + n + '"]').css("font-weight","bold");
            } else {
                $('a[data-column="' + n + '"]').css("font-weight","normal");
            }
            n++;
        });

    }

数据表单击时隐藏列

2 个答案: