【问题标题】:Primefaces ColumnToggler does'nt work with paginationPrimefaces ColumnToggler 不适用于分页
【发布时间】:2015-04-23 08:30:19
【问题描述】:

我有一个数据表以及排序、过滤器和列切换器。 首先,当我在同一页面中选择和取消选择一列时,一切都很好。

如您所见,我的第一列已经消失了

我的问题是当我使用分页工具转到下一页时,如果我想取消选择一列,它只显示列标题而不显示它们的行,如下所示: 现在显示了最初的隐藏列,但我们有一个差距。最后一列现在是空的,第一列将值带到第二列。

这是我的数据表结构:

<p:dataTable id="datatable" var="mon" value="#{X.resultQuery}" 
                         first="#{dataTableController.first}"
                         resizableColumns="true"
                         rows="20"
                         paginator="true"
                         paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                         rowsPerPageTemplate="30,40,50"
                         draggableColumns="true"
                         paginatorPosition="bottom" 
                         selectionMode="single" rowKey="#{mon[4]}"
                         >   
                <f:facet name="header">
                    <p:commandButton id="toggler" type="button" value="Hide Columns" icon="ui-icon-calculator" />
                    <p:columnToggler datasource="datatable" trigger="toggler">
                        <p:ajax event="toggle"  listener="#{columnTogglerController.onToggle}" />
                    </p:columnToggler>
                </f:facet>

这是我的 ColumnTogglerController :

public class ColumnTogglerController implements Serializable {

private List<Boolean> list;

/**
 * Creates a new instance of ColumnTogglerController
 */
public ColumnTogglerController() {
}

public List<Boolean> getList() {
    return list;
}

public void setList(List<Boolean> list) {
    this.list = list;
}

@PostConstruct
public void init() {
    setList(Arrays.asList(true, true, true, true, true, true, true, true, true, true, true));
}

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

}

}

基本上我的程序是基于这个博客: http://blog.primefaces.org/?p=3341

感谢您的帮助。

【问题讨论】:

    标签: jsf-2 primefaces pagination


    【解决方案1】:

    我最近碰巧遇到这种情况。 blog 确实有效。问题是draggableColumns="true" 使列的索引发生变化。因此,我使用了 2 个地图,而不是列表:

    private final Map<String, Boolean> colVisibilityMap = new HashMap<>();
    private final Map<Integer, String> colIndexMap = new HashMap<>();
    

    在初始化期间,我设置了 colIndexMap 和 colVisibilityMap(我使用了 id/clientId 作为键)。 在列重新排序时,我更新 colIndexMap。 在切换时,我根据 colIndexMap 更新 colVisibilityMap。

    public Map<String, Boolean> getColVisibilityMap() {
        return Collections.unmodifiableMap(colVisibilityMap);
    }
    
    private String getColumnId(String fullId) {
        String[] idParts = fullId.split(":");
        return idParts[idParts.length - 1];
    }
    
    @PostConstruct
    public void init() {
        FacesContext context = FacesContext.getCurrentInstance();
        DataTable table = (DataTable) context.getViewRoot().findComponent(":form:tableid");
        List<UIColumn> columns = table.getColumns();
        for (int i = 0; i < columns.size(); i++) {
            final String columnId = this.getColumnId(columns.get(i).getClientId());
            colIndexMap.put(i, columnId);
            colVisibilityMap.put(columnId, true);
        });
    }
    
    public void onColumnReorder(AjaxBehaviorEvent e) {
        List<UIColumn> columns = ((DataTable) e.getSource()).getColumns();
        for (int i = 0; i < columns.size(); i++) {
            this.colIndexMap.put(i, this.getColumnId(columns.get(i).getClientId()));
        }
    }
    
    public void onToggle(ToggleEvent e) {
        // If we use list here, e.getData() may not be the correct index due to column reordering.
        this.colVisibilityMap.put(this.colIndexMap.get((Integer) e.getData()), e.getVisibility() == Visibility.VISIBLE);
    }
    

    这是我的 JSF 页面上的代码:

    <p:dataTable id="tableid" widgetVar="tableWidgetVar" draggableColumns="true" paginator="true"
    <!-- ommitted other attributes -->
    >
        <p:ajax event="colReorder" listener="#{bean.onColumnReorder}"/>
        <f:facet name="header">
            <p:commandButton id="toggler" type="button" value="Columns"/>
            <p:columnToggler datasource="tableid" trigger="toggler">
                <p:ajax event="toggle" listener="#{bean.onToggle}"/>
            </p:columnToggler>
        </f:facet>
        <p:column id="col1" visible="#{bean.colVisibilityMap['col1']}">
            <!-- ommitted -->
        </p:column>
        <p:column id="col2" visible="#{bean.colVisibilityMap['col2']}">
            <!-- ommitted -->
        </p:column>
        <!-- and so on... -->
    </p:dataTable>
    

    【讨论】:

      猜你喜欢
      • 2016-05-11
      • 2015-07-01
      • 1970-01-01
      • 2021-10-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-04-01
      • 1970-01-01
      相关资源
      最近更新 更多