树状图插件

1. jsTree

介绍
jsTree是一个 基于jQuery的Tree控件。支持XML，JSON，Html三种数据源。提供创建，重命名，移动，删除，拖"放节点操作。可以自己自定义创建，删 除，嵌套，重命名，选择节点的规则。在这些操作上可以添加多种监听事件。

使用方式

引入jq以及jstree js文件和css文件

<link rel="stylesheet" href="jstree/themes/default/style.min.css">
<script src="js/jquery.min.js"></script>
<script src="jstree/js/jstree.js"></script>

事件

 // 展开节点
$("#jstree").on("loaded.jstree", function (event, data) {
    // 展开所有节点
    //$('#jstree').jstree('open_all');
    // 展开指定节点
    //data.instance.open_node(1);     // 单个节点 （1 是顶层的id）
    data.instance.open_node([1, 10]); // 多个节点 (展开多个几点只有在一次性装载后所有节点后才可行）1：从第一个节点开始 10：展开节点数，最大为总的节点数
});

// 所有节点都加载完后
$("#jstree").on("ready.jstree", function (event, data) {
  
});
//注：loaded和ready的区别：
//loaded：首次加载根节点后触发
//ready:所有节点加载完成后触发

// 获得点击节点的id  id为数据结构中的id
$('#jstree').on("changed.jstree", function (e, data) {
    console.log("The selected nodes are:");
    console.log(data.selected);
    alert('node.id is:' + data.node.id);
    alert('node.text is:'+data.node.text);
    console.log(data);
});

//绑定点击事件2
 $("#jstree").jstree({
     "core":{
         "data":treeData
     }
 }).bind('select_node.jstree', function (event, data) {  //绑定的点击事件
     console.log(data,"=>data")
 });

API

• $("#jstree").jstree().get_theme():取得当前激活即使用的主题
• $("#jstree").jstree().set_theme(name, url):设置主题
• $("#jstree").jstree().show_dots(),,:显示树边框的点
• $("#jstree").jstree().hide_dots():隐藏树边框的点
• $("#jstree").jstree().toggle_dots()激活树边框的点
• $("#jstree").jstree().show_icons(),,:显示树的图标
• $("#jstree").jstree().hide_icons():隐藏树的图标
• $("#jstree").jstree().toggle_icons():激活树的图标

示例

1. 将html转换成树状图

<div id="jstree">
        <ul>
            <li>root
                <ul>
                    <li>root1
                        <ul>
                            <li>child1-1</li>
                            <li>child1-2</li>
                        </ul>
                    </li>
                    <li>root2
                        <ul>
                            <li>child2-1</li>
                            <li>child2-2</li>
                            <li>child2-3</li>
                        </ul>
                    </li>
                    <li>root3</li>
                </ul>
            </li>
        </ul>
    </div>
 $("#jstree").jstree()

效果图：

2