Bootstrap树形组件jqTree的简单封装


Posted in Javascript onJanuary 25, 2016

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

全部收起

Bootstrap树形组件jqTree的简单封装

展开

Bootstrap树形组件jqTree的简单封装

全部展开

Bootstrap树形组件jqTree的简单封装

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

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

Bootstrap树形组件jqTree的简单封装

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

Bootstrap树形组件jqTree的简单封装

三、小结

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

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

希望本文对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript各种复制代码收集
Sep 20 Javascript
javascript工具库代码
Mar 29 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 Javascript
js实现索引图片切换效果
Nov 21 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
深入Vue-Router路由嵌套理解
Aug 13 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 Javascript
html中创建并调用vue组件的几种方法汇总
Nov 17 Javascript
javascript实现2016新年版日历
Jan 25 #Javascript
基于javascript实现图片左右切换效果
Jan 25 #Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 #Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 #Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 #Javascript
jQuery中inArray方法注意事项分析
Jan 25 #Javascript
jquery ui dialog替代confirm实例分析
Jan 25 #Javascript
You might like
通过对服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP base64+gzinflate压缩编码和解码代码
2008/10/03 PHP
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
PHPCMS的使用小结
2010/09/20 PHP
详解php实现页面静态化原理
2017/06/21 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
2016/12/26 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
详解AngularJS ng-class样式切换
2017/06/27 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
Python人脸识别初探
2017/12/21 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
python使用folium库绘制地图点击框
2018/09/21 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
安全资料员岗位职责
2013/12/14 职场文书
奶茶专卖店创业计划书
2014/01/18 职场文书
新年祝酒词大全
2015/08/11 职场文书