jstree 实例一

最新推荐文章于 2021-02-13 17:21:28 发布

摩羯座-小齐

最新推荐文章于 2021-02-13 17:21:28 发布

阅读量3.4k

点赞数

分类专栏： javascript 文章标签： xhtml themes apple html plugins icons

本文链接：https://blog.csdn.net/qlp3643_1/article/details/6101648

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

jstree 官方主页：http://www.jstree.com/

主要功能：

支持打开，关闭，重命名，创建，删除节点（通过预先定义好的规则）
支持多种回调函数（onchange, oncreate, ondelete, onload, 等等）
支持拖拉
支持多重选择
支持多种语言
支持主题（可以修改图标，大小和背景等等）
可以支持动态打开和关闭(configurable)
可选的快捷键导航
支持多个树形部件

开始简单实例一：

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html >
<script type="text/javascript" src="_lib/jquery.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></script>
<body>

<div id="demo1" class="demo">
<ul>
  <li id="phtml_1">
   <a href="#">Root node 1</a>
   <ul>
    <li id="phtml_2">
     <a href="#">Child node 1</a>
    </li>
    <li id="phtml_3">
     <a href="#">Child node 2</a>
    </li>
   </ul>
  </li>
  <li id="phtml_4">
   <a href="#">Root node 2</a>
  </li>
</ul>
</div>
<script type="text/javascript" class="source">
$(function () {
$("#demo1").jstree("set_theme","apple");
});
$("#demo1").jstree({
"themes" : {
"theme" : "default",
"dots" : "default",
"icons" : "default"
},
"plugins" : [ "themes", "html_data" ]
});