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:'总政治部',children:[{ id:'23',name:'李继耐',{ id:'20',name:'总装备部',children:[{id:'24',name:'廖锡龙',{ id:'21',name:'总后勤部',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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。