2016-04-29 157 views
3

在構建MVC 5 Web應用程序的過程中,我在視圖上有一個JSTREE的實例。樹加載罰款,但是當我在數據庫中已經改變索姆數據,並whant重新加載樹我得到的錯誤:JSTREE在第二次加載時失敗

遺漏的類型錯誤:$(...)jstree不是一個函數

這錯誤似乎來不管我用樹做,重新加載,刷新等

什麼失敗的例子:

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

 
$('#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應用程序。

親切KARE

回答

0

我增加了兩個按鈕「全部關閉」和「展開所有」也有類似的問題,並設法通過註釋掉_Layout.cshtml文件jQuery的捆紮線來解決:

@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>