は、私がデータテーブルprimefacesを持っており、フィルタ自体がうまく機能selectCheckboxMenuJavaScriptを使用してcostumフィルタ(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>
でそれをフィルタリングします。私は、datatableをフィルタリングすることができますし、サイトのリロード後にのみフィルタリングされた値もあります。
私の問題は、リロード後、データテーブルのフィルタ状態がなくなったことです。フィルタが機能しているのがわかりますが、データテーブルのヘッダにフィルタの値が表示されません。データテーブルと
形態:
<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である:通常のテキストフィールド、ドロップダウンメニュー(単一選択オプション)とinputmaskから
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を使用しています。