jQuery MiniUI

标题: mini-treeselect用setData(data)为什么不按层级显示 [打印本页]

---

作者: pj_style    时间: 2013-5-28 16:25:23     标题: mini-treeselect用setData(data)为什么不按层级显示

<input id="select1" class="mini-treeselect" multiSelect="true"  url="<%=path%>/jbpm/statement/data/listTree.txt"
               textField="text" valueField="id" parentField="pid" checkRecursive="true"
                showFolderCheckBox="false"  expandOnLoad="true" showClose="true"
            />


           var root=[
{id: "base", text: "Base"},

{id: "ajax", text: "Ajax", pid: "base"},
{id: "json", text: "JSON", pid: "base"},
{id: "date", text: "Date", pid: "base"},
{id: "control", text: "Control", pid: "base"},
{id: "forms", text: "Forms", pid: "base"},

{id: "button", text: "Button", pid: "forms"},
{id: "listbox", text: "ListBox", pid: "forms"},
{id: "checkboxlist", text: "CheckBoxList", pid: "forms"},

{id: "lists", text: "Lists"},

{id: "datagrid", text: "DataGrid", pid: "lists"},   
{id: "tree", text: "Tree", pid: "lists"},
{id: "treegrid", text: "TreeGrid ", pid: "lists"},
{id: "layouts", text: "Layouts"},

{id: "panel", text: "Panel", pid: "layouts"},
{id: "splitter", text: "Splitter", pid: "layouts"},
{id: "layout", text: "Layout ", pid: "layouts"},
{id: "navigations", text: "Navigations"},
   
{id: "toolbar", text: "Toolbar", pid: "navigations"},
{id: "tabs", text: "Tabs", pid: "navigations"},
{id: "outlookbar", text: "OutlookBar", pid: "navigations"},
{id: "menu", text: "Menu", pid: "navigations"},
{id: "pager", text: "Pager", pid: "navigations"}]
mini.get("select1").setData(root);

---

作者: factory    时间: 2013-5-28 16:30:23

这是列表状数据，列表状数据当然不会按照层级排列了，只有树形数据才会有层级

---

作者: pj_style    时间: 2013-5-28 16:31:59

factory 发表于 2013-5-28 16:30
这是列表状数据，列表状数据当然不会按照层级排列了，只有树形数据才会有层级 ...

但是我放在文件里面可以，用url读取

---

作者: factory    时间: 2013-5-28 16:39:50

pj_style 发表于 2013-5-28 16:31
但是我放在文件里面可以，用url读取

你给tree的数据是什么样的数据？
把你给tree的数据贴出来看看

tree加载的是树形数据，那么getData()就会按照层级显示
{id:1
     children:[
           {id:2},
           {id:3,
                 children:[
                      {id:4}
                 ]
           },
     ]
}

这是树形数据，这样是按照层级显示的

---

作者: pj_style    时间: 2013-5-28 16:47:16

factory 发表于 2013-5-28 16:39
你给tree的数据是什么样的数据？
把你给tree的数据贴出来看看

上面的数组就是我的数据

---

作者: factory    时间: 2013-5-28 16:59:31

pj_style 发表于 2013-5-28 16:47
上面的数组就是我的数据

我看错你的问题了。。。不好意思，setData()看成了getData()....
你设置resultAsTree="false"就可以了
如果是列表状数据的话

---

作者: pj_style    时间: 2013-5-28 17:00:56

factory 发表于 2013-5-28 16:59
我看错你的问题了。。。
你设置resultAsTree="false"就可以了
如果是列表状数据的话

是的，能给我写个简单的数组不？

---

作者: factory    时间: 2013-5-28 17:01:54

pj_style 发表于 2013-5-28 17:00
是的，能给我写个简单的数组不？

你的数据是正确的，列表状数据是以id和pid来展示父子节点关系的

只要你给tree加上 resultAsTree="false"这个属性就可以了

---

作者: pj_style    时间: 2013-5-28 17:05:12

factory 发表于 2013-5-28 17:01
你的数据是正确的，列表状数据是以id和pid来展示父子节点关系的

只要你给tree加上 resultAsTree="false" ...

我设置了还是不按层级显示。

---

作者: factory    时间: 2013-5-28 17:18:02

pj_style 发表于 2013-5-28 17:05
我设置了还是不按层级显示。

你看下我们这个demo
http://www.miniui.com/demo/#src=treeselect/treeselect.html

他里面的数据就是

1. [
   
2.         {id: "base", text: "Base"},
   
3.        
   
4.         {id: "ajax", text: "Ajax", pid: "base"},
   
5.         {id: "json", text: "JSON", pid: "base"},
   
6.         {id: "date", text: "Date", pid: "base", checked: true},
   
7.         {id: "control", text: "Control", pid: "base"},
   
8. 
   
9.         {id: "forms", text: "Forms", pid: "base"},
   
10.        
    
11.         {id: "button", text: "Button", pid: "forms"},
    
12.         {id: "listbox", text: "ListBox", pid: "forms"},
    
13.         {id: "checkboxlist", text: "CheckBoxList", pid: "forms"},
    
14.        
    
15.         {id: "lists", text: "Lists"},
    
16.        
    
17.         {id: "datagrid", text: "DataGrid", pid: "lists"},                       
    
18.         {id: "tree", text: "Tree", pid: "lists"},
    
19.         {id: "treegrid", text: "TreeGrid ", pid: "lists"},
    
20. 
    
21.         {id: "layouts", text: "Layouts"},
    
22.        
    
23.         {id: "panel", text: "Panel", pid: "layouts"},
    
24.         {id: "splitter", text: "Splitter", pid: "layouts"},
    
25.         {id: "layout", text: "Layout ", pid: "layouts"},
    
26. 
    
27.         {id: "navigations", text: "Navigations"},
    
28.                        
    
29.         {id: "toolbar", text: "Toolbar", pid: "navigations"},
    
30.         {id: "tabs", text: "Tabs", pid: "navigations"},
    
31.         {id: "outlookbar", text: "OutlookBar", pid: "navigations"},
    
32.         {id: "menu", text: "Menu", pid: "navigations"},
    
33.         {id: "pager", text: "Pager", pid: "navigations"},
    
34. 
    
35.         {id: "other", text: "Other", isLeaf: false, asyncLoad: false}
    
36. 
    
37. ]

复制代码

---

作者: factory    时间: 2013-5-28 17:18:04

pj_style 发表于 2013-5-28 17:05
我设置了还是不按层级显示。

你看下我们这个demo
http://www.miniui.com/demo/#src=treeselect/treeselect.html

他里面的数据就是

1. [
   
2.         {id: "base", text: "Base"},
   
3.        
   
4.         {id: "ajax", text: "Ajax", pid: "base"},
   
5.         {id: "json", text: "JSON", pid: "base"},
   
6.         {id: "date", text: "Date", pid: "base", checked: true},
   
7.         {id: "control", text: "Control", pid: "base"},
   
8. 
   
9.         {id: "forms", text: "Forms", pid: "base"},
   
10.        
    
11.         {id: "button", text: "Button", pid: "forms"},
    
12.         {id: "listbox", text: "ListBox", pid: "forms"},
    
13.         {id: "checkboxlist", text: "CheckBoxList", pid: "forms"},
    
14.        
    
15.         {id: "lists", text: "Lists"},
    
16.        
    
17.         {id: "datagrid", text: "DataGrid", pid: "lists"},                       
    
18.         {id: "tree", text: "Tree", pid: "lists"},
    
19.         {id: "treegrid", text: "TreeGrid ", pid: "lists"},
    
20. 
    
21.         {id: "layouts", text: "Layouts"},
    
22.        
    
23.         {id: "panel", text: "Panel", pid: "layouts"},
    
24.         {id: "splitter", text: "Splitter", pid: "layouts"},
    
25.         {id: "layout", text: "Layout ", pid: "layouts"},
    
26. 
    
27.         {id: "navigations", text: "Navigations"},
    
28.                        
    
29.         {id: "toolbar", text: "Toolbar", pid: "navigations"},
    
30.         {id: "tabs", text: "Tabs", pid: "navigations"},
    
31.         {id: "outlookbar", text: "OutlookBar", pid: "navigations"},
    
32.         {id: "menu", text: "Menu", pid: "navigations"},
    
33.         {id: "pager", text: "Pager", pid: "navigations"},
    
34. 
    
35.         {id: "other", text: "Other", isLeaf: false, asyncLoad: false}
    
36. 
    
37. ]

复制代码

---

作者: pj_style    时间: 2013-5-28 17:22:27

factory 发表于 2013-5-28 17:18
你看下我们这个demo
http://www.miniui.com/demo/#src=treeselect/treeselect.html

我是这样的数据，只不过是我用的setData()方法来设置数据，就出现了这样的问题.

---

作者: factory    时间: 2013-5-28 17:31:58

pj_style 发表于 2013-5-28 17:22
我是这样的数据，只不过是我用的setData()方法来设置数据，就出现了这样的问题. ...

我的错，你的问题没看清楚

列表状数据，你得用loadList(data,idField,parentField)
比如你这里

tree.loadList(data,"id","pid")

再试试

---

作者: pj_style    时间: 2013-5-28 17:38:58

factory 发表于 2013-5-28 17:31
我的错，你的问题没看清楚

列表状数据，你得用loadList(data,idField,parentField)

我是放在input里面的tree可行吗？

---

作者: factory    时间: 2013-5-29 08:58:32

pj_style 发表于 2013-5-28 17:38
我是放在input里面的tree可行吗？

我说的就是treeselect
这是他的API：http://www.miniui.com/docs/api/index.html#ui=treeselect

---

作者: pj_style    时间: 2013-5-29 10:23:47

factory 发表于 2013-5-29 08:58
我说的就是treeselect
这是他的API：http://www.miniui.com/docs/api/index.html#ui=treeselect ...

版主，您好，现在我现在要做成这个，加载的是列表数据，选中全部的但是不是把父节点选在里面，
用的是loadList(data,"id","pid")，但是总是不能够正常显示，请版主帮我分析下，列表数据如上面例子给的，多谢了。

---

作者: factory    时间: 2013-5-29 17:43:46

pj_style 发表于 2013-5-29 10:23
版主，您好，现在我现在要做成这个，加载的是列表数据，选中全部的但是不是把父节点选在里面，
用的是loa ...

var nodes = tree.getList();

for(....){
   var node = nodes
    if(!node.children){
         选中这个节点
    }
}

---

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)

Powered by Discuz! X2