项目中用到tree结构,使用了jstree做个笔记如下:
1. 官网: http://www.jstree.com/ 有时候打不开,那就只能等打得开的时候再看了...O(∩_∩)O
[PS: 一些灰常基本的我可能就略过了...]
2. 先看看效果:
(1)去官网下载jstree包,然后引入; 额外的样式文件(font-awesome.css): 到这个网址去下载 然后引入 http://fontawesome.io/license
(2)添加jstree的容器
<div id="tree1"></div>
(3)初始化jstree (全部代码如下)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../../assets/global/plugins/jstree/dist/themes/default/style.min.css"/>
<link href="font-awesome/font-awesome.css" rel="stylesheet" type="text/css"/>
<style>
/* Icon coloring begin*/
.icon-state-default {
color: #c6c6c6;
} .icon-state-success {
color: #45b6af;
} .icon-state-info {
color: #89c4f4;
} .icon-state-warning {
color: #ecbc29;
} .icon-state-danger {
color: #f3565d;
}
/* Icon coloring end*/
</style>
</head>
<body>
<div id="tree1"></div> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="../../assets/global/plugins/jstree/dist/jstree.js"></script>
<script>
$(function(){
//初始化jstree
$("#tree1").jstree({
"core": {
"themes": {
"responsive": false
},
// so that create works
"check_callback": true,
//data为后台返回的数据,这里我先伪造一点数据
'data': [{
"text": "物料",//根节点名称
"children": [
{
"text": "标准件",//节点名称
"icon": "fa fa-folder icon-state-danger" //节点样式
},
{
"text": "通用件",
"icon": "fa fa-folder icon-state-danger"
},
{
"text": "专用件",
"state": {
"opened": true//为true表示打开子节点
},
"children": [
{
"text": "2 零件",
"icon": "fa fa-folder icon-state-danger"
},
{
"text": "3成品件",
"icon": "fa fa-folder icon-state-danger" },
{
"text": "...",
"icon": "fa fa-folder icon-state-danger"
}]
},
{
"text": "原材料",
"state": {
"opened": true
},
"children": [
{
"text": "1.1 黑色金属",
"icon": "fa fa-folder icon-state-danger" },
{
"text": "1.2 有色金属",
"state": {
"selected": true,
},
"icon": "fa fa-folder icon-state-danger" },
{
"text": "1.3 非金属",
"icon": "fa fa-folder icon-state-danger" },
{
"text": "...",
"icon": "fa fa-folder icon-state-danger"
}]
}]
}]
},
//types表示文件类型,不同类型设置不同的样式 也就是icon的值
"types": {
"default": {
"icon": "fa fa-folder icon-state-warning icon-lg"
},
"file": {
"icon": "fa fa-file icon-state-warning icon-lg"
}
},
//plugins 要使用的插件,jstree内部集成了一些插件比如 contextmenu:右键菜单
"plugins": ["contextmenu", "dnd", "state", "types"]
});
});
</script>
</body>
</html>
jstree基本
以上为基本操作,最好先去看官网的文档