05-springmvc之ssm三（ztree，bootsraptab）

* 有问题可以参加Java技术交流群：839366464

* ztree.jsp

* Controller 的细节

@RequestMapping("/hello")
  public ModelAndView hello() {
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.addObject("name", "xiaohei");
        modelAndView.setViewName("hello");
        return modelAndView;
    }
简化写法
  @RequestMapping("/hello3")
 public String hello3(Model model) {
   model.addAttribute("name","xiaohei123");
    return "hello";
  }

* 添加bootstrap的tab

* 下载bootstrap插件

* https://github.com/bill1012/bootstrap-tab

* Hello BootStrap

* copy demo工程

* 修改demo.jsp

* 访问demo.jsp

* ztreetab.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO </TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/ztree/css/zTreeStyle/zTreeStyle.css"
          type="text/css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap-tab/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/bootstrap-tab/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap-tab/css/bootstrap-tab.css">

    <style>
        body {
            background-color: white;
            margin: 0;
            padding: 0;
            text-align: center;
        }

        div, p, table, th, td {
            list-style: none;
            margin: 0;
            padding: 0;
            color: #333;
            font-size: 12px;
            font-family: dotum, Verdana, Arial, Helvetica, AppleGothic, sans-serif;
        }

        #tabContainer {
            margin-left: 1px;
        }
    </style>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/ztree/js/jquery.ztree.core.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap-tab/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap-tab/js/bootstrap-tab.js"></script>
    <SCRIPT type="text/javascript">
        <!--
        var zTree;
        var demoIframe;
        var ids="000";
        var setting = {
            view: {
                dblClickExpand: false,
                showLine: true,
                selectedMulti: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: ""
                }
            },
            callback: {
                beforeClick: function (treeId, treeNode) {
                    var zTree = $.fn.zTree.getZTreeObj("tree");
                    if (treeNode.isParent) {
                        zTree.expandNode(treeNode);
                        return false;
                    } else {
                        // demoIframe.attr("src", treeNode.file + ".jsp");
                        //   alert("HelloWorld");
                        // var ids：有没有treeNode.id,假如没有添加，假如有，
                        var id=JSON.stringify(treeNode.id);// 101
                        if(ids.indexOf(id)==-1){
                            $("#tabContainer").data("tabs").addTab({
                                id: treeNode.id,
                                text: treeNode.name,
                                closeable: true,
                                url: treeNode.file + ".do"
                            },function (obj) {
                                var id=JSON.stringify(obj.id);
                                //移除id
                                ids=ids.replace(id,"");
                            })
                            ids+=id+",";
                        }else{
                          $("#tabContainer").data("tabs").showTab(treeNode.id);
                        }
                        return true;
                    }
                }
            }
        };


        $(document).ready(function () {
            $.ajax({
                url: "${pageContext.request.contextPath}/queryAllZnode.do",
                type: "GET",
                dataType: "json",
                success: function (data, status) {
                    var content = JSON.parse(JSON.stringify(data));
                    var zNodes = content.zNodes;
                    var t = $("#tree");
                    t = $.fn.zTree.init(t, setting, zNodes);
                    demoIframe = $("#tabContainer");
                    demoIframe.bind("load", loadReady);
                    var zTree = $.fn.zTree.getZTreeObj("tree");
                    zTree.selectNode(zTree.getNodeByParam("id", 101));
                    $("#tabContainer").tabs({
                        data: [{
                            id: 'welcom',
                            text: '欢迎页',
                            url: "welcome.jsp"
                        }],
                        showIndex: 1,
                        loadAll: false
                    })
                }
            })
        });

        function loadReady() {
            var bodyH = demoIframe.contents().find("body").get(0).scrollHeight,
                htmlH = demoIframe.contents().find("html").get(0).scrollHeight,
                maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH),
                h = demoIframe.height() >= maxH ? minH : maxH;
            if (h < 530) h = 530;
            demoIframe.height(h);
        }

        //-->
    </SCRIPT>
</HEAD>

<BODY>
<TABLE border=0 height=600px align=left>
    <TR>
        <TD width=260px align=left valign=top style="BORDER-RIGHT: #999999 1px dashed">
            <ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
        </TD>
        <TD width=770px align=left valign=top>
            <%--<IFRAME ID="testIframe" Name="testIframe" FRAMEBORDER=0 SCROLLING=AUTO width=100% height=600px
                    SRC="statistics.jsp"></IFRAME>--%>
            <div id="tabContainer"></div>
        </TD>
    </TR>
</TABLE>

</BODY>
</HTML>

* 统一处理iframe的jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <iframe style="width: 100%;height:600px;border:none" src="${pageContext.request.contextPath}/${tab}.jsp"></iframe>
</body>
</html>

@RequestMapping("/statistics")
    public ModelAndView statistics(){
        ModelAndView modelAndView=new ModelAndView();
        modelAndView.setViewName("tab");
        modelAndView.addObject("tab","statistics");
        return modelAndView;
    }

  @RequestMapping("/transfer")
    public ModelAndView transfer(){
        ModelAndView modelAndView=new ModelAndView();
        modelAndView.setViewName("tab");
        modelAndView.addObject("tab","transfer");
        return modelAndView;
    }

* 修改bootstrap-tabs的插件

//新增一个tab页，添加删除回调监听
    BaseTab.prototype.addTab=function (obj,fn) {
        var self=this;
        //nav-tab
        var ul_li = $(this.template.ul_li.format(obj.id, obj.text));
        //如果可关闭,插入关闭图标，并绑定关闭事件
        if (obj.closeable) {
            var ul_li_close = $(this.template.ul_li_close);

            ul_li.find("a").append(ul_li_close);
            ul_li.find("a").append("&nbsp;");
        }

        this.$element.find(".nav-tabs:eq(0)").append(ul_li);
        //div-content
        var div_content_panel = $(this.template.div_content_panel.format(obj.id));
        this.$element.find(".tab-content:eq(0)").append(div_content_panel);
        $("#" + obj.id).load(obj.url,obj.paramter);
        this.stateObj[obj.id] = true;

        if(obj.closeable){
            this.$element.find(".nav-tabs li a[href='#" + obj.id + "'] i.closeable").click(function () {
                var href = $(this).parents("a").attr("href").substring(1);
                if(self.getCurrentTabId()==href){
                    self.$element.find(".nav-tabs li:eq(0) a").tab("show");
                }
                $(this).parents("li").remove();
                $("#" + href).remove();
                // 存在fn则直接用，不存fn在则用函数表达式的方式声明一个
                fn = fn || function() {};
                fn(obj); //  调用传进来的fn
            })
        }

        this.$element.find(".nav-tabs a[href='#" + obj.id + "']").tab("show");
    }

05-springmvc之ssm三（ztree，bootsraptab）

猜你喜欢