6

現在、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);

私を夢中にさせているので、誰かがこれを手伝ってくれることを願っています。

乾杯

4

1 に答える 1

0

ツリーをパーシャルビュー内に配置し、親パーシャルに div を作成し、その div 内にツリーのパーシャル ビューをレンダリングできます。

次に、ツリーを更新するための呼び出しを行うときに、代わりに Json get を renderAction に実行し、親パーテイルのコンテンツをコンテンツ ツリー パーシャルに置き換えることができます。これを行うと、完全に非同期になり、カスタム アニメーションを適用できます。

<div id="parent">
@Html.RenderPartial("tree")
</div>

<script>
$(function)({ 
// this could be any event
$('some id').click(function(){
//this could also be a post, we call the controller action and it returns the
//partialview
$.get("GetTree", function(data){
$('#parent').html(data);
});
});
</script>
于 2013-03-14T09:04:05.043 に答える