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

Question

我使用 PrimeFaces v.5 在此版本中发布了一个新组件ColumnToggler，在呈现视图时，刷新所有复选框都会被检查为默认操作。

我需要做的是;

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

Answer 1

在Primefaces 5.2中，您可以将p：列可见属性设置为false

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

你可以通过colum index在visible属性中使用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);
}

有关完整示例，请参阅this PrimeFaces blog entry以实际保存/存储可见性服务器端的状态，以便以后可以重复使用

Answer 2

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

PrimeFaces＆gt; = 5.2

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

＆lt;的解决方法5.2

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

首先将styleClass="not-show-at-start"添加到您希望在javascript render（）函数中开始访问的列中; {/ p>

<!--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的渲染函数

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

Answer 3

另一种解决方案是在加载页面后直接设置要取消选中的复选框。这是一个不太优雅的解决方案，但它的工作原理。我是这样做的：

<h:body onload="javascript: $('.ui-chkbox-box')[18].click();">

通过这种方式，在加载页面后，javascript隐藏了chechbox number 18引用的列，但是columnToggler上仍然存在复选框，供用户检查它，如果他想要再次显示该列。

问候

Answer 4

补充Damián回答：

$(function() {
   $('.ui-columntoggler-items .ui-chkbox .ui-chkbox-box').click();
});

这将完成工作，在页面加载后点击columntoggler chkbox ..

<强> @Edit

您应该将toggleable="false"设置为您不想隐藏的列（始终显示）

原因：如果你使用javascript方法“覆盖”primefaces toggler，有时显示的datatable列可能在布局中显示错误（在表格大小之外，例如，发生在我身上），这就是为什么我决定使用上述方法。