jstree 实例一

来源：互联网发布：人民银行软件中心待遇编辑：程序博客网时间：2024/06/04 20:11

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" ]
});

</script>

简要说明：

1.设置主题：$("#demo1").jstree("set_theme","apple");
2.jsTree 支持三种数据源头：
   预先定义好的 HTML -嵌套的列表结构（html_data）
   JSON
   XML

3.html协议

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 是必须这样写的，不然出错。