2013-02-25 89 views
1

我想修改創建節點時創建的DOM jstree。以編程方式創建節點時,jstree會創建 <li><a ../></li>。 我想包裝成一個<span><a ../> more content</span>但我不知道如何自定義DOM jstree創建。在jstree中修改創建的節點的DOM

創作初始jstree的是直接的(有一些虛擬數據):比其中創建我想有一個<span><a href="#"><ins class="jstree-icon"></ins>TE-CON</a></span><a href="#"><ins class="jstree-icon"></ins>TE-CON</a>

<li class="jstree-last jstree-open"> 
<ins class="jstree-icon">&nbsp;</ins> 
    <a href="#"><ins class="jstree-icon"></ins>TE-CON</a> 

    <ul style=""> 
     <li class="jstree-open"> 
      etc... 

相反:

$("#tree").jstree({ 
     "json_data": { 
      "data": { 
       "data": "TE-CON", 
       "metadata": { 
        "id": 23 
       }, 
       "children": [ 
        { 
         "data": "Node 1", 
         "children": [ "Node1.1", "Node1.2" ] 
        }, 
        "TE-CON" 
       ] 

      }}, 
     "plugins": [ "themes", "json_data", "grid" ] 
    }); 

此創建DOM在span塊中增加一些額外的HTML。

+2

請告訴我們您的碼。 – kay 2013-02-25 01:13:23

+0

@Kay添加了代碼和結果 – Thies 2013-02-25 14:59:13

回答

0

您可以採用與您提到的相同的方式如果您已經從服務器靜態創建了一個元素。不過,如果你已經創建的元素動態的,你必須執行此操作在創建後的節點是這樣的:

var node = $.jstree._reference('#demo1').create_node(
node, 'last', data, false, false 
); 
var newnode = node.children().last(); 

node.append('<input type="text" ></input>'); 

還有另一種方法是使用html_titles按照該鏈接https://stackoverflow.com/a/5059969/2547372