0

私は xPages アプリケーションに pivottable.js を追加しています (ここでhttp://www.wissel.net/stw/wisselblog.nsfを読んだ後)。コンポーネントはロードされますが、データのフィルタリングを可能にするコンポーネントを 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 を呼び出していないことに気付くでしょう。これは、jQuery をロードする bootstrap4xpages 拡張ライブラリを使用しているためです。それが違いを生むかどうかはわかりません。

これは、作業中の nsf へのリンクです。ブートストラップ拡張ライブラリとbootstrapv2.3.2を使用していますが、同じ問題でbootstrap3に正常にロードされます。 nsf へのリンク

4

1 に答える 1

2

pivot.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>
于 2014-11-25T18:25:56.243 に答える