topology-jquery

拓扑图jquery插件

Stars
9

IE9

ie8src/index-ie8.js

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

name type default description
data array [] labelvaluechildren
onClick function -
cursor one of: default``pointer 'default'
renderLabel function - item
setType function - errorsuccess
setClassName function - item
showCloseBtn function or boolean false boolfunc
onClose function -
closeTitle string ''
collapsedTitle string ''
expandedTitle string or function item => item.children && item.children.length > 0 ? '' : '' /functionitem

.ui-topology .item:first-child:before{
    background: #ff6600!important; // 
}
.ui-topology .item:last-child:after{
    background: #ff6600!important; // 
}