jstree 一旦加载就会删除页面上的其他 ui (jqueryui.js) 设置

Question

我的 jsTree 有问题，问题如下：

• 我的页面上有可调整大小的可拖动 div 基本上您可以对它们进行排序并调整它们的大小
• 然后我向表单添加了一个 jsTree，它使用 ajax 检索值并使用 xml_data 填充树问题
• 是一旦树被加载，div 就不能再调整大小并且不能拖动。

当所有内容都加载后查看 html 呈现的标记时，我可以看到 className 不再具有“ui-ressized”，

有人遇到过这个奇怪的问题吗？

预先感谢您对我的热情帮助。

最好的 Muzi

简单树代码

$("#jsTreeDiv").bind("loaded.jstree", function (event, data) {

            alert("TREE IS LOADED");

            var arrTmp = [90, 91];

            //loop thru all item in tree if edit
            if (arrTmp.length > 0) {
                $("#jsTreeDiv li").each(function (i) {
                    var $curItem = $(this);
                    if ($curItem.length > 0) {
                        for (var i = 0; i < arrTmp.length; i++) {

                            if (arrTmp[i] == parseInt($curItem[0].id)) {
                                //delete node
                                $("#jsTreeDiv").jstree("delete_node", $curItem);
                            }
                        }
                    }
                });
            }

        }).jstree({
            "plugins": ["themes", "xml_data", "types", "ui", "dnd", "crrm"],
            "xml_data": {
                "ajax": {
                    "type": "POST",
                    "dataType": "html",
                    "url": urlXml,
                    "success": function (msg) { }
                },
                "xsl": "flat"
            },
            "themes": {
                "theme": "default",
                "url": "../scripts/jsTree/default/style.css",
                "dots": true,
                "icons": true
            },
            "ui": {
                "select_limit": 1,
                "initially_select": ["lvl_1"]
            }
        });

    });

简单 Div 标记

<ul class="Cols-01">
    <li>
        <div id="Div2" class="ColContainer-01">
            <div class="ColContainerHead"><div class="ColHandlerImg-01"><img src="ColHandler.png" class="ColHandler-01" /></div>[ Data Col Name 2 ]</div>
            <div class="ColContainerBody"></div>
        </div>
    </li>
    <li>
        <div id="Div1" class="ColContainer-01">
            <div class="ColContainerHead"><div class="ColHandlerImg-01"><img src="ColHandler.png" class="ColHandler-01" /></div>[ Data Col Name 2 ]</div>
            <div class="ColContainerBody"></div>
        </div>
    </li>    

DOM 准备就绪时编写代码

$(".Cols-01 li").each(function (i) {
    var $Div = $(this).find("div.ColContainer-01");
    $Div.resizable(); //make each div resizable
});

$(".Cols-01").sortable(); //make ul list sortable


//then load tree 

Answer 1

这不再是问题，而且 jstree 也没有问题。

问题是我初始化 jsTree 的顺序，我通过将 jstree 代码添加到 $(document).ready(function () {}); 来解决这个问题因此，当 DOM 准备好时，树就会加载。

现在我使用 jstree 中的 create 方法将节点加载到其中。