为dojo普及做贡献 -A-- Dojo Tree[新版本号 1.x]

Dojo树(先静态测试---树的显示)：

simple.htm

 

导入dojo

样式(dojo主题)：

 

<style type="text/css"> @import "../libs/dojo1.4.x/dojo/resources/dojo.css"; @import "../libs/dojo1.4.x/dijit/themes/tundra/tundra.css"; /*设置页面样式，必须*/ body { width: 100%; height: 100%; padding: 0px; margin: 0px; } /*让树的文字遇到鼠标后变a over样式*/ .dijitTreeLabel { cursor: pointer; } <style>

 

 

JS库:

 

<script type="text/javascript" src="../libs/dojo1.4.x/dojo/dojo.js" mce_src="libs/dojo1.4.x/dojo/dojo.js" djConfig="parseOnLoad: true,isDebug:true,debugAtAllCosts:true"></script> <script type="text/javascript"><!-- dojo.require("dojo.parser"); dojo.require("dojo.data.ItemFileWriteStore"); dojo.require("dijit.Tree"); // --></script>

 

<!--body必须指定主题，也就是按导入的dojo加个class="tundra"    不然显示不正常-->

树 DIV三步曲

<div dojoType="dojo.data.ItemFileReadStore" url="treeData.json" jsId="jsonData"></div> <div dojoType="dijit.tree.ForestStoreModel" store="jsonData" jsId="jsonModel" rootLabel="管理菜单根目录 " childrenAttrs="line,serial"></div> <div dojoType="dijit.Tree" id="tree" model="jsonModel"> <script type="dojo/method" event="onClick" args="item"><!-- lastBoxSelected = item; alert("NAME:"+lastBoxSelected.title+"/nID:"+lastBoxSelected.id+"/nURL:"+lastBoxSelected.url); // --></script> </div>

数据(第一步测试用的json)---treeData.json：

必须的两个属性,但值可以根据需要修改,label:'name'是一样的

   identifier: 'id',
   label: 'title',

{ identifier: 'id', label: 'title', items: [{ id: 987987, title:"987987", priority:"Next Day Air", line: [ { id: '987987-1', qty:1, sku:11761, title: 'Yodeling Pickle', serial: [ { id:'9879870', title:'9879870', url: 1 } ] }, { id: '987987-2', qty:3, sku:11798, title: 'Gummy Tapeworm', serial: [ { id:'9879871', title:'9879871', url: 5}, { id:'9879872', title:'9879872', url: 5}, { id:'9879873', title:'9879873', weight: 5} ] } ] }] }

 

代码完成就第一次测试吧----->

 

从数据库读数据和服务器交互，马上就到-----