# jstree
[jsTree](http://www.jstree.com/) is jquery plugin, that provides interactive trees. It is absolutely free, [open source](https://github.com/vakata/jstree) and distributed under the MIT license.
jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources, AJAX & async callback loading.
jsTree functions properly in either box-model (content-box or border-box), can be loaded as an AMD module, and has a built in mobile theme for responsive design, that can easily be customized. It uses jQuery's event system, so binding callbacks on various events in the tree is familiar and easy.
You also get:
* drag & drop support
* keyboard navigation
* inline edit, create and delete
* tri-state checkboxes
* fuzzy searching
* customizable node types
_Aside from this readme you can find a lot more info on [jstree.com](http://www.jstree.com) & [the discussion group](https://groups.google.com/forum/#!forum/jstree)_.
---
<!-- MarkdownTOC depth=0 autolink=true bracket=round -->
- [Getting Started](#getting-started)
- [Include all neccessary files](#include-all-neccessary-files)
- [Populating a tree using HTML](#populating-a-tree-using-html)
- [Populating a tree using an array (or JSON)](#populating-a-tree-using-an-array-or-json)
- [The required JSON format](#the-required-json-format)
- [Populating the tree using AJAX](#populating-the-tree-using-ajax)
- [Populating the tree using AJAX and lazy loading nodes](#populating-the-tree-using-ajax-and-lazy-loading-nodes)
- [Populating the tree using a callback function](#populating-the-tree-using-a-callback-function)
- [Working with events](#working-with-events)
- [Interacting with the tree using the API](#interacting-with-the-tree-using-the-api)
- [More on configuration](#more-on-configuration)
- [Plugins](#plugins)
- [checkbox](#checkbox)
- [contextmenu](#contextmenu)
- [dnd](#dnd)
- [massload](#massload)
- [search](#search)
- [sort](#sort)
- [state](#state)
- [types](#types)
- [unique](#unique)
- [wholerow](#wholerow)
- [More plugins](#more-plugins)
- [License & Contributing](#license--contributing)
<!-- /MarkdownTOC -->
---
## Getting Started
### Include all neccessary files
To get started you need 3 things in your page:
1. jQuery (anything above 1.9.1 will work)
2. A jstree theme (there is only one theme supplied by default)
3. The jstree source file
```html
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.0.9/themes/default/style.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.0.9/jstree.min.js"></script>
```
_If you decide to host jstree yourself - the files are located in the `dist` folder. You can safely ignore the `dist/libs` folder._
---
### Populating a tree using HTML
Now we are all set to create a tree, inline HTML is the easiest option (suitable for menus). All you need to do is select a node (using a jQuery selector) and invoke the `.jstree()` function to let jstree know you want to render a tree inside the selected node. `$.jstree.create(element)` can be used too.
```html
<div id="container">
<ul>
<li>Root node
<ul>
<li>Child node 1</li>
<li>Child node 2</li>
</ul>
</li>
</ul>
</div>
<script>
$(function() {
$('#container').jstree();
});
</script>
```
[view result](http://jsfiddle.net/vakata/2kwkh2uL/)
_You can add a few options when rendering a node using a data-attribute (note the quotes):_
```html
<li data-jstree='{ "selected" : true, "opened" : true }'>Root node ...
```
---
### Populating a tree using an array (or JSON)
Building trees from HTML is easy, but it is not very flexible, inline JS data is a better option:
```html
<div id="container"></div>
<script>
$(function() {
$('#container').jstree({
'core' : {
'data' : [
{ "text" : "Root node", "children" : [
{ "text" : "Child node 1" },
{ "text" : "Child node 2" }
]
}
]
}
});
});
</script>
```
[view result](http://jsfiddle.net/vakata/2kwkh2uL/1/)
Unlike the previous simple HTML example, this time the `.jstree()` function accepts a config object.
For now it is important to note that jstree will try to parse any data you specify in the `core.data` key and use it to create a tree. As seen in the previous example, if this key is missing jstree will try to parse the inline HTML of the container.
#### The required JSON format
The data you use must be in a specific format, each branch of the tree is represented by an object, which must at least have a `text` key. The `children` key can be used to add children to the branch, it should be an array of objects.
_Keep in mind, you can use a simple string instead of an object if all you need is node with the given text, the above data can be written as:_
```js
[ { "text" : "Root node", "children" : [ "Child node 1", "Child node 2" ] } ]
```
There are other available options for each node, only set them if you need them like:
* `id` - makes if possible to identify a node later (will also be used as a DOM ID of the `LI` node). _Make sure you do not repeat the same ID in a tree instance (that would defeat its purpose of being a unique identifier and may cause problems for jstree)_.
* `icon` - a string which will be used for the node's icon - this can either be a path to a file, or a className (or list of classNames), which you can style in your CSS (font icons also work).
* `data` - this can be anything you want - it is metadata you want attached to the node - you willbe able to access and modify it any time later - it has no effect on the visuals of the node.
* `state` - and object specifyng a few options about the node:
- `selected` - if the node should be initially selected
- `opened` - if the node should be initially opened
- `disabled` - if the node should be disabled
- `checked` - __checkbox plugin specific__ - if the node should be checked (only used when `tie_selection` is `false`, which you should only do if you really know what you are doing)
- `undetermined` - __checkbox plugin specific__ - if the node should be rendered in undetermined state (only used with lazy loading and when the node is not yet loaded, otherwise this state is automatically calculated).
* `type` - __types plugin specific__ - the type of the nodes (should be defined in the types config), if not set `"default"` is assumed.
* `li_attr` - object of values which will be used to add HTML attributes on the resulting `LI` DOM node.
* `a_attr` - object of values which will be used to add HTML attributes on the resulting `A` node.
Here is a new demo with some of those properties set:
```html
<div id="container"></div>
<script>
$(function() {
$('#container').jstree({
'core' : {
'data' : [
{
"text" : "Root node",
"state" : {"opened" : true },
"children" : [
{
"text" : "Child node 1",
"state" : { "selected" : true },
"icon" : "glyphicon glyphicon-flash"
},
{ "text" : "Child node 2", "state" : { "disabled" : true } }
]
}
]
}
});
});
</script>
```
[view result](http://jsfiddle.net/vakata/2kwkh2uL/11/)
---
### Populating the tree using AJAX
Building off of the previous example, let's see how to have jstree make AJAX requests for you.
```html
<div id="container"></div>
<script>
$(function() {
$('#container').jstree({
'core' : {
'data' : {
"url" : "//www.jstree.com/fiddle/",
"dataType" : "json" // needed only if you do not supply JSON headers
}
}
});
});
</script>
```
The server response is:
```json
[{
"id":1,"text":"Root node","children":[
{"id":2,"text":"Child node 1"},
{"id":3,"text":"Child node 2"}
]
}]
```
[vi
没有合适的资源?快使用搜索试试~ 我知道了~
spring-boot-project.zip_angularjs_largefkb_spring_spring-boot_sp
共1775个文件
js:591个
html:393个
css:165个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 112 浏览量
2022-09-21
22:20:26
上传
评论
收藏 12.24MB ZIP 举报
温馨提示
spring-boot,mybatis,angularjs
资源推荐
资源详情
资源评论
收起资源包目录
spring-boot-project.zip_angularjs_largefkb_spring_spring-boot_sp (1775个子文件)
fontawesome-webfont.svg_v=4.3.0 306KB
fontawesome-webfont.ttf_v=4.3.0 119KB
fontawesome-webfont.woff_v=4.3.0 70KB
fontawesome-webfont.eot_v=4.3.0 59KB
fontawesome-webfont.woff2_v=4.3.0 55KB
bootstrapValidator.js.bak 250KB
index.html.bak 16KB
.classpath 2KB
.classpath 1KB
.classpath 1KB
.classpath 1KB
.classpath 1KB
.classpath 1KB
bootstrap.css 144KB
style.css 127KB
bootstrap.min.css 120KB
bootstrap.css 118KB
bootstrap.min.css 115KB
bootstrap.min.css 98KB
animate.css 64KB
jquery.mCustomScrollbar.css 54KB
ueditor.css 44KB
ueditor.min.css 34KB
style.css 33KB
style.css 33KB
style.css 30KB
style.css 30KB
font-awesome.css 28KB
style.min.css 28KB
style.min.css 26KB
bootstrap-theme.css 26KB
bootstrap-theme.min.css 23KB
font-awesome.min.css 21KB
video-js.css 21KB
bootstrap-editable.css 21KB
stylesheet.css 19KB
image.css 19KB
dataTables.jqueryui.css 15KB
video.css 15KB
jquery.dataTables.css 15KB
attachment.css 15KB
bootstrap-theme.css 15KB
jquery.dataTables_themeroller.css 14KB
dataTables.jqueryui.min.css 13KB
jquery.dataTables.min.css 13KB
bootstrap-theme.min.css 13KB
video-js.min.css 11KB
style.css 11KB
shCore.css 10KB
buttons.dataTables.css 10KB
style.css 9KB
bootstrap-datetimepicker.css 9KB
buttons.dataTables.min.css 8KB
bootstrap-datetimepicker.min.css 8KB
toastr.css 7KB
shCoreDefault.css 7KB
bootstrap-switch.css 7KB
toastr.css 7KB
demo.css 7KB
bootstrap-switch.min.css 6KB
toastr.min.css 6KB
screen.css 6KB
toastr.min.css 5KB
milk.css 5KB
qunit.css 5KB
qunit.css 5KB
qunit.css 5KB
select.foundation.css 4KB
dataTables.bootstrap.css 4KB
select.bootstrap.css 4KB
jasmine.css 4KB
select.dataTables.css 4KB
select.jqueryui.css 4KB
select.foundation.min.css 4KB
buttons.jqueryui.css 4KB
select.bootstrap.min.css 4KB
scrawl.css 4KB
dataTables.bootstrap.min.css 4KB
select.dataTables.min.css 4KB
select.jqueryui.min.css 4KB
buttons.jqueryui.min.css 3KB
responsive.foundation.css 3KB
responsive.jqueryui.css 3KB
responsive.bootstrap.css 3KB
responsive.dataTables.css 3KB
codemirror.css 3KB
dataTables.foundation.css 3KB
responsive.foundation.min.css 3KB
charts.css 3KB
responsive.bootstrap.min.css 3KB
responsive.jqueryui.min.css 3KB
responsive.dataTables.min.css 3KB
jquery.gritter.css 3KB
background.css 2KB
bootstrap-datetimepicker-standalone.css 2KB
dataTables.foundation.min.css 2KB
autoFill.dataTables.css 2KB
autoFill.jqueryui.css 2KB
buttons.foundation.css 2KB
autoFill.foundation.css 2KB
共 1775 条
- 1
- 2
- 3
- 4
- 5
- 6
- 18
资源评论
寒泊
- 粉丝: 75
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功