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

開發(fā)條件：

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

bootstrap-treeview

實(shí)現(xiàn)功能：

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

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

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

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

其他說(shuō)明

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

bootstrap-trview會(huì)動(dòng)態(tài)的為數(shù)據(jù)源添加nodeId,parentId這兩個(gè)屬性（很重要的屬性），可自定義添加其他屬性用來(lái)標(biāo)記當(dāng)前節(jié)點(diǎn)

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

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

1.模板的名稱

2.每個(gè)子模板對(duì)應(yīng)的 價(jià)格 件數(shù) 排序

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

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

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

實(shí)現(xiàn)功能一

一個(gè)模板指定多個(gè)子模板

主要是維護(hù)templates[]數(shù)組 push進(jìn)入多個(gè)template即可 下面會(huì)詳細(xì)講解如何維護(hù)template

實(shí)現(xiàn)功能二（動(dòng)態(tài)修改tree）

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

編輯子模板

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

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

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

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

第一種 選中

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

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

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

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

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

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

第二種 取消

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

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

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

判斷是否選中的方法

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

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

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

1.正在編輯的editingTemplate

2.當(dāng)前層級(jí)選中的所有selectedNodeId

3.展示需要的字符串?dāng)?shù)組selectedNodeName

3.存儲(chǔ)字符串?dāng)?shù)組selectedAreaId對(duì)應(yīng)數(shù)據(jù)庫(kù)中的areaId

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

邏輯

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

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

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

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

1.主頁(yè)面展示：

2.tree展示：

小結(jié)

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

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

最新評(píng)論