javascript/jquery에서 동적 treeview 만들기?

Question

이 같은 트리 스타일 데이터의 목록, 뭔가를 만드는 임무를 봤는데 :

http://paulneale.com/tutorials/dotNet/treeView/treeView02.png

내가받은 한 유일한 정보는 동적으로 채워해야한다는 것입니다. 'value', 'text'쌍이 'select'html 구성 요소와 비슷한 웹 페이지로 전달됩니다. 다른 정보는 ASP.NET의 포스트 백이 없기 때문에 Javascript/jQuery로 코딩해야한다는 것입니다.

누군가 나를 친절하게 올바른 방향으로 안내 할 수 있습니까? 어떻게 시작해야합니까? 데이터가 '값', '텍스트'쌍으로 어떻게 전달되는지 전혀 알지 못합니다. 아는 바로는 후자와 전을 포함하는 2 개의 문자열이 전달된다는 것입니다.

편집 : 나는 이것을 지금까지 시도했다.

function createCategoryHeader(value, text) { 

     //Code for creatign the header 

    } 

    function createListItem(value, text) { 

     //Code for creating list item 

    } 

    createCategoryHeader("year_2011", "2011"); 
    createListItem("january", "Jan"); 
    createListItem("february", "Feb"); 
    createCategoryHeader("year_2010", "2010"); 
    createListItem("january", "Jan"); 
    createListItem("february", "Feb"); 

Answer 1

당신은 당신이 아이들이 특정 노드 아래 무엇인지 물어 때 키/값 쌍의 목록을받을 것이다 이것에 의해 뜻에 대한 동적으로 말을하는거야?

여기서 가장 좋은 점은 서버를 호출하는 기존 노드 (AJAX 사용)에 이벤트를 바인딩하고 해당 목록을받는 것입니다. 그런 다음, ajax의 succes 핸들러에서 결과를 파싱하고 JQuery DOM 수정을 사용하여 새 항목을 목록에 추가 할 수있다. 클릭 한 노드가 시각적으로 변경되도록하거나 아이콘을 변경하여 축소/확장 노드를 나타내는 것 등이 개선되었습니다.

귀하의 데이터가 어디서 비롯되었는지 확실하지 않으므로 특정 코드를 삼가하십시오. '최상위 레벨 노드'의 목록과 노드의 직접 하위를 가져 오는 방법을 가정하고 아래의 의사 코드.

검증되지 않은 코드 :

// Construct the basic HTML 
foreach(item in list) 
{ 
    // Make sure ID is changing appropriately 
    echo "<li class='closed node' id='item1'>Item</li>"; 
} 

그리고 어떤 자바 스크립트 :

// Add jquery stuff 
function setupBinds() 
{ 
    $(".closed").click(function() { openNode(this); } 
    $(".opened").click(function() { closeNode(this); } 
} 

function openNode(node) 
{ 
    // get items 
    make ajax call, onSuccess build HTML 
    append HTML to node 

    // make sure to rebind clicks for new items 
    $(node).removeClass('closed'); 
    $(node).addClass('opened'); 
    setupBinds(); 
} 

function closeNode(node) 
{ 
    // remove the UL from the node 
    $(node).remove('ul'); 

    // make sure to rebind clicks for new items 
    $(node).removeClass('opened'); 
    $(node).addClass('closed'); 
    setupBinds(); 
} 

Answer 2

나는 this tree-view code와 함께 행운을 했어. 너에게도 효과가있을 수 있니?