阻止javascript组件刷新我的整个页面

debugcn 发表于 Dev

帕特里克·索耶（Patrick Sawyer）

我正在将xpabletable.js（在此处阅读http://www.wissel.net/stw/wisselblog.nsf之后）添加到xPages应用程序中。该组件已加载，但是当允许在我的xPage上过滤数据的组件完成时，我会遇到问题，它会刷新整个页面而不是仅刷新图表。

这是该应用程序的演示，您可以看到，当您单击类别的下拉列表时，您可以进行过滤，一旦完成，它就会进行部分刷新以过滤数据。http://nicolas.kruchten.com/pivottable/examples/mps.html

在我的xPage上，当我过滤数据时，它将刷新整个页面。有没有办法防止这种行为？

以下是相关代码。不包括的代码只是从未经修改的项目中获取的，但是如果需要，我可以包括在内。

我在xpage上使用自定义控件

<xc:ccPivot disableTheme="true"></xc:ccPivot></xp:view>

在自定义控件内部没有太多内容。我尝试过在页面底部调用脚本，但是没有任何改变。

  <script type="text/javascript" src="callPivotTable"></script>

 <xp:this.resources>
    <xp:script src="/pivot.js" clientSide="true"></xp:script>
    <xp:styleSheet href="/pivot.css"></xp:styleSheet>

    <xp:script src="/jquery-ui-1.9.2.custom.min.js"
        clientSide="true">
        </xp:script>
        <xp:script src="/d3_renderers.js" clientSide="true"></xp:script>
     </xp:this.resources>

 <div id="output" style="margin: 10px;"></div>

这是callPivotTable脚本

$(function(){
            var derivers = $.pivotUtilities.derivers;

            $.getJSON("./xRest.xsp/restService2", function(mps) {
                $("#output").pivotUI(mps                 

                );
            });
         });

您会注意到，我在这里没有将jQuery称为资源。那是因为我正在使用bootstrap4xpages扩展库来加载jQuery。不知道这是否有所作为。

这是一个可以正常工作的nsf的链接。它正在使用bootstrap扩展库和bootstrapv2.3.2，但会在bootstrap3中很好地加载，并且存在相同的问题。链接到nsf

弗朗蒂斯克·科苏特（Frantisek Kossuth）

无需更改ivot.js代码。当枢纽分析表在表单中呈现时，它根本不起作用。任何小部件刷新都会强制整个表单发布。无法通过代码更改使其工作，因此我已关闭了表单生成，现在它可以按预期运行。

转到XPage属性（“所有属性”标签），然后将属性设置createForm为false。或在源代码中应如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xc="http://www.ibm.com/xsp/custom"
    createForm="false">
    <xp:this.resources>
        <xp:script
            src="/pivot.js"
            clientSide="true">
        </xp:script>
        <xp:styleSheet
            href="/pivot.css"></xp:styleSheet>
        <xp:script
            src="/jquery-ui-1.9.2.custom.min.js"
            clientSide="true">
        </xp:script>
        <xp:script
            src="/jquery.ui.touch-punch.min.js"
            clientSide="true">
        </xp:script>
    </xp:this.resources>
    <xp:scriptBlock>
        <xp:this.value><![CDATA[$( function() {
    $("#output").pivotUI( [ {
        color : "blue",
        shape : "circle"
    }, {
        color : "red",
        shape : "triangle"
    } ], {
        rows : [ "color" ],
        cols : [ "shape" ]
    });
});]]></xp:this.value>
    </xp:scriptBlock>
    <div
        id="output"
        style="margin: 10px;">
    </div>
</xp:view>