jQuery MiniUI

标题: outlooktree静态初始化的问题，请指点 [打印本页]
作者: 蛮大人    时间: 2012-8-20 11:18:35     标题: outlooktree静态初始化的问题，请指点

本帖最后由 蛮大人 于 2012-8-20 11:19 编辑

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

  4. {id: "lists", text: "Lists", pid: "user" },

  6. {id: "datagrid", text: "DataGrid", pid: "lists"},        
  7. {id: "tree", text: "Tree" , pid: "lists"},
  8. {id: "treegrid", text: "TreeGrid " , pid: "lists"},

  10. {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"},

  16. { id: "right", text: "权限管理"},

  18. {id: "base", text: "Base", expanded: false, pid: "right" },

  20. {id: "ajax", text: "Ajax", pid: "base"},
  21. {id: "json", text: "JSON", pid: "base"},
  22. {id: "date", text: "Date", pid: "base"},

  24. {id: "forms", text: "Forms", expanded: false, pid: "right"},

  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();

  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. ]);

  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中的样子如下：
[attach]362[/attach]
本地运行实际样子如下

[attach]363[/attach]

不知道是不是 outlooktree不支持这样的静态调用。请各位指点迷津！
作者: niko    时间: 2012-8-20 11:42:24

JS设置的话，你数据结构要做成树形的，以children为子节点。
[
   { id: '1', text: '',
     children: [
            ...
     ]
  }
]
作者: 蛮大人    时间: 2012-8-20 14:08:47

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

我使用的是demo中的 url对应的txt的数据结构。
两者处理机制看起来还不一致？
作者: niko    时间: 2012-8-20 14:33:17

你还是通过url加载把。




欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2