forked from fanruan/fineui-custom-tutorials
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
2.0 KiB
48 lines
2.0 KiB
4 years ago
|
# 常见场景汇总
|
||
|
|
|
||
|
|
## 格式化数据方法
|
||
|
|
1. `BI.Tree.transformToTreeFormat(nodes)` 将id,pId结构的列表形式转化为id,children形式的类树结构
|
||
|
|
2. `BI.Tree.transformToArrayFormat(nodes,pId)` 将id,children形式的类树结构转化为id,pId结构的列表形式
|
||
|
|
3. `BI.Tree.traversal(nodes,callback)` 递归遍历id,children形式的树结构,深度优先
|
||
|
|
|
||
|
|
## layer层级的判断方法
|
||
|
|
通常我们用`layer`属性标明当前节点的层级(第一层为0),对于异步加载的树,我们可以在`itemsCreator`回掉的参数中获取当前父节点的详细信息,子节点的`layer`增加1级即可
|
||
|
|
对于非异步的完整的节点数据,可以采用递归的方式
|
||
|
|
```javascript
|
||
|
|
traversalLayers: function (items, layer) {
|
||
|
|
var self = this;
|
||
|
|
BI.each(items, function (index, item) {
|
||
|
|
item.layer = layer;
|
||
|
|
if (item.children) {
|
||
|
|
self.traversalLayers(item.children, layer + 1)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
```
|
||
|
|
利用`BI.Tree.traversal(nodes,callback)`会更方便(2020-09版本可用)
|
||
|
|
```javascript
|
||
|
|
traversalLayers: function (items) {
|
||
|
|
BI.Tree.traversal(items, function (index, node, pNode) {
|
||
|
|
node.layer = pNode ? pNode.layer + 1 : 0
|
||
|
|
});
|
||
|
|
return items
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## 多层级性能优化
|
||
|
|
对于`bi.button_tree`的默认单选逻辑来说,多层级+多节点会出现指数级性能隐患,因此适用于数据量比较小的场景,如果针对部门职务树等超大数据场景,建议采用外部控制选中状态的方式
|
||
|
|
首先`bi.custom_tree`的props中el属性里面嵌套的`bi.button_tree`的`chooseType`要置为-1,即不控制任何选中逻辑.
|
||
|
|
而后对`bi.custom_tree`添加事件监听,调用`setValue`由外部赋值
|
||
|
|
```javascript
|
||
|
|
listeners: [
|
||
|
|
{
|
||
|
|
eventName: BI.Controller.EVENT_CHANGE,
|
||
|
|
action: function (type, value) {
|
||
|
|
if (type === BI.Events.CLICK) {
|
||
|
|
this.setValue(value);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
```
|