easyui（Tree前端工作）

T276songjunhao

于 2022-05-05 23:17:29 发布

阅读量88

点赞数

文章标签： easyui 前端 javascript

本文链接：https://blog.csdn.net/jh9758/article/details/124599893

版权

一、全局path定义

base标签:base的标签的href属性里面的内容会自动添加到在hread标签里面的引入的路径前面

<%@ 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>
    <%@ include file="common/head.jsp" %>
    <title>Insert title here</title>
</head>
<body class="easyui-layout">
        <div data-options="region:'north'" style="height:50px"></div>
        <div data-options="region:'south',split:true" style="height:50px;"></div>
        
        <div data-options="region:'west',split:true" title="West" style="width:230px;">
            <ul id="funcTree" class="easyui-tree">   
                <!-- <li>   
                    <span>Folder</span>   
                    <ul>   
                        <li>   
                            <span>Sub Folder 1</span>   
                            <ul>   
                                <li>   
                                    <span><a href="#">File 11</a></span>   
                                </li>   
                                <li>   
                                    <span>File 12</span>   
                                </li>   
                                <li>   
                                    <span>File 13</span>   
                                </li>   
                            </ul>   
                        </li>   
                        <li>   
                            <span>File 2</span>   
                        </li>   
                        <li>   
                            <span>File 3</span>   
                        </li>   
                    </ul>   
                </li>   
                <li>   
                    <span>File21</span>   
                </li> -->   
            </ul> 
        
        </div>
        <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'" style="border:0px;">
            <div id="funTab" class="easyui-tabs" style="width:100%;height:100%">   
                <!--代码-->
            </div>
        </div>

二、页面缓存

① 首先打开Eclipse

② 点击菜单栏中的Window

③ 再点击Preferences

④ 搜素jsp 点击Templates

⑤ 找到New JSP File(html)

⑥ 双击然后添加下列代码

   <script>
    $(function() {
        $("#funcTree").tree({
            url: ctx+"/data/tree_data1.json",
            onDblClick:function(node) {
                $("#funTab").tabs("add", {
                    title:node.text,    
                    content:'Tab Body',    
                    closable:true,    
                    tools:[{
                        iconCls:'icon-mini-refresh',    
                        handler:function(){    
                            alert('refresh');    
                        }    
                    }]
                })
            }
        });
        
    });
    </script>

三、tree组件实现JSON数据绑定

① 在Eclipse中下载json

② 建立json文件

package com.zking.easyui03.util;
 
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
 
public class DBHelper {
 
    private static final String cname="oracle.jdbc.driver.OracleDriver";
    private static final String url="jdbc:oracle:thin:@192.168.83.133:1521:orcl";
    
    //只有在类被加载到内存的时候，执行一次
    static {
        try {
            Class.forName(cname);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    
 
    public static Connection getsCon() {
        Connection con = null;
        try {
            con = DriverManager.getConnection(url,"scott","123456");
        } catch (Exception e) {
            e.printStackTrace();
        }
        return con;
    }
 
    public static void Close(Connection con,PreparedStatement ps,ResultSet rs) {
        try {
            if(rs!=null) {
                rs.close();
            }
            if(ps!=null) {
                ps.close();
            }
            if(con!=null&&!con.isClosed()) {
                con.close();
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

四、动态添加选项卡

（1）主界面的分类不需要出现新的选项卡

（2）同一个分类点击多次只能出现一次

（3）点击分类时选项卡的标题显示为分类标题

	<script type="text/javascript">
			$(function() {
				$('#mytree').tree({    
				    url:xPath+'/static/json/list.json',
				    onClick:function(node){
				    	addMyTabs(node);
				    }
				}); 
			});
			function addMyTabs(node) {
				if(node.id === '-1'){
					return;
				}
             //判断选项卡是否存在选中
				var flag = $("#maintabs").tabs('exists',node.text);
				if(flag){
					$("#maintabs").tabs('select',node.text);
					return;
				}
            // 添加一个未选中状态的选项卡面板
				$("#maintabs").tabs('add',{
					title: node.text,
		    		content:node.text,
		    		closable:true,  
				})
			}	
			</script>

五、完整的菜单栏和选项卡页面显示

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file="static/common/easyuibase.jsp"%>
</head>
<body>
	<div id="cc" class="easyui-layout" data-options="fit:true">
		<div data-options="region:'north',title:'首页头部',split:true"
			style="height: 100px;"></div>
		<div data-options="region:'south',title:'版权信息',split:true"
			style="height: 100px;"></div>
		<div data-options="region:'west',title:'菜单栏',split:true"
			style="width: 170px;">
			<div id="mytree" class="easyui-accordion"
				style="width: 300px; height: 200px;"></div>
			<script type="text/javascript">
			$(function() {
				$('#mytree').tree({    
				    url:xPath+'/static/json/list.json',
				    onClick:function(node){
				    	addMyTabs(node);
				    }
				    
				}); 
			});			
			function addMyTabs(node) {
				if(node.id === '-1'){
					return;
				}
				var flag = $("#maintabs").tabs('exists',node.text);
				if(flag){
					$("#maintabs").tabs('select',node.text);
					return;
				}
				$("#maintabs").tabs('add',{
					title: node.text,
		    		content:node.text,
		    		closable:true,  
				})
			}			
			</script>
		</div>
		<div data-options="region:'center',title:'内容'"
			style="padding: 5px; background: #eee;">
			<div id="maintabs" class="easyui-tabs" data-options="fit:true">
			</div>
		</div>
	</div>
</body>
</html>

————————————————
版权声明：本文为CSDN博主「ning030907031016」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_67768699/article/details/124586414

T276songjunhao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui（Tree前端工作）

一、全局path定义 base标签:base的标签的href属性里面的内容会自动添加到在hread标签里面的引入的路径前面<%@ 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/...
复制链接

扫一扫