fineui/demo/js/base/tree/demo.sync_tree.js

import { shortcut, Widget, isNull } from "@/core";

@shortcut()
export class Func extends Widget {
    static xtype = "demo.sync_tree";

    props = { baseCls: "demo-func" };

    mounted() {
        this.syncTree1.stroke({
            keyword: "1",
        });
        this.syncTree2.stroke({
            keyword: "1",
        });
    }

    render() {
        const self = this;

        return {
            type: "bi.vtape",
            rowSize: [0.5, 0.5],
            items: [
                {
                    type: "bi.vtape",
                    items: [
                        {
                            type: "bi.label",
                            height: 50,
                            text: "可以异步获取数据的树",
                        },
                        {
                            type: "bi.async_tree",
                            ref(_ref) {
                                self.syncTree1 = _ref;
                            },
                            paras: {
                                selectedValues: { 1: {}, 2: { 1: {} } },
                            },
                            itemsCreator(op, callback) {
                                callback({
                                    items: [
                                        {
                                            id: `${op.id || ""}1`,
                                            pId: op.id,
                                            text: `${op.id || ""}1`,
                                            isParent: true,
                                            iconCls: "close-h-font",
                                        },
                                        {
                                            id: `${op.id || ""}2`,
                                            pId: op.id,
                                            text: `${op.id || ""}2`,
                                            iconCls: "search-font",
                                        },
                                        {
                                            id: `${op.id || ""}3`,
                                            pId: op.id,
                                            text: `${op.id || ""}3`,
                                            iconCls: "date-font",
                                        }
                                    ],
                                    hasNext: isNull(op.id),
                                });
                            },
                        }
                    ],
                },
                {
                    type: "bi.vtape",
                    items: [
                        {
                            type: "bi.label",
                            height: 50,
                            text: "showIcon属性搭配节点iconCls,可以显示图标",
                        },
                        {
                            type: "bi.async_tree",
                            ref(_ref) {
                                self.syncTree2 = _ref;
                            },
                            paras: {
                                selectedValues: { 1: {}, 2: { 1: {} } },
                            },
                            showIcon: true,
                            itemsCreator(op, callback) {
                                callback({
                                    items: [
                                        {
                                            id: `${op.id || ""}1`,
                                            pId: op.id,
                                            text: `${op.id || ""}1`,
                                            isParent: true,
                                            iconCls: "close-h-font",
                                        },
                                        {
                                            id: `${op.id || ""}2`,
                                            pId: op.id,
                                            text: `${op.id || ""}2`,
                                            iconCls: "search-font",
                                        },
                                        {
                                            id: `${op.id || ""}3`,
                                            pId: op.id,
                                            text: `${op.id || ""}3`,
                                            iconCls: "date-font",
                                        }
                                    ],
                                    hasNext: isNull(op.id),
                                });
                            },
                        }
                    ],
                }
            ],
        };
    }
}