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 居中漂浮广告
Mar 21 Javascript
js下通过getList函数实现分页效果的代码
Sep 17 Javascript
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
Ext JS添加子组件的误区探讨
Jun 28 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
Seajs源码详解分析
Apr 02 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 Javascript
浅谈TypeScript 索引签名的理解
Oct 16 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
星际争霸任务指南——人族
2020/03/04 星际争霸
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
php中常用的预定义变量小结
2012/05/09 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
PHP关联数组的10个操作技巧
2013/01/21 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
PHP发送短信代码分享
2015/08/11 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
js实现表格字段排序
2014/02/19 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
2015/12/01 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python文件和目录操作函数小结
2014/07/11 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
教师师德承诺书
2014/03/26 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
工程质检员岗位职责
2015/04/08 职场文书
golang 实现Location跳转方式
2021/05/02 Golang
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS