Question

这是我的树视图

enter image description here

当我右键单击树名称（例如，Asset，Non Current，Shah）并单击add head然后会出现jquery对话框表格并添加头部代码和头部名称并成功保存时，我已经这样做了在mysql数据库中使用codeigniter框架在php中工作。

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

我需要在提交后，在没有刷新树的情况下显示该头下的子标题。例如，

如果我在资产下创建子标题，则在“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>

现在只需加载父母classess所需的内容：

$('.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;
});

如何在树中不刷新的情况下显示附加数据

2 个答案: