YUI.Ext 학습 여섯째 날 - 트리 TreePanel에 대해(1부)_YUI.Ext 관련

YUI.Ext 학습 5일차 - 트리 TreePanel에 대하여(1부)
효과 데모: http://www.ajaxjs.com/yuicn/demos/order_tree.asp
트리 구성 요소는 YUI의 새로운 기능입니다. .Ext 0.40에 구성 요소가 추가되었습니다. YUI에는 이미 TREE VIEW 구성 요소가 포함되어 있지만 JACK은 이를 다시 개발하기로 결정했습니다. 구체적인 이유는 http://www.ajaxjs.com/yuicn/article.asp?id=20070245(번역된 기사) 또는 http://www.jackslocum.com/blog/2006/12/29/preview-drag에 있습니다. -and -drop-enhancements-and-the-new-treepanel/ (원본)
1. 동기화된 트리 로드:

코드 복사 코드는 다음과 같습니다.

var TreeTest = function(){
var Tree = YAHOO.ext.tree;// 단축키
return {
init: function() {
var tree = new Tree.TreePanel('tree_div', {//tree_div 홀더 필요
animate:true, //애니메이션 여부
loader: new Tree.TreeLoader( {dataUrl:'get_nodes .asp'}), //JSON 호출
활성화DD:false,//드래그 앤 드롭 지원 여부
ContainerScroll: true
})//설정 루트 노드
var root = new Tree.AsyncTreeNode({
text: 'Frank's work', //루트 노드 텍스트
draggable:false, //루트 노드를 드래그 앤 드롭할 수 있는지 여부
id:'source'
}) ;
tree.setRootNode(root);
// 렌더링 트리
tree.render(false,false)// false( 기본값), 애니메이션을 비활성화하려면 false
}
}()
YAHOO.ext.EventManager.onDocumentReady(TreeTest.init , TreeTest, true);


서버가 JSON(JSON 소개: http://www.json.org/json-zh)을 반환한다고 가정하고 XHR을 통해 이 get_nodes.asp 파일을 호출합니다. .html):
[{
"text":"yui-ext.js","id":"/yui-ext.js","leaf":true,"cls":"file"

} ,{
"text ":"yui-ext-1118.php","id":"/yui-ext-1118.php","leaf":true,"cls":"file "
} ,{
" text":"yui-ext-1228.php","id":"/yui-ext-1228.php","leaf":true,"cls":" file"
} ,{
"text":"build","id":"/build","cls":"folder"
} ,{
"text":"source ","id":"/source", "cls":"folder"
} ,{
"text":"yui-ext-1123.php","id":"/yui-ext -1123.php","leaf":true ,"cls":"file"
} ,{
"text":"yui-ext-1203.php","id":"/yui- ext-1203.php","leaf": true,"cls":"file"
} ]
서버측 JSON 출력(ASP JScript)





코드 복사

코드는 다음과 같습니다. var products = new dbOpen() goods.GetSQL ="select * from productsbigclass";

with(goods){

GetRS(1);
var str="";
str ="[";
do{
str ='{" text":"' rs("BigClassName") '", "id":"/yui-ext.js","leaf":true,"cls":"file","href":"?b_id=' rs("BigClassID") '"},';
                                                                                                                            🎜>상품= null


설명:
"text"-->표시된 텍스트
"id"-->id 값
"leaf"-->부울 값, "leaf"가 true인 경우 하위 노드 포함 하위 노드
"cls"-->선택한 스타일, 일반적으로 여기에서 선택한 아이콘
"href"-->지정된 URL, "hrefTarget" 속성도 있습니다
또한 위의 속성 외에도 JSON에 모든 속성을 노드의 속성으로 추가할 수 있습니다. Jack의 원래 단어를 참조하세요.
href 속성은 "href"라고 하며, "hrefTarget" 속성도 있습니다. 노드 클릭을 캡처하면 개별 노드를 수신하거나 클릭한 노드를 전달하는 트리에서 "클릭"을 수신할 수 있습니다. 참고로 노드의 json 구성에 원하는 속성을 넣을 수 있습니다. node.attributes로 사용할 수 있습니다. FAQ.4에서 이 문제를 계속 설명할 것입니다.
FQA FAQ:
1.Tree는 XML 데이터 교환을 지원합니까?
A: 아직 지원되지 않습니다. FOURM에 따르면 향후 지원이 제공될 예정입니다.
노드 고용 전송에 json 대신 xml을 사용할 수 있나요?
틀렸다면 정정하세요. 하지만 그렇다고 해서 나중에 지원되지 않는다는 의미는 아닙니다.
2. 하위 노드를 확장해도 될까요?
A: 예, 다음을 참조하세요.
tree.on('click', function(node){
if(!node.isLeaf()){
node.toggle();
}
});
3. 이벤트 처리의 여러 상황:
A: a. 노드를 추가할 때 노드에 이벤트를 추가하세요.
tree.on('append', function( tree, node){
if(node.id == 'foo'){
// 여기에 이벤트(예: 클릭) 리스너(addListener())를 추가하세요
}
} );b. 노드에 대한 클릭 이벤트
tree.on('click', function(node){
if(node.id == 'foo'){
// 작업 수행
}
});c. 특정 영역(컬렉션)을 대상으로 하는 이벤트
// 트리의 선택이 변경될 때마다 실행됩니다
tree.getSelectionModel().on('selectionchange', function(sm, node){
if(node ​​​​&& node.id == 'foo'){
// 작업 수행
}
})
4. JSON 사용자 정의 필드(또는 매개변수)를 얻는 방법
A: JSON 객체는 구성 함수 구성을 통해 TreeNode에 전달되었으며 node.attributes로 나타나므로 node.attributes 속성을 호출하여 얻을 수 있습니다. 자세한 내용은 다음을 참조하세요. http://www.yui-ext.com/forum/viewtopic.php?t=2253
tree.on('click', function(node){
if(!node. isLeaf( )){
node.toggle()
}
});