Spring Boot + EasyUI 全屏布局（二）

一、创建一个Spring Boot + EasyUI项目

Spring Boot + EasyUI 创建第一个项目（一）_springboot整合easyui-CSDN博客

二、相关知识点总结

        布局（layout）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的容器。中间的区域面板是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。布局（layout）可以嵌套，因此用户可建立复杂的布局。

布局(Layout)属性：

名称	类型	描述	默认值
fit	boolean	当设置为 true 时，就设置布局（layout）的尺寸适应它的父容器。当在 'body' 标签上创建布局（layout）时，它将自动最大化到整个页面的全部尺寸。	false
title	string	布局面板（layout panel）的标题文本。	null
border	boolean	当设置为 true 时，就显示布局面板（layout panel）的边框。	true
split	boolean	当设置为 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:

    
    
    
    
    
    
    


    
北部
    
南部
    
东部
    
西部
    

        

            

            

                
Item ID
                
Product ID
                
Price
                
Unit Cost
                
Attribute
                
Status
            
            
            

                
1
product1
1.0
0.1
钱多
开心
                
2
product2
2.0
0.2
话少
孤独
                
3
product3
3.0
0.3
死的早
解脱
            
        
    

pom.xml:

    4.0.0

    com.xj.study
    SpringBootEasyUIStudyProject
    1.0-SNAPSHOT

    
        org.springframework.boot
        spring-boot-starter-parent
        2.4.5
        
    

    
        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.springframework.boot
            spring-boot-starter-test
            test
        

        
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        
    

    
    
        
            
            
                org.springframework.boot
                spring-boot-maven-plugin
                
                    
                        
                            repackage
                        
                    
                
            
        
    

3 运行结果

四、参考

1.Easyui Layout 布局_EasyUI 插件

2.Easyui Datagrid 数据网格_EasyUI 插件