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 css在IE和Firefox中区别分析
Feb 18 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 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获取网页内容方法总结
2008/12/04 PHP
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
Python 查找字符在字符串中的位置实例
2018/05/02 Python
mac下如何将python2.7改为python3
2018/07/13 Python
Python 多维List创建的问题小结
2019/01/18 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
Python读写文件基础知识点
2019/06/10 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
python实现ip地址的包含关系判断
2020/02/07 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
python为什么会环境变量设置不成功
2020/06/23 Python
python openssl模块安装及用法
2020/12/06 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
大学生文员专业个人求职信范文
2014/01/05 职场文书
社区党员先进事迹
2014/01/22 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书