如何使用 p:columnToggler 最初隐藏 p:dataTable 中的列

问题描述

我在此版本中使用 PrimeFaces v.5 发布了一个新组件 ColumnToggler，当视图被渲染时，刷新所有复选框被选中作为默认操作.

I'm using PrimeFaces v.5 with this version a new component is released that ColumnToggler, when view is rendered, refreshed all checkbox are checked as a default operation.

我需要做的是；

• 在初始化视图时取消选中某些列，
• 使 p:columnToggler 在 p:dataTable
上发生刷新操作时记住选中和未选中的选项

• to uncheck some columns when I initialize the view,
• make p:columnToggler remember checked and unchecked options when a refresh operation occurs on p:dataTable

推荐答案

最佳解决方案取决于您使用的 PrimeFaces 版本.

The best solution depends on the PrimeFaces version you are using.

PrimeFaces >= 5.2

请参阅此问题中的其他答案.

See the other answer in this question.

解决方法5.2

您需要通过覆盖 Primefaces 自己的 ColumnToggler.prototype.render() 函数来手动解决第一个问题

You need to solve the first problem manually by overriding Primefaces' own ColumnToggler.prototype.render() function

首先将 styleClass="not-show-at-start" 添加到您想要在开始时隐藏以在 javascript render() 函数中访问的列；

first add styleClass="not-show-at-start" to your column that you want to insvisibe at start to access in javascript render() function;

<!--This column will not be shown at start-->
<p:column headerText="Cloumn to hide initially" width="70" styleClass="not-show-at-start">
    <h:outputText value="#{entityVar.nmProcessOwner}" />
</p:column>

<!--This column will be shown at start-->
<p:column headerText="Column to show initially" width="70">
     <h:outputText value="#{entityVar.nmProcessOwner}" />
</p:column>

然后创建一个javascript文件并粘贴下面的代码，这个函数会重新分配ColumnToggler

secondy create a javascript file and paste code below in it, this function will re assign render function of ColumnToggler

PrimeFaces.widget.ColumnToggler.prototype.render = function() {
    //variable for creating id referance for each checkbox in ColumnToggler
    var id=0;
    this.columns = this.thead.find("> tr > th:visible:not(.ui-static-column)");
    this.panel = $("<div></div>").attr("id", this.cfg.id).addClass("ui-columntoggler ui-widget ui-widget-content ui-shadow ui-corner-all").append('<ul class="ui-columntoggler-items"></ul').appendTo(document.body);
    this.itemContainer = this.panel.children("ul");
    for (var a = 0; a < this.columns.length; a++) {
        id++;
        var b = this.columns.eq(a);
        $('<li class="ui-columntoggler-item"><div class="ui-chkbox ui-widget"><div id="cb'+id /*creating id for each checkbox for accessing later*/+'" class="ui-chkbox-box ui-widget ui-corner-all ui-state-default ui-state-active"><span class="ui-chkbox-icon ui-icon ui-icon-check"></span></div></div><label>' + b.children(".ui-column-title").text() + "</label></li>").data("column", b.attr("id")).appendTo(this.itemContainer);

        //access clumns using class reference(not-show-at-start) created in jsf page
        if(b.hasClass( "not-show-at-start")){
            //access checkbox using id attribute created above and uncheck it
            //this will hide columns that have "not-show-at-start" class
            this.uncheck($('#cb'+id));
        }
    }

    this.hide();
}

这篇关于如何使用 p:columnToggler 最初隐藏 p:dataTable 中的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！