有没有办法在 Primefaces 数据表中捕获 livescroll 事件?
Is there a way to catch livescroll event in a Primefaces Datatable?
我的视图中有一个包含实时滚动的数据表,以及一个 ajax 状态组件。对于大多数组件,我通过设置避免触发 ajax 状态对话框:
<p:ajax event="someEvent" global=false\>
在 ajax 事件中,但我找不到对数据表执行相同操作的方法,因为有 'page' 和 'sort' 事件但没有 'scroll' 事件。有什么想法可以避免这种情况吗?
如果你 'just' 想要实现类似 global="false"
的行为,最简单的方法是 override the relevant function in the PrimeFaces Datatable.js function 并在 [= 的选项中添加 global: false
33=] 在幕后进行的调用。
这可以通过包含以下内容来完成 javascript
PrimeFaces.widget.DataTable.prototype.loadLiveRows: function() {
if(this.liveScrollActive||(this.scrollOffset + this.cfg.scrollStep > this.cfg.scrollLimit)) {
return;
}
this.liveScrollActive = true;
this.scrollOffset += this.cfg.scrollStep;
//Disable scroll if there is no more data left
if(this.scrollOffset === this.cfg.scrollLimit) {
this.shouldLiveScroll = false;
}
var $this = this,
options = {
source: this.id,
process: this.id,
update: this.id,
global: false, /* Added this so the global is not triggered */
formId: this.cfg.formId,
params: [{name: this.id + '_scrolling', value: true},
{name: this.id + '_skipChildren', value: true},
{name: this.id + '_scrollOffset', value: this.scrollOffset},
{name: this.id + '_encodeFeature', value: true}],
onsuccess: function(responseXML, status, xhr) {
PrimeFaces.ajax.Response.handle(responseXML, status, xhr, {
widget: $this,
handle: function(content) {
//insert new rows
this.updateData(content, false);
this.liveScrollActive = false;
}
});
return true;
},
oncomplete: function(xhr, status, args, data) {
if(typeof args.totalRecords !== 'undefined') {
$this.cfg.scrollLimit = args.totalRecords;
}
$this.loadingLiveScroll = false;
$this.allLoadedLiveScroll = ($this.scrollOffset + $this.cfg.scrollStep) >= $this.cfg.scrollLimit;
// reset index of shift selection on multiple mode
$this.originRowIndex = null;
}
};
PrimeFaces.ajax.Request.handle(options);
},
不幸的是,没有办法部分覆盖和重用大部分(全部)现有功能。我认为您可以以全局方式覆盖 global
,因此 ajax 调用不会触发全局状态。不幸的是,我再也找不到关于如何做到这一点的参考。
然而,如果没有 global
设置,您可以通过覆盖 Primefaces.ajax.Request.handle
来覆盖默认行为
handle: function(cfg, ext) {
cfg.ext = ext;
if (PrimeFaces.settings.earlyPostParamEvaluation) {
cfg.earlyPostParams = PrimeFaces.ajax.Request.collectEarlyPostParams(cfg);
}
if(cfg.async) {
PrimeFaces.ajax.Request.send(cfg);
}
else {
PrimeFaces.ajax.Queue.offer(cfg);
}
},
通过在不存在时将 cfg.global
的显式设置添加为 false
var orgHandle = PrimeFaces.ajax.Request.handle;
Primefaces.ajax.Request.prototype.handle = function(cfg, ext) {
var global = (cfg.global === false || cfg.global === undefined) ? false : true;
cfg.global = global;
orgHandle(cfg, ext);
}
任你选。
我的视图中有一个包含实时滚动的数据表,以及一个 ajax 状态组件。对于大多数组件,我通过设置避免触发 ajax 状态对话框:
<p:ajax event="someEvent" global=false\>
在 ajax 事件中,但我找不到对数据表执行相同操作的方法,因为有 'page' 和 'sort' 事件但没有 'scroll' 事件。有什么想法可以避免这种情况吗?
如果你 'just' 想要实现类似 global="false"
的行为,最简单的方法是 override the relevant function in the PrimeFaces Datatable.js function 并在 [= 的选项中添加 global: false
33=] 在幕后进行的调用。
这可以通过包含以下内容来完成 javascript
PrimeFaces.widget.DataTable.prototype.loadLiveRows: function() {
if(this.liveScrollActive||(this.scrollOffset + this.cfg.scrollStep > this.cfg.scrollLimit)) {
return;
}
this.liveScrollActive = true;
this.scrollOffset += this.cfg.scrollStep;
//Disable scroll if there is no more data left
if(this.scrollOffset === this.cfg.scrollLimit) {
this.shouldLiveScroll = false;
}
var $this = this,
options = {
source: this.id,
process: this.id,
update: this.id,
global: false, /* Added this so the global is not triggered */
formId: this.cfg.formId,
params: [{name: this.id + '_scrolling', value: true},
{name: this.id + '_skipChildren', value: true},
{name: this.id + '_scrollOffset', value: this.scrollOffset},
{name: this.id + '_encodeFeature', value: true}],
onsuccess: function(responseXML, status, xhr) {
PrimeFaces.ajax.Response.handle(responseXML, status, xhr, {
widget: $this,
handle: function(content) {
//insert new rows
this.updateData(content, false);
this.liveScrollActive = false;
}
});
return true;
},
oncomplete: function(xhr, status, args, data) {
if(typeof args.totalRecords !== 'undefined') {
$this.cfg.scrollLimit = args.totalRecords;
}
$this.loadingLiveScroll = false;
$this.allLoadedLiveScroll = ($this.scrollOffset + $this.cfg.scrollStep) >= $this.cfg.scrollLimit;
// reset index of shift selection on multiple mode
$this.originRowIndex = null;
}
};
PrimeFaces.ajax.Request.handle(options);
},
不幸的是,没有办法部分覆盖和重用大部分(全部)现有功能。我认为您可以以全局方式覆盖 global
,因此 ajax 调用不会触发全局状态。不幸的是,我再也找不到关于如何做到这一点的参考。
然而,如果没有 global
设置,您可以通过覆盖 Primefaces.ajax.Request.handle
handle: function(cfg, ext) {
cfg.ext = ext;
if (PrimeFaces.settings.earlyPostParamEvaluation) {
cfg.earlyPostParams = PrimeFaces.ajax.Request.collectEarlyPostParams(cfg);
}
if(cfg.async) {
PrimeFaces.ajax.Request.send(cfg);
}
else {
PrimeFaces.ajax.Queue.offer(cfg);
}
},
通过在不存在时将 cfg.global
的显式设置添加为 false
var orgHandle = PrimeFaces.ajax.Request.handle;
Primefaces.ajax.Request.prototype.handle = function(cfg, ext) {
var global = (cfg.global === false || cfg.global === undefined) ? false : true;
cfg.global = global;
orgHandle(cfg, ext);
}
任你选。