Think of Ext2.0 (3)
5. Treehttp://p.blog.csdn.net/images/p_blog_csdn_net/linux2linux/20080124image006.jpg
直接使用Ext例子
Tree所需要的json字符串
[{id:300,text:'01',cls:'task-folder',children:[{id:'2',text:'01-01',leaf:true,cls:'task'},{id:'3',text:'01-02',children:[{id:'4',text:'01-02-01',leaf:true},{id:'5',text:'01-02-02',leaf:true}]},{id:'6',text:'01-03',leaf:true}]},{id:'7',text:'02',leaf:true}]
text”-->显示的文本
"id"-->id值 ，单击事件时可以使用
“leaf”-->Boolean值，如果“叶子”是真的话，则不能包含子节点Children nodes
"cls"-->选用的样式，通常在这里选定图标
”href“-->指定的url，还有一个”hrefTarget“的属性
children –〉表示子节点信息
<span style="" /><strong />
在Record.css中自定了两个定义的css，task和task-folder
.task .x-tree-node-icon {
<span style="" /> background-image:url(icons/cog.png) ;
}
.task-folder .x-tree-node-icon{
background-image:url(icons/folder_go.png) !important;
}
Json字符串中就使用了这个值
Tree使用如下，相对比较简单<span style="" />
<div style="padding: 4px 5.4pt; width: 95%;">http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif var Tree = Ext.tree;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif var tree = new Tree.TreePanel(...{
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif el:'tree-div',
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif autoScroll:true,
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif animate:true,
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif enableDD:true,
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif containerScroll: true,
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif loader: new Tree.TreeLoader(...{
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif dataUrl:'record.jsp'
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif })
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif });
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif // set the root node
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif var root = new Tree.AsyncTreeNode(...{
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif text: 'Ext JS',
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif draggable:false,
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif id:'source'
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif });
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif tree.setRootNode(root);
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif // render the tree
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif tree.render();
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif root.expand();
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif
页:
[1]