0

カテゴリ ツリーの表示/管理にjstreeを使用しています。Ajax 呼び出しでツリーをフェッチすると、次の応答が返されます。

0: {id:35, name:amrs trade, parent_id:null}
1: {id:36, name:trips, parent_id:35}
2: {id:37, name:tribute, parent_id:null}
3: {id:38, name:music, parent_id:null}
4: {id:39, name:recordings, parent_id:38}
5: {id:40, name:live shows, parent_id:38}
6: {id:41, name:others, parent_id:null}
7: {id:42, name:investments, parent_id:null}
8: {id:43, name:gold & silver, parent_id:42}
9: {id:44, name:debentures, parent_id:42}
10: {id:46, name:production, parent_id:35}
11: {id:54, name:real estate, parent_id:42}

オプションを使用json_dataして jstree をレンダリングしています。

$("#incomeCategoryTree").jstree({
    "json_data" : {
        "data" : income,
        "progressive_render" : true
    },
    "plugins" : [ "themes", "json_data" ]
})
.bind("open_node.jstree close_node.jstree", function (e) {
    console.log(e);
});

ユーザーが行った各アクション (ツリー ノードを開いたり閉じたり) を記憶したいので、アクションopen_nodeとclose_nodeアクションの両方をバインドします。私が抱えている問題は、クリックされたばかりのノードに関する情報がイベントにないことです。

.Event {type: "open_node", timeStamp: 1365192438814, jQuery183029903660411946476: true, isTrigger: true, exclusive: undefined…}

currentTarget: div#incomeCategoryTree.jstree jstree-0 jstree-default jstree-focused
data: null
delegateTarget: div#incomeCategoryTree.jstree jstree-0 jstree-default jstree-focused
exclusive: undefined
handleObj: Object
isTrigger: true
jQuery183029903660411946476: true
namespace: "jstree"
namespace_re: /(^|\.)jstree(\.|$)/
result: undefined
target: div#incomeCategoryTree.jstree jstree-0 jstree-default jstree-focused
timeStamp: 1365192438814
type: "open_node"
__proto__: Object

私は行方不明だと思いますが、jstreeのドキュメントは非常に貧弱で、ほとんどのオプションは言及されていません...

4

1 に答える 1

2

私は次のことを行うことができました：

$("#incomeCategoryTree").jstree({
    "json_data" : {
        "data" : income,
        "progressive_render" : true
    },
    "plugins" : [ "themes", "json_data" ]
})
.bind("open_node.jstree close_node.jstree", function (event, data) {
    var state = event.type == "open_node" ? "open" : "closed";
    IncomeCategoryControl.setState(data.rslt.obj.attr("id"), state)
});

これはツリーデータを管理するオブジェクトです

var IncomeCategoryControl = {
    data: null,
    fetchData: function() {
        $.ajax({
            type: "GET",
            dataType: "json",
            context: this,
            async: false,
            url: "../php/client/json.php",
            data: {
                type: "incomeCategories"
            }
        }).done(function(response) {
            this.data = response;
        });
    },
    getData: function() {
        if (this.data == null) {
            this.fetchData();
        }
        return this.data;
    },
    setState: function(id, value) {
        var found = $(this.getData()).map(function() {
            return (this.id == id) ? this : null;
        });
        if (found.length) {
            found[0].state = value;
            return true;
        } else {
            return false;
        }
    }
};
于 2013-04-05T21:40:31.310 に答える