JSTREE терпит неудачу при второй загрузке

Я создаю веб-приложение MVC 5, где у меня есть экземпляр JSTREE в представлении. Дерево загружается нормально, но когда я изменил некоторые данные в базе данных и хочу перезагрузить дерево, я получаю ошибки:

Uncaught TypeError: $(...).jstree не является функцией

Эта ошибка, кажется, связана с тем, что я делаю с деревом, перезагружаю, обновляю и т. Д.

Пример того, что не получается:

$("#tree")
    .jstree({
	    "core": {
		    "data": [{ text : "node", "children" : ["1","2"] }]
		}
	});

$('#rfr')
    .on("click", function (e, data) {
        $("#tree").jstree(true).deselect_all();
        $("#tree").jstree(true).refresh();
        $("#tree").jstree("refresh");
    });
@{
    ViewBag.Title = "OrgAdmin";
}


<script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jstree.js")" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="@Url.Content("~/Scripts/themes/default/style.min.css")">

<div id="tree"></div>
<button id="rfr">refresh</button>

Я взял код из рабочей скрипки: http://jsfiddle.net/DGAF4/30/ здесь обновление работает, но при копировании в мое приложение mvc происходит сбой

Надеюсь, вы поможете мне обновить это дерево в моем приложении mvc.

любезно Коре


javascript jquery asp.net-mvc-5 jstree
person Kåre Rasmussen    schedule 29.04.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

У меня была аналогичная проблема с добавлением двух кнопок для "Закрыть все" и "Развернуть Все", и мне удалось решить ее, закомментировав строку связывания jquery в файле _Layout.cshtml:

@Scripts.Render("~/bundles/jquery")

Судя по всему, похоже, что исходный код дважды включал ссылку на jquery: одну в файле _Layout.cshtml и одну в файле моего представления. Как только я удалил пакет jquery, он заработал нормально. Думаю, мне нужно явно добавить ссылки jquery в другие представления. Надеюсь, это поможет.

Вот код просмотра:

@using OrgChart.Models;
@using OrgChart.Controllers;
@model IEnumerable<TreeNode>
@{  ViewBag.Title = "Home Page";}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.1/jstree.min.js"></script>

<script type="text/javascript">
    jQuery(function ($) {
        var $treeview = $("#treeview");
        $treeview.jstree({
            "core": { // core options go here
                "multiple": false, // no multiselection
                "themes": {
                    "dots": false // no connecting dots between dots
                }
            },
            "state": { "key": "state_demo" },
            "plugins": ["themes", "html_data"]
        })
        //.on('ready.jstree', function () {
        //    $treeview.jstree('open_all');
        //});
    });
</script>

<br/>
<input id="btnCloseAll" type="button" value="Collapse All" onclick="$('#treeview').jstree('close_all');"> &nbsp;
<input id="btnExpandAll" type="button" value="Expand All" onclick="$('#treeview').jstree('open_all');">
<br /><br />
<div class="row">
    <div id="treeview" class="treeview">
        @MvcHtmlString.Create(Html.RenderTree(ViewData.Model, node => node.Name))
    </div>
</div>
person Riverway    schedule 19.05.2016