4

FuelUX ツリー プラグインを実装しようとしています。これまでの例に従ってきましたが、ネストされた構造が必要です。ツリープラグインはネストされた子を処理できると思いますか? これは正しいです？

  var treeDataSource = new TreeDataSource({
     data: [
        { name: 'Test Folder 1', type: 'folder', additionalParameters: { id: 'F1' },
          data: [
            { name: 'Test Sub Folder 1', type: 'folder', additionalParameters: { id: 'FF1' } },
            { name: 'Test Sub Folder 2', type: 'folder', additionalParameters: { id: 'FF2' } },
            { name: 'Test Item 2 in Folder 1', type: 'item', additionalParameters: { id: 'FI2' } }
          ]
        },
        { name: 'Test Folder 2', type: 'folder', additionalParameters: { id: 'F2' } },
        { name: 'Test Item 1', type: 'item', additionalParameters: { id: 'I1' } },
        { name: 'Test Item 2', type: 'item', additionalParameters: { id: 'I2' } }
      ],
  delay: 400
});

これまでのところ、ネストされたデータ項目ではなく、トップレベルの項目を開いているフォルダーにロードしているようです。これは彼らのサイトのデモでも行われていることですが、これは望ましい相互作用ではないようです。これが予想される動作であるかどうか、誰でも確認できますか?

このプラグインを使用してネストされたデータ ツリーを作成したコードを教えてもらえますか? 私が見逃していることは本当に明らかですか？

4

3 に答える 3

2

私は実際に、まさにこの問題についてブログ投稿を書いているところです。

私が開発した解決策は、気弱な人向けではありません。問題は、folderオブジェクトが子データを使用したインスタンス化をサポートしていないことです。また、子を追加することは簡単な作業ではありません。目標を達成する方法のアイデアを得るために選択できる簡単なフィドルを作成しました。この同じソリューションを使用しているのは、addChildren関数が AJAX を介して MVC ルートを呼び出し、JSON オブジェクトを取得して子を動的に設定することだけです。

文字通り、私のフィドルaddChildrenからコードをコピーして貼り付けて、すぐに使える関数を使い始めることができます。

于 2013-06-07T15:25:16.650 に答える
1

Adam の回答に続いて、ここにあなたが望むことを達成するように見える例があります..

DataSource のデータ関数は、オプションを介して渡された「サブ」データがあるかどうかを確認できます。

DataSource.prototype = {

    columns: function () {
        return this._columns;
    },

    data: function (options, callback) {

        var self = this;
        if (options.search) {
            callback({ data: self._data, start: start, end: end, count: count, pages: pages, page: page });
        } else if (options.data) {
            callback({ data: options.data, start: 0, end: 0, count: 0, pages: 0, page: 0 });
        } else {
            callback({ data: self._data, start: 0, end: 0, count: 0, pages: 0, page: 0 });
        }
    }
};

Bootply のデモ: http://www.bootply.com/60761

于 2013-06-15T22:42:15.793 に答える
1

これに関するドキュメントが不足していて申し訳ありません。確実に改善する必要があります。

dataSourceツリー コントロールをインスタンス化するときに を提供し、そのデータ ソースdataには署名付きの関数 (オプション、コールバック) が必要です。このdata関数は、コントロールの初期化時に呼び出されてルート レベルのデータを設定し、フォルダーがクリックされるたびに再度呼び出されます。

data関数の仕事は、クリックされたフォルダーから入力さjQuery.data()れたオプションパラメーターを調べ、そのフォルダーのデータで応答することです。特殊なケースは初期ルート フォルダー データです。この場合、コントロールのルート div の任意の jQuery.data() からオプションが取り込まれます。存在する場合と存在しない場合があります。

フォルダーの jQuery.data() は、data関数のコールバックで提供するオブジェクトの配列から取り込まれます。この例ではhttps://github.com/ExactTarget/fuelux/blob/master/index.html#L184-L189と呼ばれるプロパティがあることがわかりますが、実際にadditionalParametersは必要以上のプロパティを追加して使用することができます後で (次に関数が呼び出されたとき)、クリックされたフォルダーを特定し、そのフォルダーのデータを返します。nametypedata

現在の例では、すべてのフォルダーに対して同じ静的データが返されますが、これは最良の例ではありません。そのため、自分でチュートリアルを作成するか、誰かが私を打ち負かした場合にリンクすることで、この状況を改善したいと考えています.

于 2013-06-08T12:19:11.483 に答える