2011-04-28 5 views
7

사용자가 폴더 옆의 [+]를 클릭 할 때마다 json_data를 통해 내 jsTree를로드합니다. 내가 원하는 것은 css 클래스를 노드 중 일부에 적용하여 사용자를 위해 CSS 클래스를 강조 표시하는 것입니다. 여기서는 마우스를 움직이거나 현재 선택된 노드를 말하는 것이 아니라 나중에 인간이 검토해야하는 다중 노드에 대해서도 설명합니다. 적절한 CSS 클래스는 서버에서 JSON 응답 안에 이미 :json_data가로드 된 후 jsTree 노드 css 클래스를 변경 하시겠습니까?

[ 
{"attr":{"id":"node_5","rel":"document","page_id":"4"},"data":"Test123","csscl":"ui-state-error","state":""}, 
{"attr":{"id":"node_6","rel":"folder","page_id":"6"},"data":"Services","csscl":"","state":"closed"} 
] 

내 "Test123"노드가 트리에 나중에 클래스 "UI 상태 오류"를 얻어야한다.

$(function() { 
// Settings up the tree. note to self: dont use the cookie plugin here, this will always overwrite pre-selected nodes 
$("#jstree").jstree({ 
    "plugins" : [ "themes", "json_data", "ui", "types", "hotkeys",], 
    "json_data" : { 
     "ajax" : { 
      "url" : "inc/tree_server.php", 
      "data" : function (n) { 
       return { 
        "operation" : "get_children", 
        "id" : n.attr ? n.attr("id").replace("node_","") : 1 
       }; 
      }, 
      success: function(n) { 

       for (var i in n) 
       { 
        jqid = "#"+n[i].attr["id"]+" a"; 
        $(jqid).addClass(n[i].csscl); 
       }     
      } 
     } 
    }, 
    // the UI plugin 
    "ui" : { 
     // selected onload 
     "initially_select" : [ "node_<?=$p->oTopic->iId;?>" ] 
    }, 
    // the core plugin 
    "core" : { 
     "initially_open" : [ <?=$p->oTopic->sJstreeOpenSeq;?> ], 
     "animation" : 0 
    } 
}) 

이 작동하지 않습니다 : 여기 내 jsTree입니다. 내가 생각하기에 "성공 : function (n)"은 트리가로드 된 후에 호출되지만, JQuery가 선택된 노드를 찾고 내 클래스를 적용하기 전에 그 노드가 호출되거나 준비되기 전에 발생한다고 생각된다. 누구든지이 문제를 해결하는 방법을 알고 있거나이 경우 $ ("# node5 a")에 CSS 클래스를 적용하는 더 좋은 방법이있을 수 있습니다 ...?

+1

당신이 http://groups.google.com/group/jstree에서 jsTree 토론 그룹을 시도 했습니까? – Radek

+0

"데이터"개체에서 설정할 수 있습니까? "attr": { "class": "csscl"}? 첫 번째 데모를보십시오. http://www.jstree.com/documentation/json_data –

답변

1

해결 방법을 찾은 것 같습니다.

success: function(n) { 
     for (var i in n) 
     { 
      some_global_array_id.push(n[i].attr["id"]); 
      some_global_array_data.push(n[i].csscl); 
     }     
    } 

그리고 로딩 후이 같은 함수를 호출 할 수 있습니다 그리기

는 :

$("#jstree").jstree({ 
     // ... code you posted 
    }).bind("reopen.jstree", function (e, data) { 
     for (var i in some_global_array_id) { 
      $("#"+some_global_array_id[i]+" a").addClass(some_global_array_data[i]); 
     } 
    }); 
+2

더 쉽게 할 수 있습니다. 내 의견을 아래에서 확인하십시오. –

1

그것은 쉽게 수행 할 수 있습니다. 이와 성공 기능을 대체합니다

success: function(n) 
{ 
    for(var i = 0; i < n.length; i++) 
    { 
     n[i].data.attr['class'] = n[i].csscl; 
    } 
    return n;   
} 
+1

최신 버전의 jstree에 대한 구문이 변경되었습니다. 이 문서 (http://www.jstree.com/docs/json/)를 참조하십시오. 'n [i] .li_attr [ 'class']'또는'n [i] .a_attr [ 'class']'이어야합니다. – Ring

관련 문제