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

開發(fā)條件：

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

bootstrap-treeview

實現(xiàn)功能：

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

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

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

4.維護子模板數(shù)據(jù)（展示選中的地區(qū)格式 如（安徽、北京（昌平 回龍觀）） 存儲選中節(jié)點）

其他說明

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

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

編輯過程中維護的數(shù)據(jù)

數(shù)組對象templates包含：

1.模板的名稱

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

3.子模板的地區(qū)Id、節(jié)點id、展示名稱

實現(xiàn)上述數(shù)據(jù)需要維護的數(shù)組和對象

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

實現(xiàn)功能一

一個模板指定多個子模板

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

實現(xiàn)功能二（動態(tài)修改tree）

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

編輯子模板

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

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

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

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

第一種 選中

1.選擇父節(jié)點 將子節(jié)點全部選中

根據(jù)父節(jié)點返回的nodes得到所有的子節(jié)點 并且將子節(jié)點全部選中

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

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

2.如果選中的為子節(jié)點

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

第二種 取消

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

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

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

判斷是否選中的方法

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

根據(jù)獲取到元素獲取是否選中

實現(xiàn)功能四（維護template數(shù)據(jù)）

1.正在編輯的editingTemplate

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

3.展示需要的字符串數(shù)組selectedNodeName

3.存儲字符串數(shù)組selectedAreaId對應數(shù)據(jù)庫中的areaId

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

邏輯

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

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

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

4.其他三個數(shù)組在遍歷的同時維護
實現(xiàn)結(jié)果展示：

1.主頁面展示：

2.tree展示：

小結(jié)

本文提供簡單的實現(xiàn)方案思路，具體的代碼根據(jù)業(yè)務實現(xiàn)，不足之處不能動態(tài)處理數(shù)據(jù)源，優(yōu)點bootstrap開放的api接口較多，可自定義實現(xiàn)。

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

最新評論