Question

我有一个primefaces数据表，想要用selectCheckboxMenu

过滤它

<p:column filterBy="#{entity.category}" headerText="Category" filterMatchMode="in">

    <f:facet name="filter">
        <p:selectCheckboxMenu label="Category" onchange="PF('datatable').filter()">
            <f:selectItems value="#{bean.categoryOptions}"/>
        </p:selectCheckboxMenu>
    </f:facet>

    <h:outputText value="#{entity.category}" />
</p:column>

过滤器本身效果很好。我可以过滤数据表，在重新加载网站后，也只有过滤后的值。

我的问题是重新加载后数据表的过滤器状态消失了。我看到过滤器工作但我没有看到过滤器在数据表标题中的值。

包含数据表的表单：

<h:form id="form">
    <p:dataTable var="entity" value="#{bean.list}" widgetVar="datatable" filterEvent="enter" id="datatable"
        lazy="true">

        <p:ajax event="filter" process=":form:filters"
            onstart="saveDatatableState()"></p:ajax>

        ... columns ...

    </p:dataTable>

    <h:inputHidden id="filters" value="#{bean.filters}" />
    <h:inputHidden id="page" value="#{bean.page}" />
    <h:inputHidden id="npages" value="#{bean.npages}" />
    <h:inputHidden id="scrollPos" value="#{bean.scrollPos}" />
</form>
<script src="js/DataTableFilterStorage.js" />   
<script> $(function(){ loadDatatableState(); }); </script>

过滤器值通过javascript保存和加载。这些方法位于DataTableFilterStorage.js文件中：

function saveDatatableState(){              
    var filterNormal = $('form .ui-column-filter').serialize();
    var filterCustomText = $('form .ui-column-customfilter .ui-inputfield').serialize()
    if (filterNormal != "" && filterCustomText != "") {
        $(fFilter).val(filterNormal + '&' + filterCustomText);
    } else {
        $(fFilter).val(filterNormal + filterCustomText);
    }
    var page = $('.ui-paginator-page.ui-state-active:first').text();
    if(!page) page = 0;
    var scrollPos = $('body').scrollTop();
    if(!scrollPos) scrollPos = 0;
    $(#page).val(page);
    $(#npages).val($('#yui-pg0-0-rpp').val());
    $(#scrollPos).val(scrollPos);
}

function loadDatatableState(){ 
    var filters = $(#filters).val().split('&');    
    if (filters != ""){
        for(var i = 0; i < filters.length; i++){               
            var f = filters[i].split("=");
            if(f.length != 2 || f[1].length < 1) continue; 
            $('#'+f[0].replace(/%3A/g, '\\:')).val(decodeURIComponent(f[1]).replace('+', ' '));
            //For Dropdown-Menues
            $('#'+f[0].replace(/%3A/g, '\\:') + ' option:selected').val(decodeURIComponent(f[1]).replace('+', ' '));    
        }          
    }      

    var handler = function(e, xhr, settings) {
        if($(#page).val().length > 0 && $(#page).val() != 1){
            var p = $('a.ui-paginator-page[page='+$(#page).val()+']:first');
                if(p.length > 0){
                p.attr('id', 'currentPage');
                var event = document.createEvent("HTMLEvents");
                event.initEvent("click", true, true);
                document.getElementById('currentPage').dispatchEvent(event);
            }
        }
        $(#form).unbind('ajaxComplete', handler);
    };
    $(#form).ajaxComplete(handler);
};

正常文本字段，下拉菜单（单选选项）和输入掩码中的过滤器值已正确保存和加载，但过滤器值构成selectCheckboxMenu不是。

为什么过滤器未正确保存的原因是行$(#filter).val($('form .ui-column-filter').serialize());。它仅保存类型为＆＃34; ui-column-filter＆＃34;的过滤器。 selectCheckboxMenu中的过滤器属于ui-column-customfilter类型。我尝试通过将行更改为$(#filter).val($('form .ui-column-customfilter').serialize());来选择值，但它没有用。

解决方案必须在IE 11下工作。我使用的是Primefaces 5.2和JSF 2.0。

Answer 1

您可以使用Primefaces 6.1中实现的新multiViewState feature来保持dataTable州。

如何通过javascript保存和恢复带有costum过滤器（selectCheckboxMenu）的primefaces数据表的过滤器状态？

1 个答案: