jstree 不使用 ASP.NET MVC 4 刷新

Question

我目前无法刷新整个 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);

我希望有人能帮我解决这个问题，因为这让我发疯。

干杯

Answer 1

您可以将树放在局部视图中，在父局部视图上创建一个 div 并将树局部视图呈现在该 div 中。

然后，当您调用刷新树时，您可以改为执行 Json 获取 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>