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

「爱情、让人受尽委屈。」 2022-07-13 02:50 476阅读 0赞

前言：之前的一篇介绍了下如何封装自己的组件，这篇再次来体验下自己封装组件的乐趣。看过博主博客的园友应该记得之前分享过一篇树形菜单的使用[JS组件系列——Bootstrap 树控件使用经验分享][JS_Bootstrap]，这篇里面第一个Jquery Tree，只是用简单样式和js去实现了效果，没有给出一个系统的封装，这篇博主就来试试在此样式的基础上封装一个稍微完整点的树形组件。

## 一、组件效果预览 ##

其实效果和之前的那个差不多，博主只是在之前的基础上加了一个选中的背景色。

全部收起

![459756-20160119160910281-924640636.png][]

展开

![459756-20160119160924328-1088629202.png][]

全部展开

![459756-20160119160932203-2060986743.png][]

## 二、代码示例 ##

其实效果很简单，重点来看看代码是如何实现封装的。还是老规矩，将已经实现的代码贴出来，然后再来一步一步讲解。

![复制代码][copycode.gif]

![复制代码][copycode.gif]

### 1、封装说明，来简单看看以上代码 ###

（1）使用 (function ($) \{\})(jQuery) 这种匿名函数声明并立刻执行的方式的作用是向jquery对象里面增加一个自定义的方法，如果对这种写法不懂的可以看看上篇说明[JS组件系列——封装自己的JS组件，你也可以][JS_JS]。这样封装以后，我们可以直接通过 $("\#id").jqtree(\{\}); 这种写法来初始化该树形组件。

（2）定义默认参数后，用户可以只传自己需要传递的参数，对于不需要的参数，直接使用默认值就好。这也就是为什么很多bootstrap组件都有一个默认参数列表这么一个东东的原因。

（3）封装后的组件同时支持两种传递数据的方式，如果用户直接传递了data参数，就直接使用data参数初始化，否则，就同url发送ajax请求去后台取数据。

（4）如果是url方式取数据，用户可以在组件加载前和加载完成后自定义事件处理方法。对应的是上面的onBeforeLoad和onLoadSuccess。onLoadSuccess事件的参数对应着ajax请求的data数据。有时需要在组件加载完成之后做一些特殊处理，可以在这个方法里面写。

（5）可以自定义节点的click事件处理方法，对应的是上面的onClickNode。参数传递的是当前点击节点的jquery对象。

### 2、组件调用 ###

说了这么多，那么该如何使用呢？

首先我们html只需要一个空的ul标签

上面说了，组件可以同时支持两种调用方式：

1）直接传Json数组；

![复制代码][copycode.gif]

![复制代码][copycode.gif]

2）通过URL远程获取数据：

后台C\#请求方法，构造上面data格式的数据类型。

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

![复制代码][copycode.gif]

//返回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;
            }

![复制代码][copycode.gif]

前端调用

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

onLoadSuccess事件调试看看

![459756-20160119164744172-2034654624.png][]

onClickNode事件调试看看，selector对应着当前的点击的节点的jquery对象。

![459756-20160119164532218-611941907.png][]

## 三、小结 ##

以上就是对jquery tree的一个简单封装，今天刚刚完成的第一个版本，可能效果不太好，但基本的功能有了，后面还有待优化。欢迎园友们拍砖！

[JS_Bootstrap]: http://www.cnblogs.com/landeanfen/p/5124913.html
[459756-20160119160910281-924640636.png]: /images/20220713/e133736a33bd4d14ae1bd9e48a5d7829.png
[459756-20160119160924328-1088629202.png]: /images/20220713/6edc512ba1b84ec19e514fd8d0299d64.png
[459756-20160119160932203-2060986743.png]: /images/20220713/412daf9897dc4952864c7ae7251793b5.png
[copycode.gif]: /images/20220713/0a7ea9997ce942d9aa767855b0d15543.png
[JS_JS]: http://www.cnblogs.com/landeanfen/p/5124542.html
[459756-20160119164744172-2034654624.png]: /images/20220713/146aab593f844795977ba5d3755abc70.png
[459756-20160119164532218-611941907.png]: /images/20220713/db63b7659ddc42079b374a4276fe611f.png