Bootstrap树形组件jqTree的简单封装_javascript技巧

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

全部收起

展开

全部展开

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

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

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

三、小结

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

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

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索bootstrap
, 树形组件
jqTree
vue树形组件、react 树形组件、树形组件、js 树形组件、bootstrap 树形菜单,以便于您获取更多的相关知识。

时间: 2024-10-22 23:01:32

Bootstrap树形组件jqTree的简单封装_javascript技巧的相关文章

Bootstrap CSS组件之下拉菜单(dropdown)_javascript技巧

Bootstrap下拉菜单,常用在开发项目中,今天为大家介绍介绍 dropdown.dropdown-menu.dropdown-header.divider.dropdown-submenu 例子见下拉菜单.html //源码 .dropup, .dropdown { position: relative; } .dropdown-toggle:focus { outline: 0; } .dropdown-menu { position: absolute; top: 100%; left:

Bootstrap CSS组件之大屏幕展播_javascript技巧

在设计网页布局的时候,经常会有大屏内容的显示jumbotron 顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin). 源码中可以看出: 如果jumbotron放在container样式内,则显示圆角;如果不放在里边,则不会显示圆角. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-e

Bootstrap每天必学之简单入门_javascript技巧

在上一篇文章中主要是简单的介绍了一下Bootstrap,这篇文章进一步了解相关内容,为之后的学习打下基础. 从Visual Studio 2013前不久的更新中看,微软是将Bootstrap3的新版本加入到了VS当中,所以学习Bootstrap3也没什么顾虑了.一.下载BootStrap官网的文件很详细简单,对于下载来说也有多种方式.对于我们开发者来说,估计最简单的方式就是直接下载编译和压缩后的CSS.JavaScript文件,另外还包含字体文件,但是不包含文档和源码文件.打开解压包之后可以发现

Bootstrap CSS组件之导航条(navbar)_javascript技巧

本文主要大家分享了响应式导航条的具体代码,供大家参考,具体内容如下 1.基础导航条navbar navbar-default navbar-header navbar-brand nav navbar-nav 2.导航条中的表单navbar navbar-default navbar-header navbar-brand navbar-form 3.导航条中的按钮,文本,链接navbar-btn.bavbar-text.navbar-link 4.导航条中的项目进行左右浮动navbar-lef

javascript 新闻列表排序简单封装_javascript技巧

2005-09-02 网页标准和标准指南下载 2005-07-18 使用模块快速启动你的 2005-01-29 使用模块快速来排列书序啊新闻能吗 2005-02-15 SEO基础 2005-05-15 SEO基础及世界观人生观理论很长啊啊啊啊啊 简单说明: 调用方法:list_sort(list_id,btn1,btn2) list_id-- 新闻列表ul的id: btn1-- 按字数排序事件的id: btn2-- 按日期排序事件的id:

Bootstrap CSS组件之按钮组(btn-group)_javascript技巧

.btn-toolbar(有助于几组btn-group结合到一个btn-toolbar中)/.btn-group(btn-group-lg/btn-group-sm/btn-group-xs)/.btn-group-vertical 容器内的按钮,可以使用button元素,也可以使用a元素,产生的效果是一样的. 容器的多个分组以table风格进行显示,每组之间保持5px的left margin //源码 .btn-toolbar:before, .btn-toolbar:after{ displ

封装的dialog插件 基于bootstrap模态对话框的简单扩展_javascript技巧

在使用bootstrap 模态对话框时需要在页面写对话框html,如果一个页面有许多地方需要对话框,那意味着需要写多个,感觉很麻烦,平时不太习惯bootstrap 模态对话框这种方式,所以做了个简单封装及扩展,增加了自定义标题,宽度和高度,并根据宽高居中显示. 默认属性: id:"modal",//弹窗id title:"dialog",//弹窗标题 width:"600",//弹窗宽度,暂时不支持% height:"500"

一步一步封装自己的HtmlHelper组件BootstrapHelper(三)_javascript技巧

前言:之前的两篇封装了一些基础的表单组件,这篇继续来封装几个基于bootstrap的其他组件.和上篇不同的是,这篇的有几个组件需要某些js文件的支持. BootstrapHelper系列文章目录 C#进阶系列--一步一步封装自己的HtmlHelper组件:BootstrapHelper C#进阶系列--一步一步封装自己的HtmlHelper组件:BootstrapHelper(二) C#进阶系列--一步一步封装自己的HtmlHelper组件:BootstrapHelper(三:附源码) 一.Nu

Bootstrap组件系列之福利篇几款好用的组件(推荐二)_javascript技巧

在上篇文章给大家介绍了Bootstrap组件系列之福利篇几款好用的组件(推荐),接下来本文给大家介绍Bootstrap组件系列之福利篇几款好用的组件(推荐二),感兴趣的朋友一起学习吧!  七.多值输入组件manifest 关于文本框的多值输入,一直是一个比较常见的需求,今天博主推荐一款好用的多值输入组件给大家,不要谢我,请叫我"红领巾"! 1.效果展示 本地多值输入框 远程多值输入框 2.源码说明 感谢开源社区,感谢那些喜欢分享的可爱的人儿.开源地址. 3.代码示例 (1)本地多值输入