fineui-custom-tutorials/docs/六、常见场景的解决方案.md

常见场景汇总

格式化数据方法

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级即可 对于非异步的完整的节点数据,可以采用递归的方式

    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版本可用)

    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由外部赋值

    listeners: [
        {
            eventName: BI.Controller.EVENT_CHANGE,
            action: function (type, value) {
                if (type === BI.Events.CLICK) {
                    this.setValue(value);
                }
            },
        },
    ],