閱讀目錄
回到頂部
ztree樹形選單
樹形選單使用方式如下：
html引入的方式如下：
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>ztree樹形選單demo
title
>
<
link
rel='stylesheet'
href
='libs/ztreestyle.css'
/>
<
link
rel='stylesheet'
href
='libs/remodal.css'
/>
<
link
rel='stylesheet'
href
='libs/remodal-default-theme.css'
/>
<
link
rel='stylesheet'
href
='css/index.css'
/>
head
>
<
body
>
<
div
class
="remodal w360"
data-remodal-id
="modal2"
id='data-modal2'
>
<
div
class
="remodal-wrap"
>
<
div
class
='m-title'
>新增賬戶
div>
<
div
class
="m-center-modal"
>
<
div
class
='directory'
>
<
label
>目錄結構
label
>
<
span
>
span
>
div>
<
div
class
="account-name"
>
<
label
>賬戶名稱
label
>
<
input
type
="text"
maxlength
="16"
/>
div>
<
div
class
="modal-tips hidden"
>
div>
div>
div>
<
div
class
='m-btn'
>
<
button
class
="remodal-cancel"
>取消
button
>
<
button
class
="remodal-confirm"
>確定
button
>
div>
div>
<
div
class
="container"
id="container"
>
<
div
class
="account_page content"
>
<
div
class
='ztree-container'
style
='border-right:none'
>
<
div
class
="add-btn"
id="add-btn"
>
div>
<
ul id
="ztreeid"
class
="ztree"
data-add-url
=''
data-del-url
=''
data-img-url
=''
data-tree
=''>
ul>
div>
<
div
class
='ztree-content'
>
右側的內容放在這裡
div>
<
div
class
="catalog-line"
>
div>
div>
div>
<
script
src='libs/jquery.min.js'
>
script
>
<
script
src='libs/jquery.ztree.core.js'
>
script
>
<
script
src='libs/jquery.ztree.exedit.js'
>
script
>
<
script
src='libs/remodal.js'
>
script
>
<
script
src='libs/ztree.js'
>
script
>
<
script
src='js/index.js'
>
script
>
body
>
html
>
注意：
1. css需要引入：
<link
rel='stylesheet'
href
='libs/ztreestyle.css'
/>
<
link
rel='stylesheet'
href
='libs/remodal.css'
/>
<
link
rel='stylesheet'
href
='libs/remodal-default-theme.css'
/>
<
link
rel='stylesheet'
href
='css/index.css'
/>
2. js需要引入如下：
<script
src='libs/jquery.min.js'
>
script
>
<
script
src='libs/jquery.ztree.core.js'
>
script
>
<
script
src='libs/jquery.ztree.exedit.js'
>
script
>
<
script
src='libs/remodal.js'
>
script
>
<
script
src='libs/ztree.js'
>
script
>
<
script
src='js/index.js'
>
script
>
3. 在id為ztreeid 新增4個屬性，
3-1： data-add-url 為新增選單的介面（資料返回的格式和成本中心的 /catalog/addacccatalog 的格式字段一樣）。
3-2： data-del-url 為刪除選單介面(資料返回的格式和成本中心的 /catalog/delacccatalog 格式字段一樣)。
3-3: data-img-url: 的相對路徑，比如的路徑為 ***/yyy/images/xx.png 因此 data-img-url = '***/yyy' 就可以了。
3-4: data-tree: 樹形目錄的資料.
4. 彈窗樹形選單 模糊匹配
配置如下：
在頁面上放乙個隱藏域input 設定id為 ztreeid， data-img-url 和上面一樣，是字首路徑， data-tree 是 樹形選單的資料。如下**：
github檢視demo
注意：
1. 新增選單，刪除選單，需要發ajax請求成功後才能生效。
2. 返回的json資料需要支援我上面的資料格式即可。
樹狀選單 zTree外掛程式使用
ztree 是乙個依靠 jquery 實現的多功能 樹外掛程式 而且擁有較好的瀏覽器相容性，有著豐富的功能以及可以自定義樣式，足以滿足大部分業務的開發。jquery 實現的樹狀選單 樹狀資料的web顯示 許可權管理等等。使用步驟如下 1.引入css和js檔案 2.在html頁面中想要顯示樹的地方建立...
Ztree的相關demo練習記錄
ztree的相關demo練習記錄 1.引入ztree的相關資源，例如 js,css,2.建立乙個div或者ul 注意 一定要加乙個class什麼class呢？那就是ztree不然裡面的小圖示啥的都不管用了。再給他乙個id這個id的目的就是為了讓我們再建立ztree的時候能獲取到它。3.開始建立了乙個...
關於zTree樹形外掛程式搜尋框。
今天學習了乙個ztree樹形搜尋框的功能，學習之前先把ztree的相關知識看了一遍，記錄下來如下 1.獲取 id 為 treedemo 的 ztree 物件 var treeobj fn.ztree.getztreeobj treedemo 2.ztree 初始化方法，建立 ztree 必須使用此方...