JS组件系列——分享自己封装的Bootstrap树形组件：jqTree

(function ($) {
    //使用js的严格模式
    ‘use strict‘;

    $.fn.jqtree = function (options) {
        //合并默认参数和用户传过来的参数
        options = $.extend({}, $.fn.jqtree.defaults, options || {});

        var that = $(this);
        var strHtml = "";
        //如果用户传了data的值，则直接使用data，否则发送ajax请求去取dataif (options.data) {
            strHtml = initTree(options.data);
            that.html(strHtml);
            initClickNode();
        }
        else {
            //在发送请求之前执行事件            options.onBeforeLoad.call(that, options.param);
            if (!options.url)
                return;
            //发送远程请求获得data
            $.getJSON(options.url, options.param, function (data) {
                strHtml = initTree(data);
                that.html(strHtml);
                initClickNode();

                //请求完成之后执行事件                options.onLoadSuccess.call(that, data);
            });
        }

        //注册节点的点击事件function initClickNode() {
            $(‘.tree li‘).addClass(‘parent_li‘).find(‘ > span‘).attr(‘title‘, ‘收起‘);
            $(‘.tree li.parent_li > span‘).on(‘click‘, function (e) {
                var children = $(this).parent(‘li.parent_li‘).find(‘ > ul > li‘);
                if (children.is(":visible")) {
                    children.hide(‘fast‘);
                    $(this).attr(‘title‘, ‘展开‘).find(‘ > i‘).addClass(‘icon-plus-sign‘).removeClass(‘icon-minus-sign‘);
                } else {
                    children.show(‘fast‘);
                    $(this).attr(‘title‘, ‘收起‘).find(‘ > i‘).addClass(‘icon-minus-sign‘).removeClass(‘icon-plus-sign‘);
                }

                $(‘.tree li[class="parent_li"]‘).find("span").css("background-color", "transparent");
                $(this).css("background-color", "#428bca");

                options.onClickNode.call($(this), $(this));
            });
        };

        //递归拼接html构造树形子节点function initTree(data) {
            var strHtml = "";
            for (var i = 0; i < data.length; i++) {
                var arrChild = data[i].nodes;
                var strHtmlUL = "";
                var strIconStyle = "icon-leaf";
                if (arrChild && arrChild.length > 0) {
                    strHtmlUL = "<ul>";
                    strHtmlUL += initTree(arrChild) + "</ul>";
                    strIconStyle = "icon-minus-sign";
                }
                
                strHtml += "<li id=\"li_" + data[i].id + "\"><span id=\"span_" + data[i].id + "\"><i class=\"" + strIconStyle + "\"></i>" + data[i].text + "</span>" + strHtmlUL + "</li>";

            }
            return strHtml;
        };
    };

    //默认参数
    $.fn.jqtree.defaults = {
        url: null,
        param: null,
        data: null,
        onBeforeLoad: function (param) { },
        onLoadSuccess: function (data) { },
        onClickNode: function (selector) { }
    };

})(jQuery);

            <
            div 
            class
            ="tree well"
            >
            <
            ul 
            id
            ="ul_tree"
            >
            </
            ul
            >
            </
            div
            >
        

            var testdata = [{
    id: ‘1‘,
    text: ‘系统设置‘,
    nodes: [{
        id: ‘11‘,
        text: ‘编码管理‘,
        nodes: [{
            id: ‘111‘,
            text: ‘自动管理‘,
            nodes: [{
                id: ‘1111‘,
                text: ‘手动管理‘,
                nodes: [{
                    id: ‘11111‘,
                    text: ‘底层管理‘,
                }]
            }]
        }]
    }]
}, {
    id: ‘2‘,
    text: ‘基础数据‘,
    nodes: [{
        id: ‘21‘,
        text: ‘基础特征‘
    }, {
        id: ‘22‘,
        text: ‘特征管理‘
    }]
}];

$(function () {
    $("#ul_tree").jqtree({
        data: testdata,
        param: { },
        onBeforeLoad: function (param) {
        },
        onLoadSuccess: function (data) {  
        },
        onClickNode: function (selector) {
        }
    });
});

            public
            class
             Tree
    {
        
            public
            string id { get; set; }
        publicstring text { get; set; }
        publicobject nodes { get; set; }
    }

            　　　　 //
            返回tree的节点数据
            public
             JsonResult GetTreeData()
        {
            
            var lstRes = GetNode(1);
            return Json(lstRes, JsonRequestBehavior.AllowGet);
        }

        public List<Tree> GetNode(int iNum)
        {
            var lstRes = new List<Tree>();
            if (iNum > 5)
            {
                return lstRes;
            }
            for (var i = 1; i < 3; i++)
            {
                var oNode = new Tree { id = Guid.NewGuid().ToString(), text = iNum + "级节点" + i };
                var lstRes2 = GetNode(iNum + 1);
                oNode.nodes = lstRes2;
                lstRes.Add(oNode);
            }
            return lstRes;
        }

$(function () {
    $("#ul_tree").jqtree({
        url: "/Home/GetTreeData",
        param: { },
        onBeforeLoad: function (param) {
        },
        onLoadSuccess: function (data) {
        },
        onClickNode: function (selector) {
        }
    });
});