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 相关文章推荐
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
JSONP之我见
Mar 24 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
node使用Koa2搭建web项目的方法
Oct 17 Javascript
详解在vue-test-utils中mock全局对象
Nov 07 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
vue 授权获取微信openId操作
Nov 13 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/07/12 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
node.js操作MongoDB的实例详解
2017/10/11 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
js实现每日签到功能
2018/11/29 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
Python分类测试代码实例汇总
2020/07/23 Python
详解Python模块化编程与装饰器
2021/01/16 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
Hotels.com南非:酒店预订
2017/11/02 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
文秘应聘自荐书范文
2014/02/18 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
企业工会工作总结2015
2015/05/13 职场文书
运动会通讯稿50字
2015/07/20 职场文书
python编程项目中线上问题排查与解决
2021/11/01 Python
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript