YUI3自动加载树实现

treeview代码参见前一篇

在treeview修改本地化实现后，就要考虑如何去实现自动加载树的代码

在ExtJS里是通过继承并扩展TreePanel功能实现的，但是YUI3的widget继承有些问题（见Datatable）

还是和Datatable的处理方式一样，为Treeview编写一个专门的plugin插件来解决问题

这个plugin做两件事：

1、在树创建后创建树的根节点及第一层节点，并定义各节点是否可展开

2、在用户操作展开节点时获取下一层节点

这样，在前台脚本里，创建树的代码就简洁到了极致

首先，module里需要引入本地的treeview模块及插件模块（自己编写的dataquery），然后指定名称创建树

    var Y = YUI({
        modules: {
            。。。。。。
            treeview: { async: false, fullpath: '../scripts/gallery/treeview.js' },
            dataquery: { async: false, fullpath: '../scripts/core/dataquery.js' }
        }
    }).use(。。。。。。。 'dataquery',  'treeview', function(Y) {
        var treeview = new Y.TreeView({
            startCollapsed: false,
            toggleOnLabelClick: false
        });
        treeview.plug(Y.TreePlugin.TreeLoaderPlugin, { treename: 'navigator' });
        treeview.render("#cattree1");
    });

这里可以看到，跟标准的demo代码比，完全没有了啰嗦的treenode的数据，treeview创建的代码只需要1个参数：startCollapsed，设定开始时根展开（toggleOnlabelClick可有可无），然后再plug一下TreeLoaderPlugin就可以了
效果图如下，比原始的那个没图的版本已经耐看多了，+-号标记还需要再改小点，感觉大了有点难看

 TreeLoaderPlugin的代码如下：

    function TreeLoaderPlugin(config) {
        TreeLoaderPlugin.superclass.constructor.apply(this, arguments);
    };

    Y.mix(TreeLoaderPlugin, {
        NAME: 'treeLoaderPlugin',
        NS: 'treeloaderplugin',
        ATTRS: {
            treename: {
                value: ''
            }
        }
    });

    Y.extend(TreeLoaderPlugin, Y.Plugin.Base, {
        initializer: function() {
            var tree = this.get(HOST);
            this.onHostEvent('nodeClick', this._treenodeclick);
            this.onHostEvent('nodeExpand', this._treenodeexpand);
            var plugin = this;
            var configuration = {
                method: 'POST',
                sync: true,
                data: { name: this.get('treename') },
                on: {
                    complete: function(o) {
                        var result = Y.JSON.parse(o.data.responseText);
                        var treenode = new Y.TreeNode({ label: unescape(result.label), icon: result.iconCls, collapsed: true, nodeId: '-1', expandable: true });

                        treenode.handler = unescape(result.handler);
                        treenode.dataRefresh = result.expandRefresh == true;
                        treenode.dataRead = false;
                        treenode.dataID = "";
                        tree.add(treenode);
                        plugin._loadsub(treenode);
                    }
                }
            };

            var rio = new Y.IO({ emitFacade: true, bubbles: true });
            rio.send('../Tree/Get', configuration);
        },
        _treenodeclick: function(e) {
            if (e.treenode.handler != '') {
                eval(e.treenode.handler);
            }
        },
        _treenodeexpand: function(e) {
            this._loadsub(e.treenode);
        },
        _loadsub: function(node) {
            if (node.dataRefresh == true || node.dataRead == false) {
                if (node.dataRead && node.size() > 0) {
                    while (node.size() > 0) {
                        node.item(0).remove();
                    }
                }
                node.dataRead = true;
                var configuration = {
                    method: 'POST',
                    sync: true,
                    data: { name: this.get('treename'), id: node.get('nodeId'), dataID: node.dataID },
                    on: {
                        complete: function(o) {
                            var list = eval(o.data.responseText);
                            for (var n = 0; n < list.length; n++) {
                                k = list[n];
                                var treenode = new Y.TreeNode({ label: unescape(k.label), icon: k.iconCls, collapsed: k.autoExpand == true, nodeId: k.id, expandable: k.hasChild });

                                treenode.handler = unescape(k.handler);
                                treenode.nodeID = k.id;
                                treenode.dataRead = false;
                                if (k.dataID != null) {
                                    treenode.dataID = k.dataID;
                                }
                                else {
                                    treenode.dataID = "";
                                }
                                treenode.dataRefresh = k.expandRefresh == true;
                                node.add(treenode);
                            }
                        }
                    }
                };

                var rio = new Y.IO({ emitFacade: true, bubbles: true });
                rio.send('../Tree/GetChild', configuration);
            }
        }
    });

    Y.namespace('TreePlugin');
    Y.TreePlugin.TreeLoaderPlugin = TreeLoaderPlugin;

这个plugin通过后台获取树的配置信息并生成树，关于树的后台是如何实现的，这里就不解释了，可以参考ExtFrame相关的架构说明页面

plugin通过Host的nodeClick方法，执行节点上定义的操作，通过Host的nodeExpand方法，拦截节点展开事件，判断节点如果已获取数据，且为非刷新节点，则不响应，如未获取数据，或为每次展开重新刷新节点，则删除子节点并重新加载

 

转载于:https://www.cnblogs.com/zuxOK/archive/2012/12/04/2800988.html