outlooktree静态初始化的问题，请指点

蛮大人

miniUI 的 tree控件，URL相关的参数必须要webserver支持才能加载；
在本地搭建原型测试时，需要静态html显示（没有webserver配合）；
翻了翻tree控件有个 loaddata(Array)的方法，也看到了对应的demo代码；
比照着写了outlooktree的静态初始化，查了API，使用了load(Array)的方法；数据使用的是demo中对应的outlooktree.txt

1. [
   
2. {id: "user", text: "用户管理"},
   
3. 
   
4. {id: "lists", text: "Lists", pid: "user" },
   
5. 
   
6. {id: "datagrid", text: "DataGrid", pid: "lists"},        
   
7. {id: "tree", text: "Tree" , pid: "lists"},
   
8. {id: "treegrid", text: "TreeGrid " , pid: "lists"},
   
9. 
   
10. {id: "layouts", text: "Layouts", expanded: false, pid: "user"},
    
11. 
    
12. {id: "panel", text: "Panel", pid: "layouts"},
    
13. {id: "splitter", text: "Splitter", pid: "layouts"},
    
14. {id: "layout", text: "Layout ", pid: "layouts"},
    
15. 
    
16. { id: "right", text: "权限管理"},
    
17. 
    
18. {id: "base", text: "Base", expanded: false, pid: "right" },
    
19. 
    
20. {id: "ajax", text: "Ajax", pid: "base"},
    
21. {id: "json", text: "JSON", pid: "base"},
    
22. {id: "date", text: "Date", pid: "base"},
    
23. 
    
24. {id: "forms", text: "Forms", expanded: false, pid: "right"},
    
25. 
    
26. {id: "button", text: "Button", pid: "forms"},
    
27. {id: "listbox", text: "ListBox", pid: "forms"},
    
28. {id: "checkboxlist", text: "CheckBoxList", pid: "forms"},
    
29. {id: "radiolist", text: "RadioList", pid: "forms"},
    
30. {id: "calendar", text: "Calendar", pid: "forms"}        
    
31. ]

复制代码

调用的代码如下：

1. <script type="text/javascript">
   
2.         mini.parse();
   
3. 
   
4.         var tree = mini.get("leftTree");
   
5.         tree.load([
   
6.         {id: "user", text: "用户管理"},               
   
7.         {id: "lists", text: "Lists", pid: "user" },                        
   
8.         {id: "datagrid", text: "DataGrid", pid: "lists"},                        
   
9.         {id: "tree", text: "Tree" , pid: "lists"},
   
10.         {id: "treegrid", text: "TreeGrid " , pid: "lists"},               
    
11.         {id: "layouts", text: "Layouts", expanded: false, pid: "user"},               
    
12.         {id: "panel", text: "Panel", pid: "layouts"},
    
13.         {id: "splitter", text: "Splitter", pid: "layouts"},
    
14.         {id: "layout", text: "Layout ", pid: "layouts"},               
    
15.         { id: "right", text: "权限管理"},               
    
16.         {id: "base", text: "Base", expanded: false, pid: "right" },                                
    
17.         {id: "ajax", text: "Ajax", pid: "base"},
    
18.         {id: "json", text: "JSON", pid: "base"},
    
19.         {id: "date", text: "Date", pid: "base"},               
    
20.         {id: "forms", text: "Forms", expanded: false, pid: "right"},                                
    
21.         {id: "button", text: "Button", pid: "forms"},
    
22.         {id: "listbox", text: "ListBox", pid: "forms"},
    
23.         {id: "checkboxlist", text: "CheckBoxList", pid: "forms"},
    
24.         {id: "radiolist", text: "RadioList", pid: "forms"},
    
25.         {id: "calendar", text: "Calendar", pid: "forms"}                                
    
26. ]);
    
27. 
    
28.     </script>

复制代码

body对应的html如下：

1. <div id="layout1" class="mini-layout" style="width:100%;height:100%;">
   
2.     <div class="header" region="north" height="30" showSplit="false" showHeader="false">
   
3.     </div>
   
4.     <div title="south" region="south" showSplit="false" showHeader="false" height="30" >   
   
5.     </div>
   
6.     <div title="center" region="center" bodyStyle="overflow:hidden;">   
   
7.         <!--Splitter-->
   
8.         <div class="mini-splitter" style="width:100%;height:100%;" borderStyle="border:0;">
   
9.             <div size="180" maxSize="250" minSize="100" showCollapseButton="true">
   
10.                
    
11.                                                                  <!--OutlookTree-->
    
12.                 <div id="leftTree" class="mini-outlookmenu ,mini-outlooktree"   onnodeselect="onNodeSelect"
    
13.                     textField="text" idField="id" parentField="pid"
    
14.                 >
    
15.                 </div>
    
16.                
    
17.                                          
    
18.             </div>
    
19.             <div showCollapseButton="false">
    
20.                 <!--Tabs-->
    
21.                                                                         <div id="mainTabs" class="mini-tabs bg-toolbar" activeIndex="0" style="width:100%;height:100%;"      
    
22.                                                                     bodyStyle="border:0;background:white;"      
    
23.                                                                                 >        
    
24.                                                                     <div title="首页" url="data\tree.txt" >
    
25.                                                                                    
    
26.                                                             </div>
    
27.                                                             
    
28.                                                                 </div>
    
29.             </div>        
    
30.         </div>
    
31.     </div>
    
32. </div>  

复制代码

通过demo中的样子如下：

本地运行实际样子如下



不知道是不是 outlooktree不支持这样的静态调用。请各位指点迷津！

niko

JS设置的话，你数据结构要做成树形的，以children为子节点。
[
   { id: '1', text: '',
     children: [
            ...
     ]
  }
]

蛮大人

niko 发表于 2012-8-20 11:42
JS设置的话，你数据结构要做成树形的，以children为子节点。
[
   { id: '1', text: '',

我使用的是demo中的 url对应的txt的数据结构。
两者处理机制看起来还不一致？

niko

你还是通过url加载把。