开发者社区> 嗯哼9925> 正文

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

简介:
+关注继续查看

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

一、组件效果预览

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

全部收起

展开

全部展开

二、代码示例

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

复制代码
(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、封装说明,来简单看看以上代码

(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标签

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

三、小结

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

 




本文转自懒得安分博客园博客,原文链接:http://www.cnblogs.com/landeanfen/p/5124971.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
angular定制组件-bootstrap(css框架)
需要的文件 bootstrap.css ui-bootstrap-tpls.js 模态框 angular定制的bootstrap的模态框,可以方便地将视图与控制器绑定。 模块的定义与模块的控制器: //定义模块时引入依赖 angular .module('myApp', [ 'ui.bootstrap' ]); //定义控制器时传入依赖 angu
1714 0
34_Bootstrap组件_面版,具有响应式特性的嵌入内容,Well|学习笔记
快速学习34_Bootstrap组件_面版,具有响应式特性的嵌入内容,Well
30 0
Flex在IFrame组件之下JS和as的相互调用
Flex嵌入在页面中时,JS和as的相互调用是比较常用的技巧。在普通嵌入下,JS和as相互调用的资料比较常见 import flash.
758 0
React源码分析5 -- 组件通信,refs,key,ReactDOM
React源码系列文章,请多支持: [React源码分析1 — 组件和对象的创建(createClass,createElement)](https://www.atatech.org/articles/72905) [React源码分析2 — React组件插入DOM流程](http://www.atatech.org/articles/72908) [React源码分析3 — React
3715 0
【Kubernetes系列】第5篇 Ingress controller - traefik组件介绍
1. 概述 为了能够让Ingress资源能够工作,在Kubernetes集群中必须至少有一个运行中的ingress controller组件。也就是说如果在kubernetes集群中没有一个ingress controller组件,只是定义了ingress资源,其实并不会实现http、https协议的请求转发、负载均衡等功能。
1251 0
Bootstrap File Input,最好用的文件上传组件(2)
Bootstrap File Input,最好用的文件上传组件
32 0
+关注
4716
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载