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

Question

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

jsfprimefacesprimefaces-datatable

12

我正在使用PrimeFaces v.5，这个版本推出了一个新组件ColumnToggler。当视图呈现时，默认情况下所有复选框都被选中。

我需要做的是：

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

- Ismail Sahin

4个回答

6

最佳解决方案取决于您使用的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>

其次，创建一个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();
}

- Ismail Sahin

是的，但是它在“更新”视图命令中存在问题。当页面更新时，在某些情况下，我尚未理解的所有复选框都变为已选中。 - Ismail Sahin

这个工作！但是有一些问题。比如：

当在datatable中使用多个排序时，切换器不起作用，所有列都可见 :\

你知道这个问题吗？ - Marin

0

补充Damián的回答：

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

这样做可以完成任务，在页面加载后单击列切换器复选框。

@编辑

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

原因：如果使用JavaScript方法“覆盖”primefaces切换器，有时数据表列显示可能在布局中显示错误（例如，超出表格大小，就像我遇到的情况），这就是我决定使用上述方法的原因。

- Simego

1

但是您希望隐藏的特定内容之外的所有内容都需要进行翻译吗？ - Ismail Sahin

这样所有的内容都将被隐藏，我忘了提到你应该指定toggleable="false"来始终显示你想要的内容。 - Simego

希望它有效，解决了我的问题:D现在我可以使用动态表格了^^，PrimeFaces将来应该实现类似这样的功能 :/ - Simego

0

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

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

通过这种方式，在页面加载后，JavaScript 隐藏了由复选框编号 18 引用的列，但复选框仍然存在于列切换器中，用户可以勾选它并再次显示该列。

问候

- Damián

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- John Alexander Betts · Accepted Answer

在Primefaces 5.2中，您可以将p：column的visible属性设置为false。

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

您当然可以通过列索引在visible属性中使用EL（重新排序会变得更加困难）

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

根据返回值，它在开头隐藏列，并且您可以通过columnToggler复选框显示/隐藏列。

通过使用ajax toggle事件

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

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

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

查看此PrimeFaces博客文章，以获取完整示例，以实际在服务器端保留/存储可见性状态，以便稍后重复使用。