为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',{ id:'9879873',title:'9879873',weight: 5} ] } ] }] }

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!