Bootstrap树形组件jqTree的简单封装

Bootstrap树形组件jqTree的简单封装

转载 最后发布于2016-10-05 22:43:03 阅读数 8388  收藏
展开

Bootstrap树形组件jqTree的简单封装

今日需要用到这个结构,网上百度到代码,感觉还不错,就拿下来用了一下,分享给大家,喜欢点赞,不喜勿喷!
 
效果如下:
 
以下是代码:复制下去,直接能用,前提是有网,不然就只有导入本地的js文件才行!
  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
  6.  
    <title>bootstrap树形结构</title>
  7.  
    <meta name="viewport" content="width=device-width, initial-scale=1">
  8.  
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
  9.  
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  10.  
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  11.  
    </head>
  12.  
    <body>
  13.  
    <div class="tree well">
  14.  
    <ul id="ul_tree"></ul>
  15.  
    </div>
  16.  
    <script type="text/javascript">
  17.  
    var testdata = [{
  18.  
    id: '1',
  19.  
    text: '系统设置',
  20.  
    nodes: [{
  21.  
    id: '11',
  22.  
    text: '编码管理',
  23.  
    nodes: [{
  24.  
    id: '111',
  25.  
    text: '自动管理',
  26.  
    nodes: [{
  27.  
    id: '1111',
  28.  
    text: '手动管理',
  29.  
    nodes: [{
  30.  
    id: '11111',
  31.  
    text: '底层管理',
  32.  
    }]
  33.  
    }]
  34.  
    }]
  35.  
    }]
  36.  
    }, {
  37.  
    id: '2',
  38.  
    text: '基础数据',
  39.  
    nodes: [{
  40.  
    id: '21',
  41.  
    text: '基础特征'
  42.  
    }, {
  43.  
    id: '22',
  44.  
    text: '特征管理'
  45.  
    }]
  46.  
    }];
  47.  
     
  48.  
     
  49.  
    (function ($) {
  50.  
    //使用js的严格模式
  51.  
    'use strict';
  52.  
     
  53.  
    $.fn.jqtree = function (options) {
  54.  
    //合并默认参数和用户传过来的参数
  55.  
    options = $.extend({}, $.fn.jqtree.defaults, options || {});
  56.  
     
  57.  
    var that = $(this);
  58.  
    var strHtml = "";
  59.  
    //如果用户传了data的值，则直接使用data，否则发送ajax请求去取data
  60.  
    if (options.data) {
  61.  
    strHtml = initTree(options.data);
  62.  
    that.html(strHtml);
  63.  
    initClickNode();
  64.  
    }
  65.  
    else {
  66.  
    //在发送请求之前执行事件
  67.  
    options.onBeforeLoad.call(that, options.param);
  68.  
    if (!options.url)
  69.  
    return;
  70.  
    //发送远程请求获得data
  71.  
    $.getJSON(options.url, options.param, function (data) {
  72.  
    strHtml = initTree(data);
  73.  
    that.html(strHtml);
  74.  
    initClickNode();
  75.  
     
  76.  
    //请求完成之后执行事件
  77.  
    options.onLoadSuccess.call(that, data);
  78.  
    });
  79.  
    }
  80.  
     
  81.  
    //注册节点的点击事件
  82.  
    function initClickNode() {
  83.  
    $('.tree li').addClass('parent_li').find(' > span').attr('title', '收起');
  84.  
     
  85.  
    //设置节点默认关闭状态
  86.  
    $('.tree li.parent_li > span').parent('li.parent_li').find(' > ul > li').hide('fast');
  87.  
    $('.tree li.parent_li > span').on('click', function (e) {
  88.  
    var children = $(this).parent('li.parent_li').find(' > ul > li');
  89.  
    if (children.is(":visible")) {
  90.  
    children.hide('fast');
  91.  
    $(this).attr('title', '展开').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
  92.  
    } else {
  93.  
    children.show('fast');
  94.  
    $(this).attr('title', '收起').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
  95.  
    }
  96.  
     
  97.  
    $('.tree li[class="parent_li"]').find("span").css("background-color", "transparent");
  98.  
    $(this).css("background-color", "#428bca");
  99.  
     
  100.  
    options.onClickNode.call($(this), $(this));
  101.  
    });
  102.  
    };
  103.  
     
  104.  
    //递归拼接html构造树形子节点
  105.  
    function initTree(data) {
  106.  
    var strHtml = "";
  107.  
    for (var i = 0; i < data.length; i++) {
  108.  
    var arrChild = data[i].nodes;
  109.  
    var strHtmlUL = "";
  110.  
    var strIconStyle = "icon-leaf";
  111.  
    if (arrChild && arrChild.length > 0) {
  112.  
    strHtmlUL = "<ul>";
  113.  
    strHtmlUL += initTree(arrChild) + "</ul>";
  114.  
    strIconStyle = "icon-minus-sign";
  115.  
    }
  116.  
     
  117.  
    strHtml += "<li style='list-style-type:none;' id=\"li_" + data[i].id + "\"><span id=\"span_" + data[i].id + "\"><i class=\"" + strIconStyle + "\"></i>" + data[i].text + "</span>" + strHtmlUL + "</li>";
  118.  
     
  119.  
    }
  120.  
    return strHtml;
  121.  
    };
  122.  
    };
  123.  
     
  124.  
    //默认参数
  125.  
    $.fn.jqtree.defaults = {
  126.  
    url: null,
  127.  
    param: null,
  128.  
    data: null,
  129.  
    onBeforeLoad: function (param) { },
  130.  
    onLoadSuccess: function (data) { },
  131.  
    onClickNode: function (selector) { }
  132.  
    };
  133.  
     
  134.  
    })(jQuery);
  135.  
    $(function () {
  136.  
    $("#ul_tree").jqtree({
  137.  
    data: testdata,
  138.  
    param: {},
  139.  
    onBeforeLoad: function (param) {
  140.  
    },
  141.  
    onLoadSuccess: function (data) {
  142.  
    },
  143.  
    onClickNode: function (selector) {
  144.  
    }
  145.  
    });
  146.  
    });
  147.  
    </script>
  148.  
    </body>
  149.  
    </html>
 
下面是转载地址的代码:

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

全部收起

 
1
展开

 
2
全部展开

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

 

  1.  
    (function ($) {
  2.  
    //使用js的严格模式
  3.  
    'use strict';
  4.  
     
  5.  
    $.fn.jqtree = function (options) {
  6.  
    //合并默认参数和用户传过来的参数
  7.  
    options = $.extend({}, $.fn.jqtree.defaults, options || {});
  8.  
     
  9.  
    var that = $(this);
  10.  
    var strHtml = "";
  11.  
    //如果用户传了data的值，则直接使用data，否则发送ajax请求去取data
  12.  
    if (options.data) {
  13.  
    strHtml = initTree(options.data);
  14.  
    that.html(strHtml);
  15.  
    initClickNode();
  16.  
    }
  17.  
    else {
  18.  
    //在发送请求之前执行事件
  19.  
    options.onBeforeLoad.call(that, options.param);
  20.  
    if (!options.url)
  21.  
    return;
  22.  
    //发送远程请求获得data
  23.  
    $.getJSON(options.url, options.param, function (data) {
  24.  
    strHtml = initTree(data);
  25.  
    that.html(strHtml);
  26.  
    initClickNode();
  27.  
     
  28.  
    //请求完成之后执行事件
  29.  
    options.onLoadSuccess.call(that, data);
  30.  
    });
  31.  
    }
  32.  
     
  33.  
    //注册节点的点击事件
  34.  
    function initClickNode() {
  35.  
    $('.tree li').addClass('parent_li').find(' > span').attr('title', '收起');
  36.  
    $('.tree li.parent_li > span').on('click', function (e) {
  37.  
    var children = $(this).parent('li.parent_li').find(' > ul > li');
  38.  
    if (children.is(":visible")) {
  39.  
    children.hide('fast');
  40.  
    $(this).attr('title', '展开').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
  41.  
    } else {
  42.  
    children.show('fast');
  43.  
    $(this).attr('title', '收起').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
  44.  
    }
  45.  
     
  46.  
    $('.tree li[class="parent_li"]').find("span").css("background-color", "transparent");
  47.  
    $(this).css("background-color", "#428bca");
  48.  
     
  49.  
    options.onClickNode.call($(this), $(this));
  50.  
    });
  51.  
    };
  52.  
     
  53.  
    //递归拼接html构造树形子节点
  54.  
    function initTree(data) {
  55.  
    var strHtml = "";
  56.  
    for (var i = 0; i < data.length; i++) {
  57.  
    var arrChild = data[i].nodes;
  58.  
    var strHtmlUL = "";
  59.  
    var strIconStyle = "icon-leaf";
  60.  
    if (arrChild && arrChild.length > 0) {
  61.  
    strHtmlUL = "<ul>";
  62.  
    strHtmlUL += initTree(arrChild) + "</ul>";
  63.  
    strIconStyle = "icon-minus-sign";
  64.  
    }
  65.  
     
  66.  
    strHtml += "<li id=\"li_" + data[i].id + "\"><span id=\"span_" + data[i].id + "\"><i class=\"" + strIconStyle + "\"></i>" + data[i].text + "</span>" + strHtmlUL + "</li>";
  67.  
     
  68.  
    }
  69.  
    return strHtml;
  70.  
    };
  71.  
    };
  72.  
     
  73.  
    //默认参数
  74.  
    $.fn.jqtree.defaults = {
  75.  
    url: null,
  76.  
    param: null,
  77.  
    data: null,
  78.  
    onBeforeLoad: function (param) { },
  79.  
    onLoadSuccess: function (data) { },
  80.  
    onClickNode: function (selector) { }
  81.  
    };
  82.  
     
  83.  
    })(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.  
    <div class="tree well">
  2.  
    <ul id="ul_tree">
  3.  
    </ul>
  4.  
    </div>

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

1）直接传Json数组；

 

  1.  
    var testdata = [{
  2.  
    id: '1',
  3.  
    text: '系统设置',
  4.  
    nodes: [{
  5.  
    id: '11',
  6.  
    text: '编码管理',
  7.  
    nodes: [{
  8.  
    id: '111',
  9.  
    text: '自动管理',
  10.  
    nodes: [{
  11.  
    id: '1111',
  12.  
    text: '手动管理',
  13.  
    nodes: [{
  14.  
    id: '11111',
  15.  
    text: '底层管理',
  16.  
    }]
  17.  
    }]
  18.  
    }]
  19.  
    }]
  20.  
    }, {
  21.  
    id: '2',
  22.  
    text: '基础数据',
  23.  
    nodes: [{
  24.  
    id: '21',
  25.  
    text: '基础特征'
  26.  
    }, {
  27.  
    id: '22',
  28.  
    text: '特征管理'
  29.  
    }]
  30.  
    }];
  31.  
     
  32.  
    $(function () {
  33.  
    $("#ul_tree").jqtree({
  34.  
    data: testdata,
  35.  
    param: { },
  36.  
    onBeforeLoad: function (param) {
  37.  
    },
  38.  
    onLoadSuccess: function (data) {
  39.  
    },
  40.  
    onClickNode: function (selector) {
  41.  
    }
  42.  
    });
  43.  
    });

 

 

2）通过URL远程获取数据：
后台C#请求方法，构造上面data格式的数据类型。
  1.  
    public class Tree
  2.  
    {
  3.  
    public string id { get; set; }
  4.  
    public string text { get; set; }
  5.  
    public object nodes { get; set; }
  6.  
    }
  7.  
     
  8.  
     
  9.  
     
  10.  
    　　　 //返回tree的节点数据
  11.  
    public JsonResult GetTreeData()
  12.  
    {
  13.  
    var lstRes = GetNode(1);
  14.  
    return Json(lstRes, JsonRequestBehavior.AllowGet);
  15.  
    }
  16.  
     
  17.  
    public List<Tree> GetNode(int iNum)
  18.  
    {
  19.  
    var lstRes = new List<Tree>();
  20.  
    if (iNum > 5)
  21.  
    {
  22.  
    return lstRes;
  23.  
    }
  24.  
    for (var i = 1; i < 3; i++)
  25.  
    {
  26.  
    var oNode = new Tree { id = Guid.NewGuid().ToString(), text = iNum + "级节点" + i };
  27.  
    var lstRes2 = GetNode(iNum + 1);
  28.  
    oNode.nodes = lstRes2;
  29.  
    lstRes.Add(oNode);
  30.  
    }
  31.  
    return lstRes;
  32.  
    }

 

前端调用
  1.  
    $(function () {
  2.  
    $("#ul_tree").jqtree({
  3.  
    url: "/Home/GetTreeData",
  4.  
    param: { },
  5.  
    onBeforeLoad: function (param) {
  6.  
    },
  7.  
    onLoadSuccess: function (data) {
  8.  
    },
  9.  
    onClickNode: function (selector) {
  10.  
    }
  11.  
    });
  12.  
    });

onLoadSuccess事件调试看看

 


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

 
5png

三、小结
以上就是对jquery tree的一个简单封装，今天刚刚完成的第一个版本，可能效果不太好，但基本的功能都已经实现。

 

以上就是本文的全部内容，希望对大家学习Bootstrap程序设计有所帮助。
 
 

本文引自:http://www.jb51.net/article/78643.htm

posted on 2020-03-11 17:34  曹明  阅读(143)  评论(0)    收藏  举报

博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3