jstree

最新推荐文章于 2022-09-13 13:58:05 发布
漫漫长路随心所欲
最新推荐文章于 2022-09-13 13:58:05 发布
阅读量208
点赞数
本文链接：https://blog.csdn.net/qq_38559500/article/details/78335696
版权
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>数据字典</title>
    <meta http-equiv='X-UA-Compatible' content="IE=edge,IE=9,IE=8,chrome=1"/><![endif]-->
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/default/style.min.css" />
    <link rel="stylesheet" href="../assets/css/styles.css">
    <link href="../vendor/sweetalert/sweet-alert.css" rel="stylesheet" media="screen">
    <link href="../vendor/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css" rel="stylesheet" media="screen">
    <link href="../vendor/sweetalert/ie9.css" rel="stylesheet" media="screen">
    <link href="../vendor/toastr/toastr.min.css" rel="stylesheet" media="screen">
    <style>
        .titleFont {
            font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu
        }
    </style>
</head>
<body style="color:#333;">
<div class="app-content">
    <div class="main-content" style="margin-left: 0; margin-top: 0px;">
        <div class="wrap-content container" id="container">
            <section id="page-title" class="padding-top-15 padding-bottom-15">
                <div class="row">
                    <div class="col-md-7">
                        <h1 class="mainTitle titleFont">文件夹目录维护</h1>
                    </div>
                </div>
            </section>
            <div class="container-fluid container-fullw bg-white">
                <div class="row">
                    <div class="box box-info">
                        <div class="box-body" id="box-body">
                            <div class="col-md-12">
                                <div class="col-md-8">
                                    <button type="button" class="btn btn-success" οnclick="demo_create();"><i class="glyphicon glyphicon-asterisk"></i>创建</button>
                                    <button type="button" class="btn btn-warning" οnclick="demo_rename();"><i class="glyphicon glyphicon-pencil"></i>修改</button>
                                    <button type="button" class="btn btn-danger" οnclick="demo_delete();"><i class="glyphicon glyphicon-remove"></i>删除</button>
                                    <button type="button" class="btn btn-default" οnclick="demo_open();"><i class="glyphicon glyphicon-plus"></i>展开</button>
                                    <button type="button" class="btn btn-default" οnclick="demo_close();"><i class="glyphicon glyphicon-minus"></i>收缩</button>
                                </div>
                                <div class="col-md-4" style="text-align:right;">
                                    <input type="text" value="" style="box-shadow:inset 0 0 4px #eee; width:120px; margin:0; padding:6px 12px; border-radius:4px; border:1px solid silver; font-size:1.1em;" id="demo_q" placeholder="搜索" />
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div id="jstree_demo" class="demo" style="margin-top:1em; min-height:200px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="delete_doc" tabindex="-1"
     role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">删除节点</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>确认要删除此节点吗？</label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" οnclick="deletesub()">确定</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="../vendor/jquery/jquery.min.js"></script>
<script src="../vendor/jstree/jstree.min.js"></script>
<script src="../vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="../vendor/toastr/toastr.min.js"></script>
<script src="../js/vue.js"></script>
<script>
    var projectName = '/' + window.location.pathname.split('/')[1];
    var flag =false;
    $(function () {
        // 加载搜索
        var to = false;
        $('#demo_q').keyup(function () {
            if(to) { clearTimeout(to); }
            to = setTimeout(function () {
                var v = $('#demo_q').val();
                $('#jstree_demo').jstree(true).search(v);
            }, 250);
        });
        // 加载树
        jstree();
    });
    function demo_create() {
        var ref = $('#jstree_demo').jstree(true),
            sel = ref.get_selected();
        if(!sel.length) { return false; }
        sel = sel[0];
        sel = ref.create_node(sel,{"type":"new"});
        if(sel) {
            ref.edit(sel);
        }
    };
    function demo_rename() {
        var ref = $('#jstree_demo').jstree(true),
            sel = ref.get_selected();
        if(!sel.length) { return false; }
        sel = sel[0];
        ref.edit(sel);
    };
    function demo_delete() {
        $("#delete_doc").modal('show');
    };
    function deletesub() {
        var ref = $('#jstree_demo').jstree(true),
            sel = ref.get_selected();
        if(!sel.length) { return false; }
        ref.delete_node(sel);
        $("#delete_doc").modal('hide');
    }
    function demo_open() {
        var ref = $('#jstree_demo').jstree(true),
            sel = ref.get_selected();
        if(!sel.length) { return false; }
        ref.open_all(sel);
    }
    function demo_close() {
        var ref = $('#jstree_demo').jstree(true),
            sel = ref.get_selected();
        if(!sel.length) { return false; }
        ref.close_all(sel);
    }
    function jstree() {
        $.get(projectName+"/Technicaldatadictionary/getDataObj",function(data){
            $('#jstree_demo')
                .jstree({
                    "core" : {
                        "animation" : 0,
                        "check_callback": function (operation, node, parent, position, more) {
                            // 监听操作
                            if (operation === 'create_node') {
                                flag = true;
                            }
                            if (operation === 'delete_node') {
                                if(node.children.length == 0){
                                    $.get(projectName+"/Technicaldatadictionary/delDataObj",{id:node.id},function(data){
                                        $('#jstree_demo').jstree(true).settings.core.data=data;
                                        $('#jstree_demo').jstree(true).refresh();
                                    });
                                }else{
                                    showToast("error", "该节点下还有子节点不能删除！");
                                    $.get(projectName+"/Technicaldatadictionary/getDataObj",function(data){
                                        $('#jstree_demo').jstree(true).settings.core.data=data;
                                        $('#jstree_demo').jstree(true).refresh();
                                    });
                                }
                            }
                            if (operation === 'rename_node') {
                                if(flag){
                                    $.get(projectName+"/Technicaldatadictionary/addDataObj",{parent:parent.id,fdataname:position},function(data){
                                            $('#jstree_demo').jstree(true).settings.core.data=data;
                                            $('#jstree_demo').jstree(true).refresh();
                                    });
                                }else{
                                    $.get(projectName+"/Technicaldatadictionary/updateDataObj",{id:node.id,fdataname:position},function(data){
                                        $('#jstree_demo').jstree(true).settings.core.data=data;
                                        $('#jstree_demo').jstree(true).refresh();
                                    });
                                }
                                flag = false;
                            }
                            return true;
                        },
                        'force_text' : true,
                        "themes" : { "stripes" : true },
                        'data' :  data
                    },
                    "types" : {
                        "#" : { "max_depth" : 4 },
                        "new":{ "icon" : "../images/fileicon.png"}
                    },
                    // 搜索 状态 自定义类型
                    "plugins" : ["search", "state", "types", "wholerow" ]
                });
        });

    };
    function showToast(level, message) {
        var $toast = toastr[level](message, "");
        toastr.options = {
            "closeButton": true,
            "progressBar": true,
            "positionClass": "toast-top-right",
            "showDuration": "1000",
            "hideDuration": "1000",
            "timeOut": "2000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        };
    };
</script>
漫漫长路随心所欲
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jstree

page contentType="text/html;charset=UTF-8" language="java" %> 数据字典 http-equiv='X-UA-Compatible' content="IE=edge,IE=9,IE=8,chrome=1"/> charset="utf-8"/> rel="stylesheet" href="../ven
复制链接

扫一扫
jstree

“相关推荐”对你有帮助么？
