使用bootstrap-treeview插件实现灵活配置快递模板

---

开发条件：

安装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.主页面展示：

主页面.png

2.tree展示：

选择地区.png

---

小结

本文提供简单的实现方案思路，具体的代码根据业务实现，不足之处不能动态处理数据源，优点bootstrap开放的api接口较多，可自定义实现。