Treejs+EasyUI+Vuejs实操

最新推荐文章于 2023-08-24 17:46:58 发布

海面有风

最新推荐文章于 2023-08-24 17:46:58 发布

阅读量447

点赞数

分类专栏：实习文章标签： easyui javascript vue.js

本文链接：https://blog.csdn.net/weixin_44659458/article/details/122195888

版权

实习专栏收录该内容

30 篇文章 0 订阅

订阅专栏

// 创建节点
function create(el) {
    // 获取 treejs 的实例
    var ref = $(el).jstree(true);
    // 获取当前点击的节点
    var currNode = _getCurrNode(el);
    // 创建节点（在当前节点中创建节点）
    currNode = ref.create_node(currNode, {
        "type": "file"
    });
    if (currNode) {
        // 编辑（文件命名）
        ref.edit(currNode);
    }
}
// 重命名
function rename(el) {
    var ref = $(el).jstree(true);
    var currNode = _getCurrNode(el);
    // 重命名
    ref.rename_node(currNode, "rename");
}
// 删除
function del(el) {
    var ref = $(el).jstree(true);
    var currNode = _getCurrNode(el);
    // 删除节点
    ref.delete_node(currNode);
}
// 上移
function moveup(el) {
    var ref = $(el).jstree(true);
    var currNode = _getCurrNode(el);
    // 获取当前节点的上一个节点
    var prevNode = ref.get_prev_dom(currNode, true);
    // 俩节点进行互换
    ref.move_node(currNode, prevNode, 'before');
}
// 下移
function movedown(el) {
    var ref = $(el).jstree(true);
    var currNode = _getCurrNode(el);
    // 获取当前节点的下一个节点
    var nextNode = ref.get_next_dom(currNode, true);
    // 俩节点进行互换
    ref.move_node(currNode, nextNode, 'after');
}
// 获取当前所选中的结点
function _getCurrNode(el) {
    var ref = $(el).jstree(true),
        sel = ref.get_selected();
    // 未点击
    if (!sel.length) {
        console.log("未点击父节点");
        return false;
    }
    return sel[0];
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./easyui-lib/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./easyui-lib/themes/icon.css">
    <link rel="stylesheet" href="./tree-lib/themes/default/style.min.css">
    <script type="text/javascript" src="./easyui-lib/jquery.min.js"></script>
    <script type="text/javascript" src="./easyui-lib/jquery.easyui.min.js"></script>
    <script src="./tree-lib/jstree.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="win" class="easyui-window" title="My Window" data-options="iconCls:'icon-save',modal:true">
        <div class="easyui-layout" data-options="fit:true" style="display: flex;">
            <div data-options="region:'west',split:true" style="width:300px;">
                <div id="jstree1"></div>
            </div>
            <div data-options="region:'center'">
                <table id="dg"></table>
            </div>
        </div>
    </div>
    <!-- 菜单栏 -->
    <div id="mm" class="easyui-menu" style="width:120px;" data-options="onClick:menuHandler">
        <div data-options="name:'new'">新建</div>
        <div data-options="name:'del'">删除</div>
        <div data-options="name:'rename'">重命名</div>
        <div data-options="name:'up'">上移</div>
        <div data-options="name:'down'">下移</div>
    </div>
</body>
<script src="./js/tree-util.js"></script>
<script>
    var el = "#jstree1"

    function menuHandler(item) {
        switch (item.name) {
            case "new":
                create(el);
                break;
            case "del":
                del(el);
                break;
            case "rename":
                rename(el);
                break;
            case "up":
                moveup(el);
                break;
            case "down":
                movedown(el);
                break;
            default:
                break;
        }
    }
    $('#dg').datagrid({
        // url: './jsonp/datagrid_data.json',
        // data: [{
        //     "code": 1,
        //     "name": "a",
        //     "age": 12
        // }, {
        //     "code": 1,
        //     "name": "a",
        //     "age": 12
        // }],
        columns: [
            [{
                field: 'code',
                title: 'Code',
                width: 100
            }, {
                field: 'name',
                title: 'Name',
                width: 100
            }, {
                field: 'age',
                title: 'age',
                width: 100,
                align: 'right'
            }]
        ],
        // pagePosition: "top"
    });

    $('#win').window({
        width: 600,
        height: 400,
        modal: true,
        maximized: true, // 屏幕最大化
    });
    $(function() {

        $(document).bind("contextmenu", function(e) {
            $('#mm').menu('show', {
                left: e.clientX,
                top: e.clientY
            });
            // 关闭默认行为
            return false;
        });
        $("#jstree1").jstree({
            // 节点
            "core": {
                "check_callback": true, // 允许对 tree 的结构进行修改
                "data": [{
                    "id": "0",
                    "parent": "#",
                    "state": {
                        "disabled": false, // 是否可以点击（false: 可以点击）
                        "opened": true, // 初始化时是否打开
                        "selected": false, // 初始化时是否被点击
                    },
                    "text": "组成"
                }, {
                    "id": "1",
                    "parent": "0",
                    "text": "财务部"
                }, {
                    "id": "2",
                    "parent": "0",
                    "text": "销售部"
                }, {
                    "id": "3",
                    "parent": "0",
                    "text": "市场部"
                }, {
                    "id": "4",
                    "parent": "0",
                    "text": "人事行政部"
                }, {
                    "id": "5",
                    "parent": "0",
                    "text": "售前服务部"
                }, {
                    "id": "6",
                    "parent": "0",
                    "text": "开发部"
                }],
                "themes": {
                    "variant": "large", //加大
                    "ellipsis": true //文字多时省略
                },
                "check_callback": true
            },
            // 插件
            "plugins": ["wholerow", "themes", "contextmenu", "dnd"]
        }).on('select_node.jstree', function(event, data) {
            // console.log(data.node);
        }).on('changed.jstree', function(event, data) {
            // console.log("action:" + data.action);
        })
    });
</script>

</html>

海面有风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Treejs+EasyUI+Vuejs实操

// 创建节点function create(el) { // 获取 treejs 的实例 var ref = $(el).jstree(true); // 获取当前点击的节点 var currNode = _getCurrNode(el); // 创建节点（在当前节点中创建节点） currNode = ref.create_node(currNode, { "type": "file" }); if (currNode) {
复制链接

扫一扫