main

分支 (1)

管理

管理

main

xntree
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仙女座虚拟树</title>
    <style>
        body {
            background: #fff;
        }
        .tree{
            width:430px;
            max-height:500px;
            overflow: auto;
            border:1px solid #ccc;
            background: #fff;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .xntree-ope{
            font-size: 12px;
            display: none;
        }
        .xntree-ope a{
            margin-left: 4px;
        }
        .xntree-item:hover .xntree-ope{
            display: flex;
        }
        input{
            width:430px;
            height:32px;
            line-height: 32px;
            border:1px solid #ccc;
            outline: none;
            padding:0 10px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border-bottom:0;
        }
        .xn-tree-container{
            padding:20px;
        }
        .btns a{
            font-size:14px;
            background: #4a9bfe;
            color: #fff;
            padding:0 10px;
            line-height: 32px;
            margin-bottom: 10px;
            display: inline-block;
            cursor: pointer;
        }
    </style>
    <script src="./dist/xntree.min.js"></script>
</head>
<body>
<div class="xn-tree-container">
    <h3>完整功能（设置容器最大高度500px）</h3>
    <div class="btns">
        <a id="checkAll">全选</a>
        <a id="checkAllSearch">全选(仅搜索结果项)</a>
        <a id="clearAll">全清</a>
        <a id="addRoot">添加根节点</a>
    </div>
    <input id="keyword" autocomplete="off" placeholder="请输入关键词回车搜索,搜索结果包含子节点">
    <div class="tree" id="tree"></div>
</div>
<div class="xn-tree-container">
    <h3>数据格式为list类型（list/tree）</h3>
    <div class="tree" id="listtree"></div>
</div>
<div class="xn-tree-container">
    <h3>单选框-显示内容为text字段（设置容器固定高度300）</h3>
    <div class="btns">
    </div>
<!--    <input id="keyword" autocomplete="off" placeholder="请输入关键词回车搜索,搜索结果包含子节点">-->
    <div class="tree" id="tree1" style="height: 300px;"></div>
</div>

<div class="xn-tree-container">
    <h3>无复选框和单选框</h3>
    <div class="btns">
    </div>
    <!--    <input id="keyword" autocomplete="off" placeholder="请输入关键词回车搜索,搜索结果包含子节点">-->
    <div class="tree" id="tree2"></div>
</div>

<div class="xn-tree-container">
    <h3>自定义显示内容，不显示默认图标</h3>
    <div class="btns">
    </div>
    <!--    <input id="keyword" autocomplete="off" placeholder="请输入关键词回车搜索,搜索结果包含子节点">-->
    <div class="tree" id="tree3"></div>
</div>

</body>
<script type="module">
    // import xnTree from './src/xnTree.js'
    import {data, data1, data2,bigdata,listdata} from './static/data.js'

    let optionlist = {
        label: (d,ins) => {
            let t=ins.replaceKey(d.text, document.querySelector('#keyword').value)
            let dom = `
                        <div style="display: flex;justify-content: space-between">
                        <div>
                            <span>${d.id}</span>
                            <span>
                                ${t}
                            </span>
                        </div>
                        <div class="xntree-ope">
                            <a class="delete-node">删除</a>
                            <a class="add-node">新增</a>
                            <a class="edit-node">编辑</a>
                        </div>
                        </div>
                        `
            return dom;
        },
        id: 'id',
        pId: 'parentid',
        lineHeight:28,
        dataType:'list',
        selectType: 'checkbox',//radio,null,checkbox
        canMove: true,
        checkDisabled: function (d) {
        },
        autoOpen: function (d, level) {
            return level <= 3;
        },
        checkSticky: {//check关联
            on: '',//p,自动勾选父，c自动勾选子，function
            off: 'pc'
        },
        on: {
            clickNode: ($t, nodedata, nodekey) => {
                if ($t.hasClass('add-node')) {
                    addNode(nodekey,'新节点')
                    return false;
                }
                if ($t.hasClass('delete-node')) {
                    deleteNode(nodekey)
                    return false;
                }
                if ($t.hasClass('edit-node')) {
                    editNode(nodekey,'新名称')
                    return false;
                }
                console.log(nodedata);
                return true;//true则设置该节点为当前点击元素，false反之
            },
            checkChange: (checkedData) => {
                console.log(checkedData);
            },
            moveChange: (movedNode, currentData) => {
                // console.log(currentData);
            }
        }
    }
    let xntreelist = new xnTree(document.querySelector('#listtree'), listdata, optionlist)

    let newId=1;
    let addNode=(nodeId,name)=>{
        newId++;
        xntree.addNode(nodeId,{id:'new'+newId,text:name})
    }
    let deleteNode=(nodeId)=>{
        xntree.deleteNode(nodeId)
    }
    let editNode=(nodeId,name)=>{
        let newNode={
            "id": nodeId,
            "text": name,
            "state": null,
            "checked": false,
            "parentid": "-",
            "hasParent": true,
            "hasChildren": true,
            "icon": null
        }
        xntree.editNode(newNode)
    }

    let option = {
        label: (d,ins) => {
            let t=ins.replaceKey(d.text, document.querySelector('#keyword').value)
            let dom = `
                        <div style="display: flex;justify-content: space-between">
                        <div>
                            <span>${d.id}</span>
                            <span>
                                ${t}
                            </span>
                        </div>
                        <div class="xntree-ope">
                            <a class="delete-node">删除</a>
                            <a class="add-node">新增</a>
                            <a class="edit-node">编辑</a>
                        </div>
                        </div>
                        `
            return dom;
        },
        id: 'id',
        pId: false,
        lineHeight:28,
        selectType: 'checkbox',//radio,null,checkbox
        canMove: true,
        checkDisabled: function (d) {
            return d.id == '001'
        },
        autoOpen: function (d, level) {
            return level <= 0;
        },
        checkSticky: {//check关联
            on: '',//p,自动勾选父，c自动勾选子，function
            off: 'pc'
        },
        on: {
            clickNode: ($t, nodedata, nodekey) => {
                if ($t.hasClass('add-node')) {
                    addNode(nodekey,'新节点')
                    return false;
                }
                if ($t.hasClass('delete-node')) {
                    deleteNode(nodekey)
                    return false;
                }
                if ($t.hasClass('edit-node')) {
                    editNode(nodekey,'新名称')
                    return false;
                }
                console.log(nodedata);
                return true;//true则设置该节点为当前点击元素，false反之
            },
            checkChange: (checkedData) => {
                console.log(checkedData);
            },
            moveChange: (movedNode, currentData) => {
                console.log(currentData);
            }
        }
    }
    let xntree = new xnTree(document.querySelector('#tree'), bigdata, option)

    document.querySelector('#keyword').addEventListener('change', e => {
        xntree.search(document.querySelector('#keyword').value, (d) => {
            let r = d.text.indexOf(document.querySelector('#keyword').value) > -1;
            return r;
        }, true);
    })
    document.querySelector('#checkAll').addEventListener('click', e => {
        xntree.checkAll()
    })
    document.querySelector('#checkAllSearch').addEventListener('click', e => {
        xntree.checkAll(true)
    })
    document.querySelector('#clearAll').addEventListener('click', e => {
        xntree.clearAll()
    })
    document.querySelector('#addRoot').addEventListener('click', e => {
        addNode(null,'新跟节点')
    })


    let option1 = {
        label: 'text',
        id: 'id',
        pId: false,
        selectType: 'radio',//radio,null,checkbox
        canMove: true,
        checkDisabled: function (d) {
            return d.id == '001'
        },
        autoOpen: function (d, level) {
            return level <= 1;
        },
        checkSticky: {//check关联
            on: '',//p,自动勾选父，c自动勾选子，function
            off: 'pc'
        },
        on: {
            clickNode: ($t, nodedata, nodekey) => {
                if ($t.hasClass('add-node')) {
                    addNode(nodekey,'新节点')
                    return false;
                }
                if ($t.hasClass('delete-node')) {
                    deleteNode(nodekey)
                    return false;
                }
                if ($t.hasClass('edit-node')) {
                    editNode(nodekey,'新名称')
                    return false;
                }
                console.log(nodedata);
                return true;//true则设置该节点为当前点击元素，false反之
            },
            checkChange: (checkedData) => {
                console.log(checkedData);
            },
            moveChange: (movedNode, currentData) => {
                console.log(currentData);
            }
        }
    }
    let xntree1 = new xnTree(document.querySelector('#tree1'), bigdata, option1)

    let option2 = {
        label: (d,ins) => {
            let t=ins.replaceKey(d.text, document.querySelector('#keyword').value)
            let dom = `
                        <div style="display: flex;justify-content: space-between">
                        <div>
                            <span>${d.id}</span>
                            <span>
                                ${t}
                            </span>
                        </div>
                        </div>
                        `
            return dom;
        },
        id: 'id',
        pId: false,
        selectType: false,//radio,null,checkbox
        canMove: true,
        checkDisabled: function (d) {
            return d.id == '001'
        },
        autoOpen: function (d, level) {
            return level <= 1;
        },
        checkSticky: {//check关联
            on: '',//p,自动勾选父，c自动勾选子，function
            off: 'pc'
        },
        on: {
            clickNode: ($t, nodedata, nodekey) => {
                if ($t.hasClass('add-node')) {
                    addNode(nodekey,'新节点')
                    return false;
                }
                if ($t.hasClass('delete-node')) {
                    deleteNode(nodekey)
                    return false;
                }
                if ($t.hasClass('edit-node')) {
                    editNode(nodekey,'新名称')
                    return false;
                }
                console.log(nodedata);
                return true;//true则设置该节点为当前点击元素，false反之
            },
            checkChange: (checkedData) => {
                console.log(checkedData);
            },
            moveChange: (movedNode, currentData) => {
                console.log(currentData);
            }
        }
    }
    let xntree2 = new xnTree(document.querySelector('#tree2'), bigdata, option2)


    let option3 = {
        label: (d,ins) => {
            let t=ins.replaceKey(d.text, document.querySelector('#keyword').value)
            let dom = `
                        <div style="display: flex;justify-content: space-between">
                        <div>
                            <span>
                                ${t}
                            </span>
                            <span>${d.id}</span>
                        </div>
                        </div>
                        `
            return dom;
        },
        id: 'id',
        pId: false,
        selectType: false,//radio,null,checkbox
        canMove: true,
        checkDisabled: function (d) {
            return d.id == '001'
        },
        autoOpen: function (d, level) {
            return level <= 1;
        },
        checkSticky: {//check关联
            on: '',//p,自动勾选父，c自动勾选子，function
            off: 'pc'
        },
        hideIcon:true,//是否隐藏默认图标
        on: {
            clickNode: ($t, nodedata, nodekey) => {
                if ($t.hasClass('add-node')) {
                    addNode(nodekey,'新节点')
                    return false;
                }
                if ($t.hasClass('delete-node')) {
                    deleteNode(nodekey)
                    return false;
                }
                if ($t.hasClass('edit-node')) {
                    editNode(nodekey,'新名称')
                    return false;
                }
                console.log(nodedata);
                return true;//true则设置该节点为当前点击元素，false反之
            },
            checkChange: (checkedData) => {
                console.log(checkedData);
            },
            moveChange: (movedNode, currentData) => {
                console.log(currentData);
            }
        }
    }
    let xntree3 = new xnTree(document.querySelector('#tree3'), bigdata, option3)
</script>
</html>