jQuery DataTables fixedColumns 动态删除固定列答案

【问题标题】：jQuery DataTables fixedColumns remove fixed columns dynamicallyjQuery DataTables fixedColumns 动态删除固定列
【发布时间】：2014-05-16 16:51:38
【问题描述】：

我正在为我的DataTables 组件使用fixedColumns 插件。我想允许用户从表头切换固定列。

创建固定列很简单：

this.table.fixedColumns = new $.fn.dataTable.FixedColumns(this.table, {
    iLeftColumns: index + 1
});

我想知道，如何更改已创建的 fixedColumns，或者如果我不能，这似乎是这种情况，因为我尝试更新 iLeftColumns 选项并执行 fnUpdate 但没有效果：

this.table.fixedColumns.s.iLeftColumns = 0;
this.table.fixedColumns.fnUpdate();

【问题讨论】：

标签： jquery datatables

【解决方案1】：

正如上面 dykstrad 回答的那样，您可以使用 iLeftColumns 设置更改固定的列数，如下所示：

var fixedColumns = new $.fn.dataTable.FixedColumns(this.table, {
    iLeftColumns: 1
});
fixedColumns.s.iLeftColumns = 3;
fixedColumns.fnRedrawLayout();

但是使用这种方法是不可能删除固定列的，因为你需要隐藏叠加插件产生或一起销毁实例，我决定销毁它，所以我用这个扩展插件：

$.fn.dataTable.FixedColumns.prototype.destroy = function(){
    var nodes = ['body', 'footer', 'header'];

    //remove the cloned nodes
    for(var i = 0, l = nodes.length; i < l; i++){
        if(this.dom.clone.left[nodes[i]]){
            this.dom.clone.left[nodes[i]].parentNode.removeChild(this.dom.clone.left[nodes[i]]);
        }
        if(this.dom.clone.right[nodes[i]]){
            this.dom.clone.right[nodes[i]].parentNode.removeChild(this.dom.clone.right[nodes[i]]);
        }
    }

    //remove event handlers
    $(this.s.dt.nTable).off( 'column-sizing.dt.DTFC destroy.dt.DTFC draw.dt.DTFC' );

    $(this.dom.scroller).off( 'scroll.DTFC mouseover.DTFC' );
    $(window).off( 'resize.DTFC' );

    $(this.dom.grid.left.liner).off( 'scroll.DTFC wheel.DTFC mouseover.DTFC' );
    $(this.dom.grid.left.wrapper).remove();

    $(this.dom.grid.right.liner).off( 'scroll.DTFC wheel.DTFC mouseover.DTFC' );
    $(this.dom.grid.right.wrapper).remove();

    $(this.dom.body).off('mousedown.FC mouseup.FC mouseover.FC click.FC');

    //remove DOM elements
    var $scroller = $(this.dom.scroller).parent();
    var $wrapper = $(this.dom.scroller).closest('.DTFC_ScrollWrapper');
    $scroller.insertBefore($wrapper);
    $wrapper.remove();

    //cleanup variables for GC
    delete this.s;
    delete this.dom;
};

使用这种方法在板上移除和重新应用很简单：

fixedColumns.destroy();

然后从头开始：

var fixedColumns = new $.fn.dataTable.FixedColumns(this.table, {
    iLeftColumns: 3
});

【讨论】：

如何解决这个问题：stackoverflow.com/questions/26436791/…
对我来说，一旦我使用了fixedColumns.destroy();，我就无法重新创建它们。

【解决方案2】：

也许您需要做的是在进行更改后重新绘制表格：

this.table.draw()

【讨论】：

fixedColumns.fnUpdate() 这样做，但它不起作用。我必须将销毁方法编码到插件中，很快就会发布我的自我回答。
@Brock 你有没有找到一个可行的解决方案？动态更新固定列数时，我很难从 0 到 1 以及从 1 到 0
参考我发布的答案

【解决方案3】：

当我执行以下操作时，它对我有用：

设置 leftColumns 和 iLeftColumns
调用 fnUpdate()
调用 fnRedrawLayout()

希望这会有所帮助。

编辑： fnRedrawLayout() 已经调用了 fnUpdate() 所以...

设置 leftColumns 和 iLeftColumns
调用 fnRedrawLayout()

【讨论】：

是的，这与我最终得到的结果非常接近。
@Brock 我发现我的解决方案不完整，你最终得到了什么？我遇到了从 1 个固定列到 0 或 0 个固定列到 1 的问题。
我不得不使用 'destroy' 方法扩展 fixedColumns 插件。在这种方法中，我将删除插件创建的所有克隆并关闭它分配的所有事件处理程序。

【解决方案4】：

var table = $(".your table class name")["1"]
var tableClone = $(".your table class name")["3"]
table.children["1"].children[currentRowId].remove();
tableClone.children["1"].children[currentRowId].remove();

我希望这会对你有所帮助。它不会降低性能，因为它会直接尝试从表中删除行。

【讨论】：