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 相关文章推荐
js操作ajax返回的json的注意问题!
Feb 23 Javascript
js获取多个tagname的节点数组
Sep 22 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
轻松实现js选项卡切换效果
Sep 24 Javascript
详解js前端代码异常监控
Jan 11 Javascript
10个最优秀的Node.js MVC框架
Aug 24 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
JavaScript ES 模块的使用
Nov 12 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缓存函数的使用说明
2013/05/10 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
php生成HTML文件的类方法
2019/10/11 PHP
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
js 数据类型转换总结笔记
2011/01/17 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
Javascript学习指南
2014/12/01 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
实例浅析js的this
2016/12/11 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
一些.net面试题
2014/10/06 面试题
环境科学毕业生自荐信
2013/11/21 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
财务务虚会发言材料
2014/10/20 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
Python基础之条件语句详解
2021/06/16 Python
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python
Golang 字符串的常见操作
2022/04/19 Golang