0

FuelEx ツリー コントロールを使用しようとしています。ユーザーがノードを選択したときに、ツリーに各ノードをロードしたくありません。ページがロードされる時点で、ツリー構造全体をロードしたいと思います。ツリー全体の正しいjsonを構築するコントローラーが既に構築されています。

構造全体をプリロードする方法の例はありますか?

私は現在、出発点として以下を使用しようとしています。正しく動作するようになったら、Datasource オブジェクトに変換します。

  $('#myTree').tree({
    dataSource: function(options, callback){

    var self = this;
    var param = null;

    if ("type" in options && options.type == "folder") {
        if ("dataAttributes" in options && "children" in options.dataAttributes) {
            param = options.dataAttributes["id"];
        }
    }

    debugger;
    if (param != null) {
        $.ajax({
            url: "/bundle-picker-data",
            //data: 'id=' + param,
            type: 'GET',
            dataType: 'json',
            success: function (response) {
                        if (response.status == "OK")
                            callback({ data: response.data })
                    },
            error: function (response) {
                console.log(response);
            }
        })
    }


    setTimeout(function () {
        callback({ data: [
            { name: 'Ascending and Descending', type: 'folder', dataAttributes: { id: 'folder1' } },
            { name: 'Sky and Water I (with custom icon)', type: 'item', dataAttributes: { id: 'item1', 'data-icon': 'glyphicon glyphicon-file' } },
            { name: 'Drawing Hands', type: 'folder', dataAttributes: { id: 'folder2' } },
            { name: 'Waterfall', type: 'item', dataAttributes: { id: 'item2' } },
            { name: 'Belvedere', type: 'folder', dataAttributes: { id: 'folder3' } },
            { name: 'Relativity (with custom icon)', type: 'item', dataAttributes: { id: 'item3', 'data-icon': 'glyphicon glyphicon-picture' } },
            { name: 'House of Stairs', type: 'folder', dataAttributes: { id: 'folder4' } },
            { name: 'Convex and Concave', type: 'item', dataAttributes: { id: 'item4' } }
        ]});

    }, 400);
  },
    multiSelect: true,
    cacheItems: true,
    folderSelect: false,
  });
    $('#tree-selected-items').on('click', function () {
        console.log("selected items: ", $('#MyTree').tree('selectedItems'));
    });

    $('#myTree').on('loaded', function (evt, data) {
        console.log('tree content loaded');
    });

    $('#myTree').on('opened', function (evt, data) {
        console.log('sub-folder opened: ', data);
    });

    $('#myTree').on('closed', function (evt, data) {
        console.log('sub-folder closed: ', data);
    });

    $('#myTree').on('selected', function (evt, data) {
        console.log('item selected: ', data);
    });

ありがとう、グレッグ

4

1 に答える 1