Tree 数据json数据加载问题

caicai0328

请教一个问题 tree的数据记载问题：
这是我们常用的数据加载：
        tree3.loadData([
            { id: "lists", text: "Lists", expanded: false,
                children: [
           { id: "datagrid", text: "DataGrid" },
           { id: "tree", text: "Tree" },
           { id: "treegrid", text: "TreeGrid " }
          ]
                    },
         { id: "layouts", text: "Layouts", expanded: false,
             children: [
           { id: "panel", text: "Panel" },
           { id: "splitter", text: "Splitter" },
           { id: "layout", text: "Layout " }
          ]
         },
         { id: "navigations", text: "Navigations", expanded: false,
             children: [
           { id: "pager", text: "Pager" },
           { id: "tabs", text: "Tabs" },
           { id: "navbar", text: "NavBar" },
           { id: "menu", text: "Menu" }
          ]
         }
        ]);


但是 从服务器获得回来的数据中  子节点都是变化的，“children”  也就是 children 可能对应很多的类型名称  这个怎么处理呢？？望回复 谢谢

caicai0328

即是说 children  再被指定的时候 能指定多个么

niko

对Tree用列表状数据，会更简单易用：
http://www.miniui.com/docs/tutorial/tree_list.html

caicai0328

niko 发表于 2012-7-6 18:53
对Tree用列表状数据，会更简单易用：
http://www.miniui.com/docs/tutorial/tree_list.html ...

这样看的话  这个json数据的树形图  是不能够 模拟文件夹了啊  按道理一个文件夹下面应该是有多个文件夹和多个文件的啊    而这个 结构只能有一个子文件夹和多个文件了  我觉得  应该 改改

caicai0328

但是我用了这个办法，区不能动态加载呢？
    mini.parse();

        var tree3 = mini.get("tree1");
        tree3.loadData([
        {id: "base", text: "Base", expanded: false},
       
        {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", expanded: false},
       
        {id: "button", text: "Button", pid: "forms"},
        {id: "listbox", text: "ListBox", pid: "forms"},
        {id: "checkboxlist", text: "CheckBoxList", pid: "forms"},
       
        {id: "lists", text: "Lists", expanded: false},
       
        {id: "datagrid", text: "DataGrid", pid: "lists"},                       
        {id: "tree", text: "Tree", pid: "lists"},
        {id: "treegrid", text: "TreeGrid ", pid: "lists"},

        {id: "layouts", text: "Layouts", expanded: false},
       
        {id: "panel", text: "Panel", pid: "layouts"},
        {id: "splitter", text: "Splitter", pid: "layouts"},
        {id: "layout", text: "Layout ", pid: "layouts"},

        {id: "navigations", text: "Navigations", expanded: false},
               
        {id: "pager", text: "Pager", pid: "navigations"},
        {id: "tabs", text: "Tabs", pid: "navigations"},
        {id: "navbar", text: "OutlookBar", pid: "navigations"},
        {id: "menu", text: "Menu", pid: "navigations"}


        ]);  上边是url 连接的文件  但是区不能用loadData 方法呢？请教了

caicai0328

但是我想用loadData方法加载  趋势不成功的

    mini.parse();

        var tree3 = mini.get("tree1");
        tree3.loadData([




        {id: "base", text: "Base", expanded: false},
       
        {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", expanded: false},
       
        {id: "button", text: "Button", pid: "forms"},
        {id: "listbox", text: "ListBox", pid: "forms"},
        {id: "checkboxlist", text: "CheckBoxList", pid: "forms"},
       
        {id: "lists", text: "Lists", expanded: false},
       
        {id: "datagrid", text: "DataGrid", pid: "lists"},                       
        {id: "tree", text: "Tree", pid: "lists"},
        {id: "treegrid", text: "TreeGrid ", pid: "lists"},

        {id: "layouts", text: "Layouts", expanded: false},
       
        {id: "panel", text: "Panel", pid: "layouts"},
        {id: "splitter", text: "Splitter", pid: "layouts"},
        {id: "layout", text: "Layout ", pid: "layouts"},

        {id: "navigations", text: "Navigations", expanded: false},
               
        {id: "pager", text: "Pager", pid: "navigations"},
        {id: "tabs", text: "Tabs", pid: "navigations"},
        {id: "navbar", text: "OutlookBar", pid: "navigations"},
        {id: "menu", text: "Menu", pid: "navigations"}


        ]);

这样子加载的结果是所有的都在一个层级上了

niko

你仔细看教程：
http://www.miniui.com/docs/tutorial/tree_list.html

1.跟树形结构的效果是一样的
2.需要给tree设置parentField和resultAsTree

caicai0328

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>列表数据生成Tree</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    <script src="../../scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="../../scripts/miniui/miniui.js" type="text/javascript"></script><link href="../../scripts/miniui/themes/default/miniui.css" rel="stylesheet" type="text/css" />
    <link href="../../scripts/miniui/themes/icons.css" rel="stylesheet" type="text/css" />
   

</head>
<body>
    <h1>列表数据生成Tree</h1>      

   
   
    <ul id="tree1" class="mini-tree" style="width:200px;padding:5px;"
        showTreeIcon="true" textField="text" idField="id" parentField="pid" resultAsTree="true"
        >
    </ul>

   
        
   

    <div class="description">
        <h3>Description</h3>
        <p>            
            mini.Tree的url，可以指向一个列表数据。重点要声明"idField"、"parentField"、"resultAsTree"三个属性。
        </p>
    </div>

        <script type="text/javascript">
        mini.parse();

    var tree = mini.get("tree1");
        tree.loadData([
    {id: "base", text: "Base", expanded: false},   
    {id: "ajax", text: "Ajax", pid: "base"},
    {id: "json", text: "JSON", pid: "base"}
        ]);

    </script>

</body>
</html>这是我写的列子，可是不行呢？ 在先求解！！

niko

如果是loadData方法，必须是children的树形结构数据。

superjirou

niko 发表于 2012-7-7 17:56
如果是loadData方法，必须是children的树形结构数据。

唉，就说么 明明定义了resultAsTree 为false 还是以列表形式加载。 希望下个版本解决这个问题 毕竟要生成children的树形结构数据 还是稍微有点不方便