Xpages 将事件附加到数据视图中寻呼机的部分刷新
Xpages attach event to partial refresh of pager in Data View
在 中,我询问了如何将 bootstrap class 添加到数据视图。答案是在脚本块中将 class 添加到 "table.dataview"。创建 table 后,应用 class,一切正常。
但是当我使用寻呼机时,格式消失了。我在寻呼机上使用部分刷新来仅刷新数据 table,但这样做意味着 bootstrap class 不会应用于 table。
我认为我需要添加一个事件处理程序,它将附加到 dataView 的刷新操作以添加 class。但是我无法让事件处理程序工作。
我的事件处理程序代码如下。
<xp:eventHandler refreshMode="partial" submit="true"
id="applyCSS" refreshId="dataView1" event="parialRefresh"
value="what" loaded="false">
<xp:this.binding><![CDATA[#{javascript:"pager1"}]]></xp:this.binding>
<xp:this.action><![CDATA[#{javascript:("table.dataview").addClass("table-striped table-hover table-bordered table-condensed")}]]></xp:this.action>
</xp:eventHandler>
Oliver,rendered=false 只是一个打字错误 - 我正在测试一些东西,需要暂时取消它。
奥利弗和保罗,
昨晚我能够让部分刷新工作。
I 运行 across this post by Mark Roden 这解释了如何去做。有两种不同的方法可以实现这一点,一种更少,一种更有效。我使用的代码如下。
<xp:scriptBlock id="scriptBlock3">
<xp:this.value><![CDATA[$('.dataView1PanelWrapper').on("DOMNodeInserted", function(){
$("table.dataview").addClass("table-striped table-hover table-bordered table-condensed")
})]]></xp:this.value>
</xp:scriptBlock>
然而,在 Xpages 中几乎总是没有,但是在视图中我有一些 sortable 列,单击排序会出现同样的问题!我输了 class 作业!
所以现在我也必须拦截那个事件,对吧?
担心这将在哪里结束。不喜欢 DOM 操纵的想法,只有在我也有操纵的情况下才想这样做。
我从一个简单的视图开始。它工作得很好,但由于某种原因,传呼机中的间距被弄乱了。我发现通过将寻呼机移出视图本身,我能够解决对齐问题。我认为只使用视图会更好,因为我可以直接分配 class 而不必进行所有这些操作。然而,很高兴知道如何为将来做到这一点。
这是你的建议吗?
============================================= =====
我已经使用输出脚本尝试了 Paul Withers 的建议。这适用于初始页面加载,但不适用于数据视图的任何其他更改 - 当寻呼机触发或排序或任何其他更改时。我很接近,但还没有雪茄。有什么建议吗?
<xp:scriptBlock id="scriptBlock5" loaded="false">
<xp:this.value><![CDATA[dojo.require("dojo.behavior");
Behavior = {
".dataview": {
found: function(node) {
dojo.addClass(node,".table-striped table-hover table-bordered table-condensed");
//node.addClass("table-striped table-hover table-bordered table-condensed");
}
}
}
dojo.ready(function() {
dojo.behavior.add(Behavior);
dojo.behavior.apply();
});
//Make sure that future pagers are also straightened out
dojo.subscribe("partialrefresh-complete", null, function(method, form, refreshId) {
dojo.behavior.apply();
});]]></xp:this.value>
</xp:scriptBlock>
你应该调用你的 CSJS 东西在事件处理程序的 onComplete 属性 中添加 class - 很难找到,只需在源代码或大纲中突出显示事件处理程序对象然后打开"All properties" 找到 "onComplete" 属性。此事件允许调用 CSJS。
顺便说一句:为什么加载的 属性 = false?我们永远不会渲染该事件。
dojo.behavior
、dojo.ready
和 dojo.subscribe
应该允许您管理它。 dojo.behavior
允许您为将通过 Dojo 查询检索的特定元素集合定义特定行为。 dojo.ready
将(我相信)运行 页面初始加载时的代码,dojo.subscribe("partialrefresh-complete", null, function(method, form, refreshId) {...}
将 运行 部分刷新后的代码。
这是我用于将 DataView 的类别列图像转换为 Font Awesome 图标的示例代码,因此 Behavior = {...}
位需要修改。
Behavior = {
// Convert xp:pagers to Bootstrap
".catColumn a img": {
found: function(img_node) {
var imgSrc = dojo.getNodeProp(img_node, "alt").toLowerCase();
if (imgSrc.indexOf("collapse") >= 0) {
dojo.place('<i class="fa fa-minus-square"></i> ', img_node, 'replace');
} else {
dojo.place('<i class="fa fa-plus-square"></i> ', img_node, 'replace');
}
}
}
}
dojo.ready(function() {
dojo.behavior.add(Behavior);
dojo.behavior.apply();
});
//Make sure that future pagers are also straightened out
dojo.subscribe("partialrefresh-complete", null, function(method, form, refreshId) {
dojo.behavior.apply();
});
将您现有的 xp:scriptBlock 与 xe:dataView 的一个方面内的工作代码一起移动。然后样式将应用于初始加载和所有部分刷新。
在
但是当我使用寻呼机时,格式消失了。我在寻呼机上使用部分刷新来仅刷新数据 table,但这样做意味着 bootstrap class 不会应用于 table。
我认为我需要添加一个事件处理程序,它将附加到 dataView 的刷新操作以添加 class。但是我无法让事件处理程序工作。
我的事件处理程序代码如下。
<xp:eventHandler refreshMode="partial" submit="true"
id="applyCSS" refreshId="dataView1" event="parialRefresh"
value="what" loaded="false">
<xp:this.binding><![CDATA[#{javascript:"pager1"}]]></xp:this.binding>
<xp:this.action><![CDATA[#{javascript:("table.dataview").addClass("table-striped table-hover table-bordered table-condensed")}]]></xp:this.action>
</xp:eventHandler>
Oliver,rendered=false 只是一个打字错误 - 我正在测试一些东西,需要暂时取消它。
奥利弗和保罗,
昨晚我能够让部分刷新工作。
I 运行 across this post by Mark Roden 这解释了如何去做。有两种不同的方法可以实现这一点,一种更少,一种更有效。我使用的代码如下。
<xp:scriptBlock id="scriptBlock3">
<xp:this.value><![CDATA[$('.dataView1PanelWrapper').on("DOMNodeInserted", function(){
$("table.dataview").addClass("table-striped table-hover table-bordered table-condensed")
})]]></xp:this.value>
</xp:scriptBlock>
然而,在 Xpages 中几乎总是没有,但是在视图中我有一些 sortable 列,单击排序会出现同样的问题!我输了 class 作业!
所以现在我也必须拦截那个事件,对吧?
担心这将在哪里结束。不喜欢 DOM 操纵的想法,只有在我也有操纵的情况下才想这样做。
我从一个简单的视图开始。它工作得很好,但由于某种原因,传呼机中的间距被弄乱了。我发现通过将寻呼机移出视图本身,我能够解决对齐问题。我认为只使用视图会更好,因为我可以直接分配 class 而不必进行所有这些操作。然而,很高兴知道如何为将来做到这一点。
这是你的建议吗?
============================================= ===== 我已经使用输出脚本尝试了 Paul Withers 的建议。这适用于初始页面加载,但不适用于数据视图的任何其他更改 - 当寻呼机触发或排序或任何其他更改时。我很接近,但还没有雪茄。有什么建议吗?
<xp:scriptBlock id="scriptBlock5" loaded="false">
<xp:this.value><![CDATA[dojo.require("dojo.behavior");
Behavior = {
".dataview": {
found: function(node) {
dojo.addClass(node,".table-striped table-hover table-bordered table-condensed");
//node.addClass("table-striped table-hover table-bordered table-condensed");
}
}
}
dojo.ready(function() {
dojo.behavior.add(Behavior);
dojo.behavior.apply();
});
//Make sure that future pagers are also straightened out
dojo.subscribe("partialrefresh-complete", null, function(method, form, refreshId) {
dojo.behavior.apply();
});]]></xp:this.value>
</xp:scriptBlock>
你应该调用你的 CSJS 东西在事件处理程序的 onComplete 属性 中添加 class - 很难找到,只需在源代码或大纲中突出显示事件处理程序对象然后打开"All properties" 找到 "onComplete" 属性。此事件允许调用 CSJS。
顺便说一句:为什么加载的 属性 = false?我们永远不会渲染该事件。
dojo.behavior
、dojo.ready
和 dojo.subscribe
应该允许您管理它。 dojo.behavior
允许您为将通过 Dojo 查询检索的特定元素集合定义特定行为。 dojo.ready
将(我相信)运行 页面初始加载时的代码,dojo.subscribe("partialrefresh-complete", null, function(method, form, refreshId) {...}
将 运行 部分刷新后的代码。
这是我用于将 DataView 的类别列图像转换为 Font Awesome 图标的示例代码,因此 Behavior = {...}
位需要修改。
Behavior = {
// Convert xp:pagers to Bootstrap
".catColumn a img": {
found: function(img_node) {
var imgSrc = dojo.getNodeProp(img_node, "alt").toLowerCase();
if (imgSrc.indexOf("collapse") >= 0) {
dojo.place('<i class="fa fa-minus-square"></i> ', img_node, 'replace');
} else {
dojo.place('<i class="fa fa-plus-square"></i> ', img_node, 'replace');
}
}
}
}
dojo.ready(function() {
dojo.behavior.add(Behavior);
dojo.behavior.apply();
});
//Make sure that future pagers are also straightened out
dojo.subscribe("partialrefresh-complete", null, function(method, form, refreshId) {
dojo.behavior.apply();
});
将您现有的 xp:scriptBlock 与 xe:dataView 的一个方面内的工作代码一起移动。然后样式将应用于初始加载和所有部分刷新。