我怎样才能最初使用p:columnToggler隐藏ap:dataTable中的列

Question

我正在使用PrimeFaces v.5和这个版本发布一个新组件ColumnToggler,当渲染视图时,刷新所有复选框都被检查为默认操作.

我需要做的是;

• 在初始化视图时取消选中某些列,
• 使p:columnToggler记得检查,未经检查的选项时,刷新操作发生在p:dataTable

Answer 1

在Primefaces 5.2中,您可以将p:column visible属性设置为false

<p:column ... visible="false">

您可以visible通过colum索引在属性中使用EL (重新排序变得更加困难)

<p:column ... visible="#{visibilityModel.visibleList[1]}">

它根据返回值隐藏列的开头,您可以通过columnToggler复选框显示/隐藏列

通过使用ajax切换事件

<p:ajax event="toggle" listener="#{viewBean.onToggle}" />

您可以更新visibilityModel服务器端的状态

public void onToggle(ToggleEvent e) {
    list.set((Integer) e.getData(), e.getVisibility() == Visibility.VISIBLE);
}

有关完整示例,请参阅此PrimeFaces博客条目,以实际保存/存储可见性服务器端的状态,以便以后可以重用它

Answer 2

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

PrimeFaces> = 5.2

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

<5.2的解决方法

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

首先添加styleClass="not-show-at-start"到您希望在javascript render()函数中开始访问的列中;

<!--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>

secondy创建一个javascript文件并在其下面粘贴代码,此函数将重新分配渲染功能 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();
}