1

jsTreeに問題があり、問題は次のとおりです。

  • 私のページにはサイズ変更可能な機能を備えたドラッグ可能なdivがあります。基本的には、それらを並べ替えてサイズを変更できます。
  • 次に、ajaxを使用して値を取得し、xml_dataプラグインを使用してツリーにデータを入力するjsTreeをフォームに追加しました
  • 問題は、ツリーがロードされると、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
4

1 に答える 1

0

これはもはや問題ではなく、jstreeに問題はありません。

問題は、jsTreeを初期化する順序でした。これは、jstreeコードを$（document）.ready（function（）{}）;に追加することで修正しました。したがって、DOMの準備ができるとツリーがロードされます。

現在、jstree内のcreateメソッドを使用して、ノードをtにロードしています。

于 2010-09-22T08:10:13.910 に答える