项目中用到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 (全部代码如下)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <link rel="stylesheet" type="text/css" href="../../assets/global/plugins/jstree/dist/themes/default/style.min.css"/>
7 <link href="font-awesome/font-awesome.css" rel="stylesheet" type="text/css"/>
8 <style>
9 /* Icon coloring begin*/
10 .icon-state-default {
11 color: #c6c6c6;
12 }
13
14 .icon-state-success {
15 color: #45b6af;
16 }
17
18 .icon-state-info {
19 color: #89c4f4;
20 }
21
22 .icon-state-warning {
23 color: #ecbc29;
24 }
25
26 .icon-state-danger {
27 color: #f3565d;
28 }
29 /* Icon coloring end*/
30 </style>
31 </head>
32 <body>
33 <div id="tree1"></div>
34
35 <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
36 <script src="../../assets/global/plugins/jstree/dist/jstree.js"></script>
37 <script>
38 $(function(){
39 //初始化jstree
40 $("#tree1").jstree({
41 "core": {
42 "themes": {
43 "responsive": false
44 },
45 // so that create works
46 "check_callback": true,
47 //data为后台返回的数据,这里我先伪造一点数据
48 ‘data‘: [{
49 "text": "物料",//根节点名称
50 "children": [
51 {
52 "text": "标准件",//节点名称
53 "icon": "fa fa-folder icon-state-danger" //节点样式
54 },
55 {
56 "text": "通用件",
57 "icon": "fa fa-folder icon-state-danger"
58 },
59 {
60 "text": "专用件",
61 "state": {
62 "opened": true//为true表示打开子节点
63 },
64 "children": [
65 {
66 "text": "2 零件",
67 "icon": "fa fa-folder icon-state-danger"
68 },
69 {
70 "text": "3成品件",
71 "icon": "fa fa-folder icon-state-danger"
72
73 },
74 {
75 "text": "...",
76 "icon": "fa fa-folder icon-state-danger"
77 }]
78 },
79 {
80 "text": "原材料",
81 "state": {
82 "opened": true
83 },
84 "children": [
85 {
86 "text": "1.1 黑色金属",
87 "icon": "fa fa-folder icon-state-danger"
88
89 },
90 {
91 "text": "1.2 有色金属",
92 "state": {
93 "selected": true,
94 },
95 "icon": "fa fa-folder icon-state-danger"
96
97 },
98 {
99 "text": "1.3 非金属",
100 "icon": "fa fa-folder icon-state-danger"
101
102 },
103 {
104 "text": "...",
105 "icon": "fa fa-folder icon-state-danger"
106 }]
107 }]
108 }]
109 },
110 //types表示文件类型,不同类型设置不同的样式 也就是icon的值
111 "types": {
112 "default": {
113 "icon": "fa fa-folder icon-state-warning icon-lg"
114 },
115 "file": {
116 "icon": "fa fa-file icon-state-warning icon-lg"
117 }
118 },
119 //plugins 要使用的插件,jstree内部集成了一些插件比如 contextmenu:右键菜单
120 "plugins": ["contextmenu", "dnd", "state", "types"]
121 });
122 });
123 </script>
124 </body>
125 </html>
jstree基本
以上为基本操作,最好先去看官网的文档
时间： 2024-10-05 17:49:35