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

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());. 它只保存类型为“ui-column-filter”的过滤器。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功能来保持dataTable状态。