如何顯示在樹

Question

沒有刷新數據追加這是我的樹視圖

我已經做了，當我做右鍵點擊樹的名稱（例如，資產，非當前，國王）和點擊添加頭然後會出現jquery對話框，並添加頭部代碼和頭部名稱，並使用PHP中的codeigniter框架工作將其成功保存在mysql數據庫中。

基本上，它是在頭部下創建的。

我需要什麼時候提交後，它將顯示在該頭下的子標題沒有刷新樹。例如，

如果我在資產下創建子標題，則在「104-Kamrul」之後附加子標題而不刷新，並且不顯示任何更改。

我該如何解決它，請提出任何建議？

Answer 1

我認爲你需要AJAX，使你所需要的，只是使用一個特定的類每棵樹父母例如：

<div class="parent-1"> 
<div class="child-1"></div> 
<div class="child-2"></div> 
</div> 
<div class="parent-2"> 
<div class="child-1"></div> 
<div class="child-2"></div> 
</div> 

現在只需加載你需要以下父母類新：

$('.parent-1').children('.child-1').load('http://site.com/url/to/load/new/childs'); 

或

var _childs = $.get('http://site.com/url/to/get/some/childs'); 
$('.parent-1').append(_childs); 

Answer 2

下列的裝飾元素：

<div id="tree"> 
    <ul> 
     <li><a href="#">Asset</a> 
      <ul> 
       <li><a href="#">101-Non Current</a></li> 
       <li><a href="#">102-Current Asset</a></li> 
       <li><a href="#">103-Abdul Halim Shah</a> 
        <ul> 
         <li><a href="#">10301-Shah</a> 
          <ul> 
           <li><a href="#">1030101</a></li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
       <li><a href="#">104-Kamrul</a></li> 
      </ul> 
     </li> 
     <li><a href="#">2-Expenses</a></li> 
    </ul> 
</div> 

我寫了幾個jQuery函數來動態添加新節點。其中增加的指定選擇下方的節點和其他增加它作爲一個兄弟：

function addSibling(selector, content) { 
    var markup = '<li><a href="#">' + content + '</a></li>'; 
    $(selector).parent().append(markup); 
} 

function addChild(selector, content){ 
    var obj = $(selector); 
    var markup='<li><a href="#">' + content + '</a></li>'; 
    var element; 
    if ($('ul', selector).length > 0){ 
     //nested list 
     element = obj.find('> ul'); 
    } else { 
     element = obj; 
     markup = '<ul>' + markup + '</ul>'; 
    } 
    element.append(markup); 
} 

雖然你必須適應他們的代碼，您可以使用下面的點擊功能來測試他們：

$("#tree ul").click(function (e) { 
    //addSibling(e.target, 'new one'); 
    addChild(e.target, 'new one'); 
    e.stopPropagation(); 
}); 

我不明白您的變量是什麼，但得到的數據發送到服務器，而不需要頁面加載，你可以使用一個Ajax功能類似如下：

$('#form').submit(function() { 
    var headCode = $('input[name="headCode"]').val(); 
    var headName = $('input[name="headName"]').val(); 
    $.ajax({ 
     url: "load.php", 
     type: 'POST', 
     data: { 
      head_code: headCode, 
      head_name: headName 
     }, 
     cache: false, 
     success: function(json){ 
      alert('loaded'); 
     } 
    }); 
    return false; 
});