YUI.Ext 학습 6일차 - 트리 TreePanel에 대해(2부 비동기 노드 획득)_YUI.Ext 관련

다음은 트리의 모든 노드를 비동기식으로 가져오는 방법을 소개합니다. 구체적인 방법은 특히 json의 id 속성에서 공식적인 동기식 가져오기와 매우 다릅니다. 해결책을 모색하고 모두가 함께 연구해야 합니다.
비동기 노드 검색 아이디어는 다음과 같습니다.
1. 먼저 초기화 노드를 정의합니다(개인 요구에 따라 정의하지 않을 수도 있습니다)
2. 노드 ID에 따라 하위 노드를 가져옵니다.
3. 루프
기능: 상위 디렉터리에서 해당 노드에 하위 노드가 있는지 여부를 서버 측에서 미리 읽을 수 있습니다. json), 데이터베이스가 더 많은 압력을 견디게 되지만 count(*)를 사용하면 너무 많은 부담이 발생하지 않습니다(쿼리 조건이 극도로 복잡하지 않는 한). 또한 읽을 수 없습니다. 즉, 모든 isLeaf를 false로 설정합니다.
문제:
1. 현재는 다시 로드할 수 없습니다. 즉, 노드를 열 때마다 다시 읽습니다.
2. 여전히 스타일에 문제가 있습니다. node.childNodes[i]를 통해 설정할 수 없습니다. 따라서 마지막 레벨 요소의 스타일은 변경할 수 없습니다(다른 방법을 통해 스타일이 변경될 수도 있습니다.)
예:
먼저 js 코드를 제공합니다. 공식 데모(http://yui-ext.com/playpen/yui-ext.0.40/examples/tree/reorder.html)와 결합할 수 있습니다. 살펴보기:
//루트 변수 정의 id

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

var rootId = 1;
var TreeTest = function(){
// 단축
var Tree = YAHOO.ext.tree

return {
init : function(userName){
var tree = new Tree.TreePanel('detailTree', {
animate:true,
  //이 dataUrl은 트리를 초기화하는 데 사용되는 URL입니다. 정적 json 파일을 쓰거나 정의하지 않고, 특정 요구 사항에 따라 아무것도 쓰지 않고 자동으로 생성되는 두 번째 URL에 의존할 수도 있습니다. new Tree.TreeLoader({dataUrl:'calendarDetail.do?method=getDayDetailJSON&parentId= ' rootId}),
활성화DD:true,
ContainerScroll: true
})

// 루트 번호 설정
var root = new Tree.AsyncTreeNode({
text: 'yui-ext',
draggable:false,
id:rootId
})
tree.setRootNode(root)

//에 따르면 현재 노드 ID, 요청 서버에 대한 경로를 동적으로 입력합니다.
                                                                                             >       > tree.on('beforeload', function(node){
tree.loader.dataUrl = 'calendarDetail.do?method=getDayDetailJSON&parentId=' 노드 .id;
});

                               // 여기서는 사용자 정의 JSON 사용법을 보여줍니다(설명은 사용자 정의 JSON 키입니다)
// node (node.ui.textNode.title)
// UI 클래스를 보면 됩니다
tree.on('beforeexpand', function(node){
node.ui.textNode.style.title = '빨간색';
경고(node.attributes.description)
});                                                  // 재귀적이지 않은 경우 false(기본값), 애니메이션을 비활성화하려면 false
root.expand( ;


코드는 다음과 같습니다.


[ {"text":"Clothes", 
"id":"5", //참고: 연결 시 사용되는 노드의 ID는 공식 json과 다릅니다.
" leaf":true,
"cls":"file",

"description":"This is the clothing Category "}] //이것이 사용자 정의에 필요한 전부입니다.
다음에 대한 코드 로직 스니펫을 제공합니다. java에서 json을 생성합니다.
...

//list는 전달된 ID에 필요한 카테고리 세트입니다. List list= findBy("parentId", new Long(parentId.toString() )); StringBuffer JSONStr = new StringBuffer(); //json 선언 JSONStr.append("[") ; for(CostCategory i : list){

boolean isLeaf = isLeaf(i.getId()); //isLeaf()는 이 ID가 parentId인 노드가 있는지 확인하는 데 사용됩니다. 세부 정보는 제공되지 않습니다.

String icon = isLeaf?"file":"folder" ;
문자열 설명 = i.getCategoryDescription()==null?"":i.getCategoryDescription()
//{"text" :"treedata.jsp","id":"treedata.jsp" ,"leaf":true,"cls":"file"},
JSONStr.append("{"text":""
i.getCategoryName() "","id":""
i.getId() "","leaf":"
isLeaf ","cls":""
아이콘 ""," 설명":""
설명 ""},");
}
JSONStr.deleteCharAt(JSONStr.lastIndexOf(","));
JSONStr.append("]"); System.out.println(JSONStr); print(JSONStr); //json 출력
…