jQuery DataTables fixedColumns动态删除固定列

Question

我正在为我的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();

Answer 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
});