手表网站域名,网页设计报价模板,建设网站的工作流程,优化大师下载安装一、创建一个Spring Boot EasyUI项目
Spring Boot EasyUI 创建第一个项目#xff08;一#xff09;_springboot整合easyui-CSDN博客
二、相关知识点总结 布局#xff08;layout#xff09;是有五个区域#xff08;北区 north、南区 south、东区 east、西区 west 和中区…一、创建一个Spring Boot EasyUI项目
Spring Boot EasyUI 创建第一个项目一_springboot整合easyui-CSDN博客
二、相关知识点总结 布局layout是有五个区域北区 north、南区 south、东区 east、西区 west 和中区 center的容器。中间的区域面板是必需的边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸也可以通过点击折叠触发器来折叠面板。布局layout可以嵌套因此用户可建立复杂的布局。
布局(Layout)属性
名称类型描述默认值fitboolean当设置为 true 时就设置布局layout的尺寸适应它的父容器。当在 body 标签上创建布局layout时它将自动最大化到整个页面的全部尺寸。falsetitlestring布局面板layout panel的标题文本。nullborderboolean当设置为 true 时就显示布局面板layout panel的边框。truesplitboolean当设置为 true 时就显示拆分栏用户可以用它改变面板panel的尺寸。false
数据网格DataGrid属性
三、项目举例
1 项目框架 2 代码实现
SpringBootMainApplication.java:
package com.xj.main;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;/*** Author: xjfu* Create: 2023/10/20 7:33* Description: SpringBoot启动类*/
ComponentScan(com.xj)
SpringBootApplication
public class SpringBootMainApplication {public static void main(String[] args) {try{SpringApplication.run(SpringBootMainApplication.class, args);}catch (Exception e){e.printStackTrace();}}
}ThymeleafController.java:
package com.xj.controller;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;/*** Author: xjfu* Create: 2023/10/20 7:42* Description:*/
RequestMapping(/easyui)
Controller
public class ThymeleafController {RequestMapping(/hello)public String sayHello(){//启动hello.html页面return hello;}RequestMapping(/helloPage)public String helloPage(){//启动helloPage.html页面return helloPage;}//Datebox和Datetimebox案例RequestMapping(/dateboxAndDatetimebox)public String dateboxAndDatetimebox(){//启动DateboxAndDatetimebox.html页面return DateboxAndDatetimebox;}//流式布局RequestMapping(/fullLayout)public String fluidLayout(){//启动fullLayout.html页面return fullLayout;}
}fullLayout.html:
!DOCTYPE html
html langen xmlns:thhttp://www.thymeleaf.org
headmeta charsetUTF-8title全屏布局/titlelink relstylesheet typetext/css href../../themes/default/easyui.csslink relstylesheet typetext/css href../../themes/icon.csslink relstylesheet typetext/css href../demo.cssscript typetext/javascript src../../jquery.min.js/scriptscript typetext/javascript src../../jquery.easyui.min.js/script
/head
body classeasyui-layoutdiv data-optionsregion:north styleheight:50px北部/divdiv data-optionsregion:south,split:true styleheight:50px;南部/divdiv data-optionsregion:east,split:true titleEast stylewidth:150px;东部/divdiv data-optionsregion:west,split:true titleWest stylewidth:13%;西部/divdiv data-optionsregion:center,title:Main Title,iconCls:icon-oktable classeasyui-datagriddata-optionsmethod:get,border:false,singleSelect:true,fit:true,fitColumns:truetheadtrth data-optionsfield:itemId width80Item ID/thth data-optionsfield:productId width100Product ID/thth data-optionsfield:price,align:right width80Price/thth data-optionsfield:unitCost,align:right width80Unit Cost/thth data-optionsfield:attribute width150Attribute/thth data-optionsfield:status,align:center width150Status/th/tr/theadtbodytrtd1/tdtdproduct1/tdtd1.0/tdtd0.1/tdtd钱多/tdtd开心/td/trtrtd2/tdtdproduct2/tdtd2.0/tdtd0.2/tdtd话少/tdtd孤独/td/trtrtd3/tdtdproduct3/tdtd3.0/tdtd0.3/tdtd死的早/tdtd解脱/td/tr/tbody/table/div
/body
/html
pom.xml:
?xml version1.0 encodingUTF-8?
project xmlnshttp://maven.apache.org/POM/4.0.0xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersiongroupIdcom.xj.study/groupIdartifactIdSpringBootEasyUIStudyProject/artifactIdversion1.0-SNAPSHOT/versionparentgroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-parent/artifactIdversion2.4.5/versionrelativePath//parentdependenciesdependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-test/artifactIdscopetest/scope/dependency!--Thymeleaf 启动器--dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-thymeleaf/artifactId/dependency/dependencies!--build标签描述了如何来编译及打包项目而具体的编译和打包工作是通过build中配置的 plugin 来完成--buildplugins!--使用SpringBoot的打包插件--plugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactIdexecutionsexecutiongoalsgoalrepackage/goal/goals/execution/executions/plugin/plugins/build
/project
3 运行结果 四、参考
1.Easyui Layout 布局_EasyUI 插件
2.Easyui Datagrid 数据网格_EasyUI 插件
