如何显示在树

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; 
});