開發(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)）
其他說明
數(shù)據(jù)源格式：[{text:'展示名稱1',nodes:[{text:'子級(jí)'}]},{text:'展示名稱2'}]
bootstrap-trview會(huì)動(dòng)態(tài)的為數(shù)據(jù)源添加nodeId,parentId這兩個(gè)屬性（很重要的屬性）跨嘉，可自定義添加其他屬性用來標(biāo)記當(dāng)前節(jié)點(diǎn)
編輯過程中維護(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 = [];//用來存儲(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）
原理：通過維護(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)擊選中和取消選中上面 來分析兩種情況）
第一種 選中
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ù)庫中的areaId
4.將上面的三個(gè)數(shù)組存入template，并將template push進(jìn)入templates
邏輯
1.獲取到所有的被選中的元素
2.遍歷所有的元素 判斷當(dāng)前節(jié)點(diǎn)是否有nodes（即子元素）降瞳，如果有則直接操作嘱支，并改變index蚓胸，將其子元素全部跳過，將節(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.主頁面展示：
2.tree展示：
小結(jié)
本文提供簡單的實(shí)現(xiàn)方案思路倚舀，具體的代碼根據(jù)業(yè)務(wù)實(shí)現(xiàn)叹哭，不足之處不能動(dòng)態(tài)處理數(shù)據(jù)源，優(yōu)點(diǎn)bootstrap開放的api接口較多痕貌，可自定義實(shí)現(xiàn)风罩。
