使用thymeleaf实现div中加载html

目标:固定顶部或者左侧导航,点击导航动态更新中间content区域的页面,也就是在放一个div在页面上,把html加载到div里,以前类似的实现都是通过Iframe或者js实现,在使用springboot+thymeleaf后,以前的办法有点过时。

 

步骤一:

添加依赖


        nz.net.ultraq.thymeleaf
        thymeleaf-layout-dialect


步骤二:确定最外层模板,就是导航框架什么的,这里是index.html


      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" ------->关键的命名空间
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">

   
   
   
   
   
   
   
    index






        这里就是放内容的地方




步骤三:放入的页面,这里是list.html


      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      xmlns="http://www.w3.org/1999/xhtml"
      layout:decorator="index"  -->这里是关键,指向index.html页面
>


   
    List







-->这里指向index.html里的
,替换里面内容
   
       
       
           
           
           
           
           
           
           
           
       
       
       
       
           

           
           
           
           
           
           
           
       
       
   
#filesNocustomerNameagreementNumagreementMoneyinRoomNumEditDelete
1neoOtto666editdelete

   

       

            add
       

   




再加一个add.html页面


      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      xmlns="http://www.w3.org/1999/xhtml"
      layout:decorator="index"
>


   
    Title



    add!!!


 

转载于:https://www.cnblogs.com/asker009/p/9184998.html

你可能感兴趣的:(java,后端,javascript)