Bootstrap树形组件jqTree的简单封装
一、组件效果预览其实效果和之前的那个差不多,博主只是在之前的基础上加了一个选中的背景色。全部收起 展开 全部展开 二、代码示例其实效果很简单,重点来看看代码是如何实现封装的。还是老规矩,将已经实现的代码贴出来,然后再来一步一步讲解。$.fn.jqtree = function (options) {
//合并默认参数和用户传过来的参数 options = $.extend({},$.fn.jqtree.defaults,options || {}); var that = $(this);
}); //注册节点的点击事件
}); //递归拼接html构造树形子节点
strHtmlUL += initTree(arrChild) + " strIconStyle = "icon-minus-sign"; }
} //默认参数 })(jQuery); 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数组; $(function () {
$("#ul_tree").jqtree({ data: testdata,param: { },onBeforeLoad: function (param) { },onLoadSuccess: function (data) { },onClickNode: function (selector) { } }); }); 2)通过URL远程获取数据: 后台C#请求方法,构造上面data格式的数据类型。 //返回tree的节点数据
public JsonResult GetTreeData() { var lstRes = GetNode(1); return Json(lstRes,JsonRequestBehavior.AllowGet); } public List 前端调用 onLoadSuccess事件调试看看 onClickNode事件调试看看,selector对应着当前的点击的节点的jquery对象。 三、小结如果大家还想深入学习,可以点击进行学习,再为大家附两个精彩的专题: 以上就是对jquery tree的一个简单封装,今天刚刚完成的第一个版本,可能效果不太好,但基本的功能都已经实现。 希望本文对大家学习javascript程序设计有所帮助。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- AngularJS – Angular UI-Router只重新加载嵌套视图,而不是
- 暂时禁用vim中的BufWrite脚本
- angularjs – Angular:在一个Service中有多个函数
- 角度 – 在* ngFor中使用具有可变参数的切片管道
- Angular5 服务端渲染实战
- rxjs5 / Angular – 清除ReplaySubject缓冲区
- Angular4.x+Ionic3 踩坑之路之Ionic使用指定IP地址启动服务
- 基于gSoap框架的webservice应用一
- 如何使用scala.Float将Scala Map转换为Java Map转换为java.
- 使用 AngularJS 从零构建大型应用