Dojo读取json生成树

第一种方式: 
1、 //头部引入dojo包和样式

<style type="text/css">
@import "js/dojo-release-1.8.0-src/dijit/themes/tundra/tundra.css";
@import "js/dojo-release-1.8.0-src/dojo/resources/dojo.css";
</style>
<!-- Date: 2012-10-08 -->
<script type="text/javascript" src="js/dojo-release-1.8.0-src/dojo/dojo.js"
djConfig = "isDebug:true,parseOnLoad:true"></script>
<script type="text/javascript" >
dojo.require("dijit.Tree");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.parser");
</script>

2、 /* 创建模拟数据 */
var data = {
    identifier: 'id',   
    label: 'name',   
   items: [
    { id:'18',name:'总参谋部',type:'department',children:[{ id:'22',name:'陈炳德', type:'leader' }]  },
  { id:'19',name:'总政治部',type:'department',children:[{ id:'23',name:'李继耐', type:'leader' }]  },
{ id:'20',name:'总装备部',type:'department',children:[{id:'24',name:'廖锡龙', type:'leader' }]  },
{ id:'21',name:'总后勤部',type:'department',children:[{id:'25',name:'常万全', type:'leader' }]  }
   ]
};
//读取j数据源
var continentStore = new dojo.data.ItemFileReadStore({data:data}); 
//这个是引用XML文件
/*
  var xmlStore = new dojox.data.XmlStore({
  url: "file/country.xml", 
  label:"name"
  });
*/
//创建数据模型
var continentModel = new dijit.tree.ForestStoreModel({
store:continentStore,
query:{"name":"*"},//查询条件
rootId:"id", 
rootLabel:"中华人民共和国",//根结名称
childrenAttrs: ["children"]//子节点类型
}); 
//树模型 
myTree = new dijit.Tree({
model:"continentModel",
showRoot:false//是否显示根节点
},"contentTree");
3、 <!--页面内容-->
<body class="tundra">
<div id = "contentTree"></div>
</body>
其中的属性就不解释了,参考官网api:http://dojotoolkit.org/api
第二种方式:
<!--获取数据源-->
  <div dojoType="dojo.data.ItemFileReadStore" jsId="continentStore" url="json/dept.json"></div>
  <!--创建树模型-->
<div dojoType="dijit.tree.ForestStoreModel" jsId="continentModel" store="continentStore" 
childrenAttr="children" query="{type:'department'}"rootId="continentRoot" rootLabel="中华人民共和国国防部">
</div>
<!--根据数据模型展示树结构-->
<div dojoType="dijit.Tree" id="mytree" jsId="mytree" model="continentModel" ></div>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值