JS組件系列——分享本身封裝的Bootstrap樹形組件：jqTree

 前言：以前的一篇介紹了下如何封裝本身的組件，這篇再次來體驗下本身封裝組件的樂趣。看過博主博客的園友應該記得以前分享過一篇樹形菜單的使用JS組件系列——Bootstrap 樹控件使用經驗分享，這篇裏面第一個Jquery Tree，只是用簡單樣式和js去實現了效果，沒有給出一個系統的封裝，這篇博主就來試試在此樣式的基礎上封裝一個稍微完整點的樹形組件。

1、組件效果預覽

其實效果和以前的那個差很少，博主只是在以前的基礎上加了一個選中的背景色。

所有收起

展開

所有展開

2、代碼示例

其實效果很簡單，重點來看看代碼是如何實現封裝的。仍是老規矩，將已經實現的代碼貼出來，而後再來一步一步講解。

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

    $.fn.jqtree = function (options) {
        //合併默認參數和用戶傳過來的參數
        options = $.extend({}, $.fn.jqtree.defaults, options || {});

        var that = $(this);
        var strHtml = "";
        //若是用戶傳了data的值，則直接使用data，不然發送ajax請求去取data
        if (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);

一、封裝說明，來簡單看看以上代碼

（1）使用 (function ($) {})(jQuery) 這種匿名函數聲明並馬上執行的方式的做用是向jquery對象裏面增長一個自定義的方法，若是對這種寫法不懂的能夠看看上篇說明JS組件系列——封裝本身的JS組件，你也能夠。這樣封裝之後，咱們能夠直接經過 $("#id").jqtree({}); 這種寫法來初始化該樹形組件。

（2）定義默認參數後，用戶能夠只傳本身須要傳遞的參數，對於不須要的參數，直接使用默認值就好。這也就是爲何不少bootstrap組件都有一個默認參數列表這麼一個東東的緣由。

（3）封裝後的組件同時支持兩種傳遞數據的方式，若是用戶直接傳遞了data參數，就直接使用data參數初始化，不然，就同url發送ajax請求去後臺取數據。

（4）若是是url方式取數據，用戶能夠在組件加載前和加載完成後自定義事件處理方法。對應的是上面的onBeforeLoad和onLoadSuccess。onLoadSuccess事件的參數對應着ajax請求的data數據。有時須要在組件加載完成以後作一些特殊處理，能夠在這個方法裏面寫。

（5）能夠自定義節點的click事件處理方法，對應的是上面的onClickNode。參數傳遞的是當前點擊節點的jquery對象。

二、組件調用

說了這麼多，那麼該如何使用呢？

首先咱們html只須要一個空的ul標籤

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

上面說了，組件能夠同時支持兩種調用方式：

1）直接傳Json數組；

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) {
        }
    });
});

2）經過URL遠程獲取數據：

後臺C#請求方法，構造上面data格式的數據類型。

    public class Tree
    {
        public string id { get; set; }
        public string text { get; set; }
        public object 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) {
        }
    });
});

onLoadSuccess事件調試看看

onClickNode事件調試看看，selector對應着當前的點擊的節點的jquery對象。

3、小結

以上就是對jquery tree的一個簡單封裝，今天剛剛完成的第一個版本，可能效果不太好，但基本的功能有了，後面還有待優化。歡迎園友們拍磚！