Bootstrap树形组件jqTree的简单封装(bootstrap 树)

编辑：rootadmin

推荐整理分享Bootstrap树形组件jqTree的简单封装(bootstrap 树)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:bootstrap 树形,bootstrap树形结构,bootstrap树状分级菜单,bootstrap树形结构,bootstrap treegrid,bootstrap 树形,bootstrap 树,bootstrap 树形,内容如对您有帮助，希望把文章链接给更多的朋友！

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

全部收起

展开

全部展开

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

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

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

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