現在、jstree 全体を更新するのに問題があります。最初のツリーの読み込みは正常に機能し、子ノードの更新も期待どおりに機能しますが、ルート ノードでデータが変更された場合、データが変更されてサーバーへの呼び出しが行われたとしても、ツリーは更新されません。
jstreeの設定について説明してみます。
グローバル変数
var levelType;
ツリーのセットアップ
$("#explorer").jstree({
plugins: ["core", "ui", "themes", "json_data", "types"],
themes: {
theme: "default",
dots: false,
url: url = '@Url.Content("~/Content/jstree/default/style.css")'
},
json_data: {
ajax: {
cache: false,
url: function (node) {
var nodeId = "";
var url = "";
if (node == -1) {
url = '@Url.Action("GetSites", "Site")';
} else if ($(node).attr("rel") == "station") {
url = '@Url.Action("GetInspections", "Inspection")' + '/' + $(node).attr("id");
}
return url;
},
success: function (metaData, textStatus, jqXhr) {
if (levelType == null || levelType == undefined || levelType == "root") {
//The initial node that is hard coded and will never change
var sitesData = [{ attr: { rel: "root" }, state: "open", data: "Root Node", children: [] }];
$(metaData).each(function () {
sitesData[0].children.push({ attr: { id: this.Id, rel: "station" }, state: "closed", data: this.Name });
});
return sitesData;
}
if (levelType == "station" || levelType == "inspection") {
var items = [];
$(metaData).each(function () {
items.push({ attr: { id: this.Id, rel: "inspection", "class": "jstree-leaf" }, state: "closed", data: this.Name });
});
return items;
}
return null;
}
}
},
types: {
types: {
"station": {
"icon": {
"image": '@Url.Content("URL")'
}
},
"inspection": {
"icon": {
"image": '@Url.Content("URL")'
}
},
'loading': {
'icon': {
'image': '@Url.Content("URL")'
}
},
'root': {
'icon': {
'image': '@Url.Content("URL")'
}
}
}
}
});
ツリー ノード オープン イベント
$("#explorer").bind("before.jstree", function (e, data) {
if (data.func === "open_node") {
levelType = $(data.args[0]).attr("rel");
}
});
この呼び出しは機能し、期待どおりにステーション レベルの下の子ノードを更新します。
var tree = jQuery.jstree._reference("#explorer");
var currentNode = tree._get_node("#the node Id");
var parent = tree._get_parent(currentNode);
// this returns "inspection"
levelType = $(currentNode).attr("rel");
//the parent node is the station node
tree.refresh(parent);
この呼び出しは機能しませんが、ツリー全体を更新する必要があります
var tree = jQuery.jstree._reference("#explorer");
var currentNode = tree._get_node("#the node id");
//set the level the tree should be refreshing its data for (this is to ensure that the tree view knows it is not at a root node).
var parent = tree._get_parent(currentNode);
//this returns "root"
levelType = $(parent).attr("rel");
tree.refresh(-1);
私を夢中にさせているので、誰かがこれを手伝ってくれることを願っています。
乾杯