bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多級列表樹插件。該jQuery插件基于Twitter Bootstrap，以簡單和優雅的方式來顯示一些繼承樹結構，如視圖樹、列表樹等等。

開發條件：

安裝bootstrap-treeview插件，具體操作見：

bootstrap-treeview

實現功能：

1.一個模板可指定子模板（包含多個地區、價格等）

2.編輯子模板地區時，動態改變tree的地區（其他子模板選中的地區disabled,此模板之前選中的地區默認選中）

3.tree選擇時，父級和子集的聯動（如父級選中子集全部選中，取消一個子集的時候，父級也取消）

4.維護子模板數據（展示選中的地區格式 如（安徽、北京（昌平 回龍觀）） 存儲選中節點）

其他說明

數據源格式：[{text:'展示名稱1',nodes:[{text:'子級'}]},{text:'展示名稱2'}]

bootstrap-trview會動態的為數據源添加nodeId,parentId這兩個屬性（很重要的屬性），可自定義添加其他屬性用來標記當前節點

編輯過程中維護的數據

數組對象templates包含：

1.模板的名稱

2.每個子模板對應的 價格 件數 排序

3.子模板的地區Id、節點id、展示名稱

實現上述數據需要維護的數組和對象

var templates = []; //保存最終儲存的數據var selectedNodeId = []; //用來存儲單個模板選擇的nodeId 用于展示var editingTemplate = null; //用于標記正在處理的是第幾個地區模板var selectedAreaId = []; //保存當前選擇的地區var selectedAreaName = []; //保存當前選中的地區名稱用于展示var defaultData = [];//數據源

實現功能一

一個模板指定多個子模板

主要是維護templates[]數組 push進入多個template即可 下面會詳細講解如何維護template

實現功能二（動態修改tree）

原理：通過維護的templates和editingTemplate 拿到當前編輯的子模板數據和其他子模板數據，將當前模板的node默認選中，其他的數據置為disabled

編輯子模板

uncheckAll方法：$('#tree').treeview('uncheckAll', { silent: true });

disAbled方法：$('#tree').treeview('disableNode', [ nodeId, { silent: true } ]);

默認選中的方法$('#tree').treeview('checkNode', [ template.nodeIds[i], { silent: true } ]);

實現功能三：父級和子級的聯動（主要操作在點擊選中和取消選中上面 來分析兩種情況）

第一種 選中

1.選擇父節點 將子節點全部選中

根據父節點返回的nodes得到所有的子節點 并且將子節點全部選中

選中的方法$('#tree').treeview('checkNode', [ nodeId, { silent: true } ]);

可以封裝為一個方法selectAllChildren()

2.如果選中的為子節點

判斷父節點中的子節點是否全部選中如果全部選中則將父節點選中

第二種 取消

1.選中的為父節點，將所有的子節點取消選中

取消選中的方法$('#tree').treeview('uncheckNode', [ nodeId, { silent: true } ]);

2選中的為子節點，判斷父節點中的子節點是否選中 如果選中 則取消選中

判斷是否選中的方法

$('#tree').treeview('selectNode', [ nodeId, { silent: true } ]);

根據獲取到元素獲取是否選中

實現功能四（維護template數據）

1.正在編輯的editingTemplate

2.當前層級選中的所有selectedNodeId

3.展示需要的字符串數組selectedNodeName

3.存儲字符串數組selectedAreaId對應數據庫中的areaId

4.將上面的三個數組存入template，并將template push進入templates

邏輯

1.獲取到所有的被選中的元素

2.遍歷所有的元素 判斷當前節點是否有nodes（即子元素），如果有則直接操作，并改變index，將其子元素全部跳過，將節點名稱保存進areaNames，如"安徽"

3.遍歷所有的元素 如果沒有子元素，取出父級元素如"北京(",將node元素添加至后面，如"北京(昌平區",判斷下一個元素的父節點是否發生改變，如果發生改變則結束維護字符串為"北京（昌平區）"，并將其添加至areaNames，繼續遍歷下一個節點

4.其他三個數組在遍歷的同時維護
實現結果展示：

1.主頁面展示：

2.tree展示：

小結

本文提供簡單的實現方案思路，具體的代碼根據業務實現，不足之處不能動態處理數據源，優點bootstrap開放的api接口較多，可自定義實現。

以上所述是小編給大家介紹的使用BootStrap TreeView插件實現靈活配置快遞模板，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！