easyui手风琴配合tree 加tab 的数据库动态添加

最新推荐文章于 2019-07-08 13:00:16 发布

happyProgrammerWANG

最新推荐文章于 2019-07-08 13:00:16 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/weixin_38568779/article/details/77089715

版权

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<html>
<head>
    <title>前台页面</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/icon.css"/>
    <script src="${pageContext.request.contextPath}/js/jquery.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js" type="text/javascript"></script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',split:true" style="height:100px;">
   
</div>
<div data-options="region:'west'," style="width:220px;">
    <div id="cc" class="easyui-accordion">
    </div>
</div>
<div data-options="region:'center'" style="background:#eee;">
    <div id="tt" class="easyui-tabs" data-options="fit:true">

    </div>
</div>
</body>
<script type="text/javascript">
    $(function () {
        $.ajax({
            url:'${pageContext.request.contextPath}/menu/getAccordionAll.do',
            type:'post',
            async: false,
            dataType:'json',
            success:function(data) {
                $.each(data, function (i, item) {
                   console.info(i);
                   console.info(item.id);
                   console.info(item.url);
                    console.info(item.name);
                    var htm='<ul id="tree'+item.id+'" ></ul>'
                    $('#cc').accordion('add',{
                        title:item.name,
                        content:htm,
                    });
                    $('#tree'+item.id ).tree({
                     url: "${pageContext.request.contextPath}"+item.url,
                     loadFilter: function (data) {
                     if (data.d) {
                     return data.d;
                     } else {
                     return data;
                     }
                     },
                     onClick: function (node) {
                     var ex = $('#tt').tabs('exists', node.text);
                     if (ex == false) {
                     $('#tt').tabs('add', {
                     title: node.text,
                     href: node.attributes.url,
                     closable: true,
                     });
                     } else {
                     $('#tt').tabs('select', node.text);
                     }
                     }
                     });
                });
            }
        });

        $('#tt').tabs({
            onBeforeClose: function (title, index) {
                var target = this;
                $.messager.confirm('确认', '你确认想要关闭' + title, function (r) {
                    if (r) {
                        var opts = $(target).tabs('options');
                        var bc = opts.onBeforeClose;
                        opts.onBeforeClose = function () {
                        };  // 允许现在关闭
                        $(target).tabs('close', index);
                        opts.onBeforeClose = bc;  // 还原事件函数
                    }
                });
                return false;  // 阻止关闭
            }

        });
    })
</script>
</html>