Jquery ztree树插件2

时间：2021-02-18 14:23:47
<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>

<link rel="stylesheet" href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css" type="text/css">

<script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"></script>

</head>

<body class="easyui-layout">

    <!-- data-options如果html元素是easyui组件，可以用data-options设置属性 -->

    <div region="north" style="height: 100px" title="xxx系统">北部区域</div>

    <div data-options="region:'west'" style="width: 150px" title="系统菜单">

        <!-- 展示折叠面板 -->

        <div class="easyui-accordion" data-options="fit:true">

            <div title="基本功能">

                <a id="btn" class="easyui-linkbutton" data-options="iconCls:'icon-save'">点击</a>

                <script type="text/javascript">

                    $("#btn").click(function(){

                        //判断

                        var r = $("#myTabs").tabs('exists','测试面板');

                        if(r){

                            //选中

                            $("#myTabs").tabs('select','测试面板');

                        }else{

                            //调用tabs组件方法。中部区域中tabs选项卡 添加新面板

                            $("#myTabs").tabs('add',{

                                title:'测试面板',

                                iconCls:'icon-add',

                                closable:true,

                                content:'<iframe src="../pages/base/area.jsp" frameborder="0" width="100%" height="100%"></iframe>'

                            });

                        }

                    })

                </script>

            </div>

            <div title="系统管理">

                <ul id="menu" class="ztree"></ul>

                <script type="text/javascript">

                   $(function(){

                       //配置信息

                       var setting2 = {

                            data: {

                                simpleData: {

                                    enable: true,  //开启简单数据模式

                                    idKey: "id",    //数据标识

                                    pIdKey: "pId",  //父节点标识

                                    rootPId: 0      //*节点

                                }

                            },

                            callback: {

                                onClick: function(event, treeId, treeNode){  //单击事件

                                    //判断节点是否可以点击

//                                     alert(treeNode.page);

                                    if(treeNode.page != undefined){

                                        //treeNode,单击某一节点数据：json对象

                                        //{ "id":"111", "pId":"11", "name":"基础档案设置",  "page":"pages/base/archives.jsp"},

    //                                     alert(treeNode);

    //                                     console.info(treeNode);//在浏览器控制台输出

                                        //判断

                                        var r = $("#myTabs").tabs('exists',treeNode.name);

                                        if(r){

                                            //选中

                                            $("#myTabs").tabs('select',treeNode.name);

                                        }else{

                                            //调用tabs组件方法。中部区域中tabs选项卡 添加新面板

                                            $("#myTabs").tabs('add',{

                                                title:treeNode.name,

                                                iconCls:'icon-add',

                                                closable:true,

                                                content:'<iframe src="../'+treeNode.page+'" frameborder="0" width="100%" height="100%"></iframe>'

                                            });

                                        }

                                    }

                                    }

                            }

                        };

                       //数据从json文件中

                       $.post("../data/menu.json",{},function(data){

                           $.fn.zTree.init($("#menu"), setting2, data);

                       });

                   })

                </script>

            </div>

        </div>

    </div>

    <div data-options="region:'center'">

        <!-- 展示选项卡面板 -->

        <div id="myTabs" class="easyui-tabs" data-options="fit:true">

            <div title="基本功能"></div>

        </div>

    </div>

<!--     <div data-options="region:'east'" style="width: 150px">东部区域</div> -->

    <div data-options="region:'south'" style="height: 50px">南部区域</div>

</body>

</html>

相关文章