topology-jquery v1.1.1

拓扑图

兼容性

兼容IE9及以上。

安装

yarn add topology-jquery
// or
npm install topology-jquery --save

使用

// css
<script src="/path/to/topology-jquery/dist/topology.css"></script>

// js
<script src="/path/to/topology-jquery/dist/topology.js"></script>

// 使用
$('#topology').topology({
    data: [...],
    setType: (item) => item.type,
    setClassName: item => 'customClassName',
    showCloseBtn: item => item.label === '我要显示关闭按钮',
    onClose: (item, data, elem) => {
        console.info(item);
        console.info(data);
        console.info(elem);
    }
});

查看示例：

git clone [本项目地址]
yarn
npm start

简单示例

$('#topology').topology({
    data: [
        {
            label: '业务事项名称',
            children: [
                {
                    label: '我要显示关闭按钮'
                }
            ]
        }
    ],
    setType: (item) => item.type,
    setClassName: item => 'customClassName',
    showCloseBtn: item => item.label === '我要显示关闭按钮',
    closeTitle: '删除',
    onClose: (item, data, e) => {
        console.info(item);
        console.info(data);
        console.info(e);
    },
    onClick: (item, data, e) => {
        console.info(item);
        console.info(data);
        console.info(e);
    },
    onAdd: (item, callback, e) => {
        console.info('点击的数据：', item);
        // 获取到数据后调用callback
        callback([
            {
                label: '新增的节点1'
            },
            {
                label: '新增的节点2'
            }
        ])
    }
});

自定义渲染项

$('#topology-custom').topology({
    data: [
        {
            label: '业务事项名称',
            children: [
                {
                    label: '我要显示关闭按钮',
                    children: [
                        {
                            label: '数据库名称',
                            children: [
                                {
                                    label: '数据表名称1'
                                },
                                {
                                    label: '我是成功类型',
                                    type: 'success'
                                },
                                {
                                    label: '数据表名称3',
                                    children: [
                                        {
                                            label: '表字段已建'
                                        }
                                    ]
                                },
                                {
                                    label: '数据表名称3',
                                    children: [
                                        {
                                            label: '表字段已建'
                                        }
                                    ]
                                },
                                {
                                    label: '数据表名称3'
                                },
                                {
                                    label: '数据表名称3',
                                    children: [
                                        {
                                            label: '表字段已建'
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    label: '应用系统2',
                    children: [
                        {
                            label: '我是失败类型',
                            type: 'error'
                        }
                    ]
                },
                {
                    label: '信息资源1',
                    children: [
                        {
                            label: '信息项已建'
                        },
                        {
                            label: '应用系统1'
                        },
                        {
                            label: '共享资源1'
                        },
                        {
                            label: '共享资源2'
                        }
                    ]
                },
                {
                    label: '信息资源2'
                }
            ]
        }
    ],
    renderLabel: item => `自定义：${item.label}`
});

API

注意事项

关于背景色

由于实现时有些线我们使用白色覆盖造成线条假象，所以如果你用的地方背景不是白色，请覆盖样式：

.ui-topology .item:first-child:before{
    background: #ff6600!important; // 这里是你背景的颜色
}
.ui-topology .item:last-child:after{
    background: #ff6600!important; // 这里是你背景的颜色
}

更新日志

更新日志