在Dynatable中隐藏列

时间:2014-04-14 22:43:51

标签: javascript jquery dynatable

我希望用Dynatable替换我的表,但我需要能够隐藏并显示某些列组才能这样做。我在现有的常规html表中执行此操作,方法是为每个组提供一个组,例如:

<td class = "group1">cell value</td>

然后我有一些隐藏和显示javascript函数:

function hideCol(columnClass){
      $('table .'+columnClass).each(function(index) {
        $(this).hide();
      });

      $('ul#hiddenCols').append('<li id="'+columnClass+'"><a href="javascript:;" onclick="showCol(\''+columnClass+'\');">Show '+columnClass+'</a></li>');
    }

function showCol(columnClass){
  $('table .'+columnClass).each(function(index) {
    $(this).show();
  });

  $('li#'+columnClass).remove();
    }

$(document).ready(function() {
    hideCol("Group2");
    hideCol("Group3");
    hideCol("Group4");

    $('#radio1').click(function() {
    /*$(this).parent().addClass("active").siblings().removeClass("active")*/
        showCol("Group1");        
        hideCol("Group2");
        hideCol("Group3");    
        hideCol("Group4");
    });

有没有一种合理的直接方式我可以让Dynatable做类似的事情?有没有办法可以为每个类和Dynatable分配类?

非常感谢, 亚历

2 个答案:

答案 0 :(得分:0)

有一个设置可以使每列中的数据继承列的标题类。但是,正如我在this question中提到的那样,在执行此操作时,隐藏列的排序似乎存在错误。

我无法使用Dynatable,所以我切换到Datatables,隐藏/排序列似乎更加稳定。

答案 1 :(得分:0)

您可以按如下方式编辑dynatable.js的源代码,然后使用show()和hide()方法......

function DomColumns(obj, settings) {
...
this.hide = function(indexOrId) {
    var columns = settings.table.columns;
    if (typeof indexOrId == "number")
        columns[indexOrId].hidden = true;
    else {
        for (var i = columns.length - 1; i >= 0; i--) {
            if (columns[i].id == indexOrId) {
                 columns[i].hidden = true;
                 break;
            }
        }
    }
    obj.$element.find(settings.table.headRowSelector).children('[data-dynatable-column="' + indexOrId + '"]')
        .first().hide();
    obj.dom.update();
};
this.show = function(indexOrId) {
    var columns = settings.table.columns;
    if (typeof indexOrId == "number")
        columns[indexOrId].hidden = false;
    else {
        for (var i = columns.length - 1; i >= 0; i--) {
            if (columns[i].id == indexOrId) {
                columns[i].hidden = false;
                break;
            }
        }
    }
    obj.$element.find(settings.table.headRowSelector).children('[data-dynatable-column="' + indexOrId + '"]')
    .first().show();
    obj.dom.update();
};
...
};