jstree使用小結 一

專案中用到tree結構,使用了jstree做個筆記如下: 

1. 官網:     有時候打不開,那就只能等打得開的時候再看了...o(∩_∩)o

[ps: 一些灰常基本的我可能就略過了...]

2. 先看看效果: 

(2)新增jstree的容器

<

div 
id="tree1"
>
div>

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 
1314
.icon-state-success 
1718
.icon-state-info 
2122
.icon-state-warning 
2526
.icon-state-danger 
29/*
icon coloring end
*/30
style
>
31head
>
32<
body
>
33<
div 
id="tree1"
>
div>
3435
<
script 
src=""
>
script
>
36<
script 
src="../../assets/global/plugins/jstree/dist/jstree.js"
>
script
>
37<
script
>
38$(
function
(),45
//so that create works46"
check_callback": 
true,47
//data為後台返回的資料,這裡我先偽造一點資料48'
data
': [,55,
59,64"
children
": [65,
69,74]
78},79,
84"children
": [85,
90,95"
icon": 
"fa fa-folder icon-state-danger"96
97},98,
103]
107}]
108}]
109},
110//
types表示檔案型別,不同型別設定不同的樣式 也就是icon的值
111"
types
": ,
115"
file": 
118},
119//
plugins 要使用的外掛程式,jstree內部整合了一些外掛程式比如 contextmenu:右鍵選單
120"
plugins
": [
"contextmenu", 
"dnd", 
"state", 
"types"]
121});
122});
123script
>
124body
>
125html
>

以上為基本操作,最好先去看官網的文件

jstree使用 一 初次使用

rel stylesheet href 2.jquery.min.js src script 3.jstree.min.js src script 第二步在需要載入jstree的html位置處加入 id jstree vehicle div 第三步寫jstree的呼叫方法 function tree...

jsTree 使用筆記

ajax 初始化 jstree var element tree element.jstree check callback true,data folder file state plugins checkbox dnd state types jstree 獲取節點方法 未採用checkbox ...

關於jstree的使用

1.動態展示圖示 先給乙個展示樹形結構的div workunittree div workunittree jstree async false url getworkunittreedata success function data state jsonarray.push arr callba...