Question

我遇到了jsTree的问题，问题如下：

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

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

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

提前感谢您的帮助。

最佳

木子

简单树代码

$("#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方法加载节点intot。

jstree一旦加载删除页面上的其他ui（jqueryui.js）设置

1 个答案: