我最初如何使用p：columnToggler隐藏p：dataTable中的列 [英] How can I initially hide columns in a p:dataTable with p:columnToggler

问题描述

我使用这个版本的 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.

我需要什么要做的是;

What I need to do is;

• 在初始化视图时取消选中某些列，


• make p：columnToggler 在 p：dataTable

中记住检查和未选中的选项/ ul>

• 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（） function

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

首先添加 styleClass =not-show-at-start到你的列想要在开始访问javascript render（）函数时insvisibe;

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中的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！