1

在项目中，我们使用来自http://acoderinsights.ro/的AciTree 插件，以及复选框扩展，很棒的插件。当我们绘制具有 3000 多个节点的树时，我们遇到了一个问题。将所有节点加载到 DOM 需要 30 秒。另一个问题是，这棵树必须在页面上的多个位置动态显示，结构相同，但检查节点不同。也许独特的解决方案是缓存或克隆。在后台创建树，然后在需要时克隆此树，从而减少创建新 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