jsTree是一个功能强大的jQuery插件,用于生成动态的交互式树视图(例如文件夹树),支持内联编辑,拖放,复选框,键盘导航等。
更多功能:
- 支持HTML和JSON数据。
- 启用AJAX。
- 自定义节点图标。
- 延迟加载。
- 回调函数。
- 可搜索和可过滤。
基本用法:
1.安装和下载。
# NPM $ npm install jstree --save
2.在文档中导入您选择的主题CSS。
<link rel="stylesheet" href="themes/default/style.min.css"> <link rel="stylesheet" href="themes/default-dark/style.min.css">
3.将jQuery库和jsTree插件的脚本导入到文档中。
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <script src="jstree.min.js"></script>
4.从HTML数据生成树结构。
<div id="html" class="demo"> <ul> <li data-jstree='{ "opened" : true }'>Root node <ul> <li data-jstree='{ "selected" : true }'>Child node 1</li> <li>Child node 2</li> </ul> </li> </ul> </div>
5.从内联数据生成树结构。
<div id="data" class="demo"></div>
6.通过AJAX从外部JSON文件生成树结构。
$('#ajax').jstree({ 'core' : { 'data' : { "url" : "./root.json", "dataType" : "json" // needed only if you do not supply JSON headers } } });
7.所有默认配置选项。
/** * data configuration * * If left as `false` the HTML inside the jstree container element is used to populate the tree (that should be an unordered list