EasyUi,tree树的使用，layout布局

最新推荐文章于 2025-08-19 02:20:02 发布

原创最新推荐文章于 2025-08-19 02:20:02 发布 · 466 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #前端 #javascript #前端框架 #eclipse

WEB 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了前端框架EasyUi，主要用于管理员界面开发。内容包括EasyUi的layout布局属性和方法，tree树的概念、节点属性、tree属性及回调函数，以及结合实际案例展示了如何创建和引入file文件。更多详情可参阅提供的EasyUi链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

哈喽，大家好，今天我又开给大家分享一个UI界面的框架，EasyUi ,它是一个比较老的框架了哦，一般用它来进行管理员界面的开发
在这里也提供一个EasyUI的连接点我去EasyUi

一,easyui的layout布局的属性,方法

属性
easyui
方法

二，tree树

什么是tree树
tree
节点属性和tree写法

tree属性

回调函数

我这里值截取了一部分，详细的内容到上面的连接去找就好了

三，案例

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script
	src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<script
	src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/themes/icon.css">

</head>
<body class="easyui-layout">
    <div data-options="region:'north',title:'导航栏',collapsible:false" style="height:100px;"></div>   
    <div data-options="region:'south',title:'版本信息',collapsible:false" style="height:100px;"></div>   
    <div data-options="region:'west',title:'菜单',split:true" style="width:12%;">
    <ul id="asideMenu"></ul>  
    
    
    </div>   
    <div data-options="region:'center',title:'内容'" style="padding:5px;background:#eee;"></div> 
    
    <script>
    $('#asideMenu').tree({    
        url:'tree_data.json' ,
        method:"POST",
        lines:true,
        onClick: function(node){
        	   if (node.attributes["pid"]) {
                   console.log("点击了子菜单")
               } else {
                   console.log("点击了大菜单")
               }
    		
    	}

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

此处要新建一个file的文件，然后引入到在主页面

file文件


[{    
    "id":1,    
    "text":"用户管理",    
    "iconCls":"icon-save",    
    "children":[{    
        "text":"查看用户",    
        "checked":true ,
        "attributes":{
        "pid":1
        }
    },{    
        "text":"用户名字",    
        "state":"open",    
        "attributes":{    
            "url":"/demo/book/abc",    
            "price":100    
        },    
        "children":[{    
            "text":"用户订单",    
            "checked":true   
        }]    
    }]    
},{    
    "id":1,
    "text":"商家管理",    
    "state":"closed",    
    "children":[{    
        "text":"商家地址" ,  
        "attributes":{
        "pid":10
        }
    },{    
        "text":"商家商品"   
    }]  
}]