EasyUI的基本使用布局
目錄
一、什么是easyui？
二、easyui能帶給我們什么好處？
三、easyui如何使用？
1??.將從官網上下載的EasyUI的資源壓縮包解壓 然后復制到項目中
2??.?引入必要的js和css樣式文件
3??.easyui文檔網站
布局搭建和菜單搭建?
index.jsp?
tree-data.json
一、什么是easyui？
easyui是一種基于jQuery、Angular.、Vue和React的用戶界面插件集合。
easyui為創建現代化，互動，JavaScript應用程序，提供必要的功能。
二、easyui能帶給我們什么好處？
三、easyui如何使用？
easyui中文官網http://www.jeasyui.net/
easyui英文官網http://www.jeasyui.com/
EasyUI官方下載地址http://www.jeasyui.com/download/index.php
1??.將從官網上下載的EasyUI的資源壓縮包解壓 然后復制到項目中
文件介紹
🔶 demo文件夾
EasyUI官方提供的每個組件的使用示例效果代碼。
🔶 locale文件夾:組件中顯示的數據語言的js文件
🔶 plugins文件夾:是EasyUI提供的組件對應的js文件
🔶 src文件夾:源碼文件夾
🔶 themes文件夾：EasyUI官方提供的整套的樣式
2??.?引入必要的js和css樣式文件
1）引入JQuery（jquery.min.js）
2）引入EasyUI（jquery.easyui.min.js）
3）引入EasyUI的中文國際化js，讓EasyUI支持中文（locale/easyui-lang-zh_CN.js）
4）引入EasyUI的樣式文件（/themes/default/easyui.css）
5）引入EasyUI的圖標樣式文件（/themes/icon.css）
3??.easyui文檔網站
EasyUI文檔網站https://www.jeasyui.cn/document/index/index.html
?找到layout布局 創建布局
<body class="easyui-layout"> <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div> <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div> <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div> <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div> </body>布局搭建和菜單搭建?
index.jsp?
<%@ 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}/easyui/jquery.min.js"></script> <script src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script> <link rel="stylesheet" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.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:20%;"><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(node){//取到節點的自定義屬性 判斷自定義屬性中的pidif(node.attributes.pid){console.log("小菜單")}else{console.log("大菜單")}}});</script> </body></html>tree-data.json
[{ "id":1, "text":"商品管理", "state":"closed","attributes":{"pid":0 },"children":[ {"id":2,"text":"商品增加01", "attributes":{"pid":1 } },{"id":3,"text":"商品增加02", "attributes":{"pid":1 } }] },{ "id":10, "text":"類別管理", "state":"closed", "attributes":{"pid":0 },"children":[{"id":12,"text":"類別增加01","state":"closed", "attributes":{"pid":10 },"children":[{"id":18,"text":"jsakdh","attributes":{"pid":12 }} ] },{"id":13,"text":"類別增加02", "attributes":{"pid":10 } }] } ]今天的分享就要這結束啦！！?
以上就是關于EasyUI的基本使用&布局的一些內容，如果感興趣想更深入了解，可以到官方文檔學習學習（鏈接文章有提到）！！📖
期待下次再見！！😊
總結
以上是生活随笔為你收集整理的EasyUI的基本使用布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Java】基础排序算法-插入排序
- 下一篇： java removeat,在c#中 R