プロジェクトでは、 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の要求された場所に即座にツリーを挿入する可能性があるかどうか疑問に思っています.
すべてのアドバイスをありがとう...