使用jsTree树形控件【1】入门

下载控件

jsTree下载。

导入控件主题

<link rel="stylesheet" href="dist/themes/default/style.min.css" />

创建容器

也就是包含jsTree控件的元素,一般使用<div>就可以了。

 <div id="jstree_demo_div"></div>

引入jQuery

jsTree依赖于jQuery,所以需要引入jQuery:

<script src="dist/libs/jquery.js"></script>

引入jsTree

部署环境使用压缩版的jsTree.min.js,如果是开发环境可以使用jsTree.js

<script src="dist/jstree.min.js"></script>

创建jsTree实例

DOM加载完毕之后,就可以创建jsTree实例对象了。

$(function () { $('#jstree_demo_div').jstree(); });

监听事件

jsTree使用事件来监听用户与属性控件之间的交互,所以给jsTree绑定事件也很容易,下面这个例子监听选择事件

$('#jstree_demo_div').on("changed.jstree", function (e, data) {
  console.log(data.selected);
});

与jsTree实例进行交互

创建完实例之后,就可以调用实例的方法了,下面三个方法实现的功能是一样的:

$('button').on('click', function () {
  $('#jstree').jstree(true).select_node('child_node_1');
  $('#jstree').jstree('select_node', 'child_node_1');
  $.jstree.reference('#jstree').select_node('child_node_1');
});

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏中国白客联盟

js之获取浏览器保存的账号密码(二)

正常情况下,当用户登录系统的时候保存了登录的账号密码的话,我们是可以利用js获取到他的表单里面的值发送过来,达到获取到他的账号密码进行下一步渗透。

8244
来自专栏Spring相关

在Vue的webpack中结合runder函数

npm i vue-loader vue-template-compiler -D

732
来自专栏腾讯云serverless的专栏

使用腾讯云 SCF 云函数压缩 COS 对象存储文件

如何处理 COS 对象存储中的大量文件打包需求?或许 SCF 无服务器云函数能助你一臂之力!

1.9K2
来自专栏杨龙飞前端

bootstrap file input 官方文档翻译

4757
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2.2.5 HTML5程序调试

假设有一个网页,由debug.html何debug.js构成,其中debug.html内容如下:

1370
来自专栏前端小叙

一分钟理清Vue-cli 代码构建步骤。

1、 $ npm install vue -cli -g $ vue init webpack project-name $ cd project-name...

32510
来自专栏自由而无用的灵魂的碎碎念

去掉windows8.1鸡肋的开始按钮

可以使用我分享的链接下载startisgone: http://download.csdn.net/detail/wangallan/8972885

962
来自专栏Play & Scala 技术分享

[Play-Scala-2.2.1] 接收jQuery Post的原始字符串请求

3208
来自专栏静默虚空的博客

Intellij实用技巧

快捷键 Tradition 快捷键 介绍 Ctrl + Z 撤销 Ctrl + Shift + Z 取消撤销 Ctrl + X 剪切 ...

1886
来自专栏静默虚空的博客

Intellij IDEA 使用小结

快捷键 核心快捷键 IntelliJ IDEA 作为一个以快捷键为中心的 IDE,为大多数操作建议了键盘快捷键。在这个主题中,您可以找到最不可缺少的列表,使 I...

3096

扫码关注云+社区

领取腾讯云代金券