php - 如何在树中显示附加数据而不刷新

Question

这是我的树视图

我已经这样做了，当我右键单击树名（例如，资产，非当前，Shah）并单击添加头然后会出现jquery对话框，我添加头代码和头名，并成功保存在mysql数据库中在 php 中使用 codeigniter 框架工作。

基本上，它是在标题下创建的子标题。

我需要提交后，它将在该标题下显示子标题，而无需刷新树。例如 ，

如果我在资产下创建子标题，则在“104-Kamrul”之后附加子标题而不刷新和显示而不更改。

我该如何解决它，请任何建议？

Answer 1

给定以下标记：

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

Answer 2

我认为你需要 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);