2013-06-28 24 views
2

我試圖顯示一個包含節和它們包含的頁面的jstree。 我已經爲每個設置了一個類型,但是我無法獲取要更改頁面類型的圖標,它只是一直顯示默認文件夾圖標。jstree - 使用類型插件時無法設置圖標

這是我的javascript:

$('#demo1').jstree({ 
     "themes" : { 
      "theme" : "default", 
      "dots" : false, 
      "icons" : true 
     }, 
     "types" : { 
      "section" : { 
       "max_children" : -1, 
       "max_depth"  : -1, 
       "valid_children": "all", 
       "type_attr"  : "section" 
      }, 
      "page" : { 
       "max_children" : 0, 
       "max_depth"  : -1, 
       "valid_children": "none", 
       "icon" : { 
         "image" : "http://static.jstree.com/v.1.0rc/_docs/_drive.png" 
        }, 
       "type_attr"  : "page" 
      } 
     }, 
     "core" : {"html_titles" : true, "load_open" : true }, 
     "plugins" : [ "themes", "json_data", "ui", "cookies", "crrm", "sort", "types" ], 
     "json_data" : { 
      "ajax" : { 
       "type": 'GET', 
       "url" : function (node) { 

        var url = "" 

        if (node == -1) 
        { 
         url = 'localhost/sections'; 
        } 
        else 
        { 
         url = 'localhost/sections/'+node.attr("id"); 
        } 

        return url; 
       }, 
       "type" : "get", 
       "success" : function(items) { 

        data = [] 

        for (i in items) { 

        var item = items[i] 
        var type; 

        if (JSON.stringify(items[i].root)) { 

         type = "section"; 

         node = { 
         "data" : item.title, 
         "attr" : { "id" : item.id, "rel" : type }, 
         "state" : "closed" 
         } 

        } else { 

         type = "page"; 

         node = { 
         "data" : item.title, 
         "attr" : { "rel" : type }, 
         "state" : "open" 
         } 
        } 

        this.set_type(type, node); 
        data.push(node); 

        } 

       return data; 

      } 
     } 
    } 
}); 

這是由AJAX調用生成的HTML。

<div id="demo1" class="demo jstree jstree-0 jstree-focused jstree-default" style="height:100px;"> 
    <ul class="jstree-no-dots"> 
     <li id="1" rel="section" class="jstree-open"> 
     <ins class="jstree-icon">&nbsp;</ins><a href="#" class="jstree-clicked"><ins class="jstree-icon">&nbsp;</ins>One</a> 
     <ul> 
      <li id="3" rel="section" class="jstree-closed"><ins class="jstree-icon">&nbsp;</ins><a href="#" class=""><ins class="jstree-icon">&nbsp;</ins>One Subsection</a></li> 
      <li rel="page" class="jstree-open jstree-last"><ins class="jstree-icon">&nbsp;</ins><a href="#" class=""><ins class="jstree-icon">&nbsp;</ins>Page in section one</a></li> 
     </ul> 
     </li> 
     <li id="2" rel="section" class="jstree-closed jstree-last"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>Two</a></li> 
    </ul> 
</div> 

任何人都可以看到出了什麼問題嗎?

任何意見讚賞。

感謝

回答

1

不知道這個答案仍然是有用的,但我一直有與jsTree類似的問題,我發現你的問題

阿勒你確定這個配置是正確的?您有:

"types" : { 
     "section" : { 
      "max_children" : -1, 
      "max_depth"  : -1, 
      "valid_children": "all", 
      "type_attr"  : "section" 
     }, 
     "page" : { 
      "max_children" : 0, 
      "max_depth"  : -1, 
      "valid_children": "none", 
      "icon" : { 
        "image" : "http://static.jstree.com/v.1.0rc/_docs/_drive.png" 
       }, 
      "type_attr"  : "page" 
     } 

我覺得應該是

"types" : { 
     "type_attr"  : "rel",   // you can remove this. the rel attribute is the default 
     "types"   : { 
      "section" : { 
       "max_children" : -1, 
       "max_depth"  : -1, 
       "valid_children": "all" 
      }, 
      "page" : { 
       "max_children" : 0, 
       "max_depth"  : -1, 
       "valid_children": "none", 
       "icon" : { 
         "image" : "http://static.jstree.com/v.1.0rc/_docs/_drive.png" 
        } 
      } 
     } 

注意對象的類型包含一些特性(type_attr選項),也包含嵌套Types財產,其中包括每一種類型。

基於我讀過的文檔中,jsTree LIB現在看起來在type_attr並得到該節點的值,並將其在Types.Types

1

對於那些使用這裏3.0比較值的列表,它的不同。

從這個問題:https://github.com/vakata/jstree/issues/497

的類型不讀出rel屬性。嘗試在您的標記使用<li data-jstree='{ "type" : "floor" }'...(並保持外單引號和雙引號 - 裏面的數據jstree屬性).`

所以關鍵是

<li data-jstree='{ "type" : "section" }'>...</li> 
+0

這是與我有關。有用。 – RozzA

相關問題