2015-07-14 2 views
1

Это несколько неприятная проблема, для которой я не могу найти документацию. Я относительно новичок в jQuery (хотя я понимаю, что он развивается), и я совершенно не знаком с этим плагином jsTree.Ни один из плагинов jstree не работает

Проблема в том, что я не могу получить ЛЮБОЙ из плагинов для работы. Меня привлекало это из-за перетаскивания, контекстного меню и функциональных возможностей флажка, но их просто не происходит. Я не получаю никаких ошибок, я просто не получаю никаких флажков и контекстного меню Chrome по умолчанию. и я не могу ничего перетащить.

jsTree заселяет с помощью AJAX:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>jstree test</title> 
<link rel="stylesheet" href="Styles/style.min.css" /> 
<script src="Scripts/jquery-2.1.4.min.js"></script> 
<script src="Scripts/jstree.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $('#jsTreeTest').jstree({ 
      'core': { 
       'check_callback' : true, 
       'data': { 
        'url': 'Temp/ajax.html', 
        'data': function (node) { 
         return { 'id': node.id }; 
        } 
       } 
      }, 
      'plugins' : [ "checkbox", "dnd", "contextmenu"] 
     }); 
    }); 
</script> 

и знак вверх выглядит следующим образом:

<body> 
    <form id="form1" runat="server"> 
    <div> 
     <div id="jsTreeTest"> 

     </div> 
    </div> 
    </form> 
</body> 

HTML-файл ajax.html содержит следующее:

<ul> 
<li>Test 
    <ul> 
     <li>SubDir1 
      <ul> 
       <li><a href='#'>File1.txt</a></li> 
      </ul> 
     </li> 
     <li>SubDir2 
      <ul> 
       <li>SubSubDir1 
        <ul> 
         <li><a href='#'>File1.txt</a></li> 
         <li><a href='#'>File2.txt</a></li> 
        </ul> 
       <li><a href='#'>File2.txt</a></li> 
       <li><a href='#'>File3.txt</a></li> 
      </ul></li> 
     <li><a href='#'>File4.txt</a></li> 
     <li><a href='#'>File5.txt</a></li> 
    </ul> 
</li> 
</ul> 

В стороне, это также показывает все со значком папки рядом с ним, что является другой вещью, которую я не понимаю. Я пропустил ссылку?

+0

Можете ли вы показать, как и в каком порядке вы включаете внешние файлы '.js' и' .css'? –

+0

уверен ... Я не понимал, что заказ, который вы включили, был действительно важен. –

+0

Заказ должен быть jQuery, а затем файлы jsTree. –

ответ

3

Убедитесь, что вы включили файл css, так как это значительно изменит способ поиска плагина jsTree.

$(document).ready(function() { 
 
     $('#jsTreeTest').jstree({ 
 
      'core': { 
 
       'check_callback' : true, 
 
       
 
      }, 
 
      'plugins' : [ "checkbox", "dnd", "contextmenu"] 
 
     }); 
 
    });
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.1.1/themes/default/style.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.1.1/themes/default-dark/style.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.1.1/jstree.min.js"></script> 
 
<body> 
 
    <form id="form1" runat="server"> 
 
    <div> 
 
     <div id="jsTreeTest"> 
 
<ul> 
 
<li>Test 
 
    <ul> 
 
     <li>SubDir1 
 
      <ul> 
 
       <li><a href='#'>File1.txt</a></li> 
 
      </ul> 
 
     </li> 
 
     <li>SubDir2 
 
      <ul> 
 
       <li>SubSubDir1 
 
        <ul> 
 
         <li><a href='#'>File1.txt</a></li> 
 
         <li><a href='#'>File2.txt</a></li> 
 
        </ul> 
 
       <li><a href='#'>File2.txt</a></li> 
 
       <li><a href='#'>File3.txt</a></li> 
 
      </ul></li> 
 
     <li><a href='#'>File4.txt</a></li> 
 
     <li><a href='#'>File5.txt</a></li> 
 
    </ul> 
 
</li> 
 
</ul> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</body>

0

Я не мог получить флажков или Контекстное, чтобы показать в моем файле Jsp, пока не загружены конкретные JS-файлы для плагинов:

<link href="/js/jstree/themes/default/style.css" rel="stylesheet" type="text/css" /> 
<script src="/js/jstree/jstree.js"></script> 
<script src="/js/jstree/jstree.checkbox.js"></script> 
<script src="/js/jstree/jstree.contextmenu.js"></script> 

Благодарность за совет, который заставил меня попробовать это - я не видел его во всех других сообщениях, которые я видел! Duh!