如何通过javascript保存和恢复primefaces datatable的过滤状态,并使用costomfilter
How to save and restore filter state of primefaces datatable with costum filter (selectCheckboxMenu) via javascript?
我有一个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());
来选择值,但它不起作用。
解决方案必须在ie11下工作。我使用的是Primefaces 5.2和JSF 2.0。
您可以使用在Primefaces 6.1中实现的新的multiViewState
特性来持久化dataTable
状态。
相关文章:
- 有可能过滤来自嵌入式YouTube的声音吗
- 事件和状态
- 获取选择框的状态
- 相位器状态未捕获参考错误
- 如何更改reactjs中外部/独立组件的状态或属性
- 为什么我的d3.jsselectAll+过滤器没有过滤
- 如何使用密码检测网络中的状态连接
- Ember.js-接口状态应该存储在哪里
- 混合 ui-sref 和 $state.go 在 Angular ui-router 中进行状态转换
- 在Angular 2中布线期间保持零部件处于活动状态
- 在mvc应用程序中,在回发时保留最初隐藏的文本框的隐藏或可见状态
- XMLHttpRequest未返回值-状态202
- 使用javascript反复检查用户在facebook上的登录状态
- 如何使bxslider仅在移动视图中处于活动状态
- 当我想对redux容器中的数据进行排序或过滤时,我该如何查看它的状态
- AngularJS中的状态过滤是什么
- 剑道网格在我转到另一个页面后保持过滤状态
- JQGridtoolbar过滤并恢复具有格式化列的处于编辑状态的行
- 按状态过滤ng-repeat
- 如何通过javascript保存和恢复primefaces datatable的过滤状态,并使用costomfilter