Dojo學習8 使用恐怖的dijit.Tree

時間 2019-11-17

標籤 dojo 學習使用 dijit.tree dijit tree 欄目 Dojo 简体版

原文原文鏈接

8. 使用恐怖的dijit.Tree
能夠說dojo0.9bate的dijit.Tree太靈活了，功能太強大了。因此使用的時候定製和編程就要不少了。Dijit.Tree數據源必須是Store，經常使用的是dojo.data.JsonItemStore ，不可以使用inline方式。
下面給出兩個例子，一個例子是最基礎的，一個例子是動態生成的：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>TREE</title>
<style type="text/css">
@import "../js/dojo/resources/dojo.css";
@import "../js/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript"
djConfig="parseOnLoad: true, isDebug: true"
src="../js/dojo/dojo.js"></script>
<script>
  dojo.require("dojo.data.JsonItemStore");
  dojo.require("dijit.Tree");
    dojo.addOnLoad(function(){
     dojo.subscribe("tree", null, function(message){
      console.log("sn:"+message.event);
      console.log("sn:"+message.node.item.name);
     });
    });
</script>
</head>javascript

<body class="tundra">
<div dojoType="dojo.data.JsonItemStore" jsId="continentStore"
url="../js/dijit/tests/countries.json"></div>
<div dojoType="dijit.Tree" id=tree store="continentStore" query="{type:'continent'}"
labelAttr="name" typeAttr="type"></div>
</body>
</html>css

動態添加樹節點：
function addNode(){
//add one treeNode
var _tree=dijit.byId("tree");
var tdata={label:"FR",tree:_tree,item:{name:"FR",type:"one"}};
var child=new dijit._TreeNode(tdata);
_tree.addChild(child,1);
child._updateLayout();
_tree.getChildren()[2]._updateLayout();
child.setChildren({});
child._setExpando();
// console.debug();
}html

若是要懶加載一個樹，就須要繼承JsonItemStore，能夠參考/dojox/data/demos/裏面的例子。若是想從其餘數據源獲得樹，能夠參考dojox.data裏面的其餘store.總之，tree的數據源必須是Store。編程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。