jQuery MiniUI

标题: Tree 数据json数据加载问题 [打印本页]

作者: caicai0328 时间: 2012-7-6 17:36:13 标题: Tree 数据json数据加载问题

请教一个问题 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 时间: 2012-7-6 17:50:32

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

作者: niko 时间: 2012-7-6 18:53:41

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

作者: caicai0328 时间: 2012-7-7 00:49:09

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

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

作者: caicai0328 时间: 2012-7-7 01:34:52

但是我用了这个办法，区不能动态加载呢？
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 时间: 2012-7-7 01:37:22

但是我想用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 时间: 2012-7-7 06:58:18

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

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

作者: caicai0328 时间: 2012-7-7 12:01:48

<!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 时间: 2012-7-7 17:56:39

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

作者: superjirou 时间: 2012-8-13 06:08:08

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

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

作者: niko 时间: 2012-8-13 09:27:18

请参考教程：
创建树：列表结构
http://www.miniui.com/docs/tutorial/tree_list.html

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