JavaScript之树列表插件实现

欢迎访问我的博客 or 访问我的笔记小站

treeViewPlugin，一个可以生成任意多级树列表的js插件，本人使用jquery事件委托处理跨浏览器添加事件监听及DOM操作实现需求。
查看插件源码点此
树列表插件示例演示点此
效果如图：

treeViewPlugin效果图

API说明

插件定义

    var treeViewPlugin = (function() {  //插件定义、封装
        //插件实现
    }());

插件API

    
    return {
        initModule: initModule,  //初始化树列表
        addParents: addParents,  //给树列表添加父级菜单
        addChild: addChild,  //给树列表添加子级菜单
        addChildNode: addChildNode,  //
        setData: setData //给插件树设置值
    };

初始化

    /**
     * [initModule 初始化树列表]
     * @param  {[type]} $append_target [树列表容器]
     *   $('.treeviewCont')
     * @return {[type]}                [函数返回值]
     */
    initModule = function($append_target) {
        //具体实现
    };

添加无父级有子级菜单

    /**
     * [addParents 添加无父级有子级菜单
     * @param {[Array]} _data [菜单数据]
     * [{
     *      id: 菜单id,
     *      name: 菜单显示值
     * 
     * }]
     */
    addParents = function(_data) {
        //具体实现
    };

添加无父级无子级菜单

    /**
     * [addOne 添加无父级无子级菜单
     * @param {[Array]} _data [菜单数据]
     * [{
     *      id: 菜单id,
     *      name: 菜单显示值
     * 
     * }]
     */
    addOne = function(_data) {
        //具体实现
    };

添加有父级有子级菜单

    /**
     * [addChild 添加有父级有子级菜单]
     * @param {[Array]} _data [菜单数据]
     * [{
     *      id: 菜单id,
     *      name: 菜单显示值,
     *      pId: 父级菜单id
     * }]
     */
    addChild = function(_data) {
          //具体实现
    };

添加有父级无子级的菜单

    /**
     * [addChildNode 添加有父级无子级菜单]
     * @param {[Array]} _data [菜单数据]
     * [{
     *      id: 菜单id,
     *      name: 菜单显示值,
     *      pId: 父级菜单id
     * }]
     */
     addChildNode = function(_data) {
          //具体实现
     };

setData为树列表填充值

    /**
     * [setData 为树列表填充值]
     * @param {[type]} data [Array]
     */
    setData = function(data) {
        var result = {
            self: [],  //无父级无子级树菜单集合
            parents: [],  //无父级有子级树菜单集合
            children: [],  //填充有父级有子级树菜单集合
            members: [] //填充只有父级无子级树菜单集合
        };
        //具体实现...
        for (var i = 0, _len = data.length; i < _len; i++) {
            id_arr.push(data[i].id);
            data[i]['has-child-here-flag'] = 0; //有无子级标志，默认0为无
            data[i]['has-parent-here-flag'] = 0; //有无父级标志，默认0为无
        }
        //...
        addParents(result.parents);//填充无父级有子级树菜单
        addOne(result.self);//填充无父级无子级树菜单
        addChildren(result.children);//填充有父级有子级树菜单
        addChildNode(result.members);//填充只有父级无子级树菜单
        return result;
    };

demo展示

        
    
    
        
        
        
        
    
    
        
Treeview Plugin Demo
        

            

        
        
        
        
    
    

此插件只是初步实现，更多功能待完善，实际使用可根据实际需求做相应修改，欢迎大家一起分享、交流、学习。
查看插件源码点此