使用jsTree树形控件【3】HTML结构

基本结构

jsTree可以将无序列表转换成树形结构,最简单的HTML结构就是使用<ul>以及<li>,而且最好外面还嵌套了一个<div> $('#html1').jstree() HTML结构如下:

<div id="html1">
  <ul>
    <li>Root node 1</li>
    <li>Root node 2</li>
  </ul>
</div>

带子节点的父节点

可以使用<ul>来创建父节点,在jsTree内部会将<li>中的文本转换成链接,但是点击这个链接并不会定向到一个新的页面

<div id="html1">
  <ul>
    <li>Root node 1
      <ul>
        <li>Child node 1</li>
        <li><a href="#">Child node 2</a></li>
      </ul>
    </li>
  </ul>
</div>

使用class设置节点的初始状态

可以设置<a>元素的class为jstree-clicked来选中相应节点,还可以设置<li>元素的class为jstree-open来展开子节

…
<li class="jstree-open" id="node_1">Root</li>
  <ul>
    <li>
      <a href="#" class="jstree-clicked">Child</a>
    </li>
  </ul>
</li>
…

通过data属性设置节点的初始状态

还可以通过data-jstree属性设置节点的状态,可以使用下面的几个值的任意组合:openedselecteddisabled:glyphicon glyphicon-leaf`。

<li data-jstree='{"opened":true,"selected":true}'>Root
  <ul>
    <li data-jstree='{"disabled":true}'>Child</li>
    <li data-jstree='{"icon":"//jstree.com/tree.png"}'>
      Child</li>
    <li data-jstree='{"icon":"glyphicon glyphicon-leaf"}'>
      Child</li>
  </ul>
</li>

使用ajax异步加载

jsTree还支持通过AJAX异步加载节点,HMTL的结构还是一样的,唯一的区别是节点的HTML内容是从服务器返回的。 使用AJAX异步加载必须配置$.jstree.defaults.core.data参数,ajax的参数与jQuery中的ajax请求类似。这里在返回的内

跟标准的AJAX请求不同的是,这个AJAX请求中,data以及url可以是个函数,只要函数返回相应的值即可。

$('#tree').jstree({
'core' : {
  'data' : {
    'url' : 'ajax_nodes.html',
    'data' : function (node) {
      return { 'id' : node.id };
    }
  }
});

// Example response:
<ul>
<li>Node 1</li>
<li class="jstree-closed">Node 2</li>
</ul>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native之React速学教程(下)

React Native之React速学教程(下) 本文出自《React Native学习笔记》系列文章。 React Native是基于React的,在开发R...

3215
来自专栏卡少编程之旅

四个Vue的写法优化技巧

3546
来自专栏JetpropelledSnake

Vue学习笔记之Vue指令系统介绍

所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了。

1054
来自专栏更流畅、简洁的软件开发方式

使用接口来统一控件的取值、赋值和初始化

      这里说的控件主要指的是文本框、下拉列表框这一类的控件,用户使用这些控件输入数据,然后我们需要提取这些数据进行处理。但是不同的控件有不同的取值方式,比...

2036
来自专栏Java技术分享圈

杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

D.closest()获得D所有父元素,含自己(D、B、A)与 D.parents() 对比

1592
来自专栏Android干货

安卓开发中strings.xml的使用

2115
来自专栏日常学python

python爬虫常用库之BeautifulSoup详解

这是日常学python的第16篇原创文章 经过了前面几篇文章的学习,估计你已经会爬不少中小型网站了。但是有人说,前面的正则很难唉,学不好。正则的确很难,有人说...

2937
来自专栏郭少华

(第二季)Vue2.0-全局API

全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,说的简单些就是,在构造器外部用Vue提供给我们的API...

1081
来自专栏JadePeng的技术博客

Angular快速学习笔记(3) -- 组件与模板

1953
来自专栏超然的博客

不容忽略的——CSS规范

         当A、B、C、...它们类型相同且外形相似区别不大,那么就以它们中出现率最高的做成基类,其他做成基类的扩展。

1142

扫码关注云+社区

领取腾讯云代金券