Bootstrap树形组件jqTree的简单封装_Javascript教程-查字典教程网

Bootstrap树形组件jqTree的简单封装

摘要：一、组件效果预览其实效果和之前的那个差不多，博主只是在之前的基础上加了一个选中的背景色。全部收起展开全部展开二、代码示例其实效果很简单，重点...

一、组件效果预览

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

全部收起

Bootstrap树形组件jqTree的简单封装1

展开

Bootstrap树形组件jqTree的简单封装2

全部展开

Bootstrap树形组件jqTree的简单封装3

二、代码示例

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

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

（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对象。

2、组件调用

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

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

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

1）直接传Json数组；

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事件调试看看

Bootstrap树形组件jqTree的简单封装4