1

プロジェクトでは、 http://acoderinsights.ro/からの AciTree プラグインを、チェックボックス拡張、優れたプラグインと共に使用します。3000 以上のノードを持つツリーを描画すると、問題が発生しました。すべてのノードを DOM にロードするには 30 秒かかります。もう 1 つの問題は、このツリーは、同じ構造を持つページ上のいくつかの場所で動的に表示する必要がありますが、チェックされたノードが異なることです。おそらく独自の解決策は、キャッシングまたはクローン作成です。バックグラウンドでツリーを作成し、必要に応じてこのツリーを複製して、新しい aciTree オブジェクトを作成する時間を短縮します。このコード フローを試しましたが、うまくいきませんでした。ページの読み込み時にキャッシュを生成し、メモリに保持します。コードにエラーが含まれている可能性があります。これはロジック フローでのみ表示されます。

var mytree = {
    tree: {},
    settings: {checkbox:true}
    cache: function(radio){
        var html = '<div id="selectbox_categories" class="aciTree"></div>';

        mytree.tree = jQuery(html).aciTree(mytree.settings);
        var api = mytree.tree.aciTree('api');
        api.loadFrom(null, {'itemData': treeData, 'unanimated': true, 
        'success': function (){
            console.log('Caching Success!');
            /* Do some logic */
        }
    });
 }

次に、関数を呼び出して、このように aciTree オブジェクトを複製します。

function cloneTree( elem ) {

   // elem is real empty html dom element in page
   var box = jQuery(elem);

   if( box.length > 0 ){

    // Tried this but when using api on this, nothing happens...
    var cloned = mytree.tree.clone(true, true);
    box.replaceWith( cloned );

    // Tried this also...
    //box = jQuery.extend(true, {}, mytree.tree.clone(true, true));

    var api = box.aciTree(mytree.settings);

    // Tried this also...
    //box.aciTree('init', js_category.settings);

    var jsa = box.aciTree('api');

    // When using api, for example check nodes nothing happens...
    jsa.search(null, {
        'search': id, 
        'success': function (i) {
             console.log('found...');
             jsa.check(jQuery(i));
        }, 
        'fail':function(){
             console.log('failed...');
        }
    });
}

私のJavaScriptの知識は貧弱で、aciTreeオブジェクト全体をイベントなどで複製して、ページDOMの要求された場所に即座にツリーを挿入する可能性があるかどうか疑問に思っています.

すべてのアドバイスをありがとう...

4

0 に答える 0