Thymeleaf--:fragment

最新推荐文章于 2024-11-21 14:22:22 发布
最新推荐文章于 2024-11-21 14:22:22 发布
阅读量141 收藏
点赞数
文章标签： javascript java 前端 ViewUI

 

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
<body>
    <div th:fragment="crudmodal"> //主要是这里
        <!-- modify modal -->
        <div class="modal fade" id="crudmodal_modify" tabindex="-1"
            role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
<body>
    <!-- crudmodal -->
    <!-- add modal -->
    <div th:fragment="crudmodal">

        <!-- modify modal -->
        <div class="modal fade" id="crudmodal_modify" tabindex="-1"
            role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div style="width: 900px;" class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">&times;</button>
                        <h4 id="modaltitle" class="modal-title">送检人员</h4>
                    </div>
                    <div class="modal-body">
                        <div class="panel panel-default">
                            <form class="form-horizontal" style="width: 60%;">

                                <div class="form-group">
                                    <div class="col-sm-2 control-label">姓名</div>
                                    <div class="col-sm-10">
                                        <input id="xingMing" type="text" class="form-control"
                                            placeholder="姓名" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-2 control-label">性别</div>
                                    <div class="col-sm-10">
                                        <select class="col-sm-10 form-control" id="xbSelect"
                                            style="float: left;">
                                            <option value="男">男</option>
                                            <option value="女">女</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-2 control-label">身份证号码</div>
                                    <div class="col-sm-10">
                                        <input id="shenFenZhengHaoMa" type="text" class="form-control"
                                            placeholder="身份证号码" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-sm-2 control-label">电话号码</div>
                                    <div class="col-sm-10">
                                        <input id="dianHuaHaoMa" type="text" class="form-control"
                                            placeholder="电话号码" />
                                    </div>
                                </div>
                                <!-- <div class="form-group">
                                    <div class="col-sm-2 control-label">地区</div>
                                    <div class="col-sm-10">
                                        <input id="quYuMingCheng" type="text" class="form-control"
                                            placeholder="地区" />
                                    </div>
                                </div> -->
                                <div class="form-group">
                                    <div class="col-sm-2 control-label">区域</div>
                                    <div class="col-sm-10">
                                        <select class="form-control" id="quyuSelect">
                                            <option th:each="quyuguanli:${quyuguanlis}"
                                                th:value="${quyuguanli.id}"
                                                th:text="${quyuguanli.quYuMingCheng}"
                                                th:attr="phone=${quyuguanli.quYuBianMa}"></option>
                                        </select>
                                    </div>
                                </div>
                                <!-- <div class="form-group">
                                    <div class="col-sm-2 control-label">人员状态ID</div>
                                    <div class="col-sm-10">
                                        <input id="renYuanZhuangTaiId" type="text"
                                            class="form-control" placeholder="人员状态ID" />
                                    </div>
                                </div> -->
                                <div class="form-group">
                                    <div class="col-sm-2 control-label">人员状态</div>
                                    <div class="col-sm-10">
                                        <select class="form-control" id="ryztSelect">
                                            <option th:each="ryztadd:${renyuanzhuangtais}"
                                                th:value="${ryztadd.renYuanZhuangTaiId}"
                                                th:text="${ryztadd.renYuanZhuangTai}"></option>
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn  btn-default"
                            data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal"
                            modifyid="" AddorModify="" onclick="addorModifySubmit(this);">是</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>

        <!-- delete modal -->
        <div class="modal fade" id="crudmodal_delete" tabindex="-1"
            role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">&times;</button>
                        <h4 class="modal-title">作废订单</h4>
                    </div>
                    <div class="modal-body">是否确定作废该订单吗？</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">否
                        </button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal"
                            deleteid="0" onclick="delSubmit(this);">是</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>

        <!-- operation result modal -->
        <div class="modal fade" id="crudmodal_result" tabindex="-1"
            role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">&times;</button>
                        <h4 class="modal-title">操作结果</h4>
                    </div>
                    <div id="crudmodal_result_operateResult" class="modal-body">

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal"
                            onclick="refresh();">确定</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>

        <!-- loading modal-->
        <div class="modal fade" id="crudmodal_loading" tabindex="-1"
            role="dialog" aria-labelledby="myModalLabel" data-backdrop='static'>
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">提示</h4>
                    </div>
                    <div class="modal-body">请稍候。。。</div>
                </div>
            </div>
        </div>

    </div>


</body>
</html>
完整版

 

function initModifyModal(obj) {
    jQuery.ajax({
        url: '/sjr/' + $(obj).attr('whatever'),
        type: 'GET',
        beforeSend: function () {
            $('#crudmodal_loading').modal('show'); 弹出对应的界面块
        },
        error: function (request) {
            $('#crudmodal_loading').modal('hide');
            $('#crudmodal_result #crudmodal_result_operateResult').html('操作失败');
            $('#crudmodal_result').modal('show');
        },
        success: function (data) {

            if (data.code == 200) {
                $('#crudmodal_loading').modal('hide');
                $('#crudmodal_modify #xbSelect').val(data.data.xingBie);
                $('#crudmodal_modify .btn-primary').attr('AddorModify',2); //1是添加 2 修改
                $('#crudmodal_modify .btn-primary').html("修改");
                $('#crudmodal_modify #modaltitle').html("送检人员-修改");
                $('#crudmodal_modify').modal('show');
            } else {
                $('#crudmodal_loading').modal('hide');
                $('#crudmodal_result #crudmodal_result_operateResult').html('操作失败:' + data.code);
                $('#crudmodal_result').modal('show');
            }
        }
    });
}

但是网上很多网友的做法不是这样的，

---------以下都看不懂　　

thymeleaf中fragment 的layout布局 - 优快云博客
http://blog.youkuaiyun.com/shanshan_blog/article/details/65630607

 

=========

thymeleaf中include fragment使用

(2016-07-20 20:25:06)
转载▼
  

thymeleaf是一个前端模板，最近做的项目是通过springboot,angularjs,thymeleaf结合完成的。
其中thymeleaf很多功能在有js的支持下angularjs同样可以完成，比如ng-show ng-class就能达到更好的效果，而且由于angularjs是双向数据绑定的，在数据实时显示方面也表现得更好。
但是在离开js的时候纯页面交互方面使用thymeleaf就比较方便了
例如在页面中使用共同的模板：
thymeleaf提供了 div th:include="common/test:: test2"></</span>div>include指令来加载共同模板test.html
div th:fragment="test2">对应其id名test2 
<</span>div th:include="common/test:: test2(value1,value2)"></</span>div> 
<</span>div th:fragment="test2(valueOne,valueTwo)">
SpringBoot系列教材 （三十）- Thymeleaf - thymeleaf 如何通过 fragment 包含另一个文件举例
Lan_ht的博客
11-30 508
把你自己做的项目文件夹，和我的可运行项目文件夹进行比较。在页面底部可以看到如图所示的版权信息，这个版权信息就是包含另一个页面的内容而来的。的可运行项目，配置运行起来，确认可用之后，再学习做了哪些步骤以达到这样的效果。在确保可运行项目能够正确无误地运行之后，再严格照着教程的步骤，对代码模仿一遍。th:replace ：不要自己的主标签，保留th:fragment的主标签。th:insert ：保留自己的主标签，保留th:fragment的主标签。，可以较为明显地提升学习速度，跨过学习路上的各个槛。
thymeleaf之fragment
pdw2009的专栏
10-01 3680
thymeleaf之fragment
thymeleaf中的fragment使用
热门推荐
jonathan的专栏
10-23 2万+
fragment介绍fragment类似于JSP的tag，在html中文件中，可以将多个地方出现的元素块用fragment包起来使用。fragment使用定义fragment所有的fragment可以写在一个文件里面，也可以单独存在，例如<footer th:fragment="copy"> the content of footer </footer> fragment的引用 th:i
Thymeleaf fragment
Feathers的个人笔记
03-06 166
fragment 类似jsp的tag，可以用于抽取重复代码模板，定义组件，并且可以朝fragment中传递参数，较为灵活。 参考原文：https://blog.youkuaiyun.com/believe__sss/article/details/79992408 定义模块， 在component目录下定义pagination.html 作为组件模板，用作公共代码抽取： <!-- th:fragment...
thymeleaf学习之fragment
myl_0808的博客
03-03 380
title: thymeleaf学习 date: 2019-11-22 原本在个人博客上写了一些博文，现转移到优快云上 thymeleaf学习之fragment 在上一篇博客中，简单的介绍了一些thymeleaf的使用，包括thymeleaf如何利用modelandview确定view的名字以及如何给model加值。并利用确定好的model以及view在前台绑定与渲染数据。本篇博客将介绍如何利...
Thymeleaf fragment使用
Tyrell
03-18 301
1.在 一个html文档的 一个标签里： th:fragment="myFragment" 2.在另一个 html里 引入： th:replace="/test::myFragment" //templates文件夹下 test.html 3. th:replace 会将加载它的容器标签去掉（在replace的文档里），将整个片段放到这里。 th:include 读取要进来的...
thymeleaf-layout-dialect:Thymeleaf的一种方言，可让您构建布局和可重复使用的模板，以提高代码重用性
04-29
设置一些共享的静态资产，并使用layout:fragment处理器在主体中定义扩展点： <!DOCTYPE html > < html xmlns:layout =" http://www.ultraq.net.nz/thymeleaf/layout " > < head >
第 2-5 课：Thymeleaf ⻚⾯布局1
08-03
在 Thymeleaf 中，布局机制是通过 fragment 来实现的。fragment 是一个可以重用的代码块，通过 th:fragment 属性来定义。例如：<footer th:fragment="copyright"> © 2018 在上面的代码中，我们定义了一个名为 ...
thymeleaf-extras-springsecurity5和thymeleaf-layout-dialect
04-04
thymeleaf-extras-springsecurity5是一个Thymeleaf与...它提供了一些额外的Thymeleaf标签，如layout:fragment和layout:decorate等，可以用于定义布局和引用布局。它使得Thymeleaf可以更容易地实现页面的模块化和重用。
thymeleaf-3.0.5中文文档
11-07
此外，还有`th:fragment`和`th:with`等功能，方便在模板之间共享和计算数据。 总的来说，"thymeleaf-3.0.5中文文档"是一个全面的指南，它覆盖了从基本概念到高级特性的方方面面，无论你是初学者还是经验丰富的...
Thymeleaf通过fragment实现组件化
龙源IT 的博客
04-10 2454
在Thymeleaf中通过th:fragment将代码组件化，可以提高代码的复用，简化我们的开发。
thymleaf之fragment使用
weixin_38568503的博客
11-24 2354
fragment片段的意思，是thymleaf为了消除前端代码的重复性而设计出来的。 用法： 1.th:insert:保留自己的主标签，保留th:fragment的主标签。 将远处需要引入用的片段插入到当前的标签 内 ，如： <div><th:insert>将远处整个片段插入到此div中，本div标签保留</div> 2.th:replace:不要自己的主标签，保留th:fragment的主标签。 将远处需要引入用的片段替换 当前的标签 ，如： <div>
thymeleaf中片段（fragment）使用调用页内容
左直拳的马桶_日用桶
01-14 1937
我终于知道在thymeleaf中，一个公用片段，如何使用调用它的页面上的内容了。 将页面上一些公用、独立的东西制作成片段，然后供其他页面按需要、层次式地引用，一般来说，已经满足大部分的需求。 但是有些还不够。比如想做一些容器类的片段：这个片段是一个容器，它只有外层一些东西是公用的，里面的内容，可能对于不同的页面，就是不同的，如图所示： 对于这个容器来说，如何将调用页面上的个性化内容放到它里面去呢...
thymeleaf的fragment例子
weixin_30468137的博客
04-19 365
fragment介绍 fragment类似于JSP的tag，在html中文件中，可以将多个地方出现的元素块用fragment包起来使用。 定义fragment 新建foot.html文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht...
Thymeleaf 模板布局 th:fragment、th:replace、th:insert、th:remove
const_
07-26 1503
Thymeleaf 模板布局 th:fragment、th:replace、th:insert、th:remove
Thymeleaf 模板布局 th:fragment
有幸添砖java
04-27 1716
参考博文：https://blog.youkuaiyun.com/wangmx1993328/article/details/84747497?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1&utm_source=distribute.pc_relevant.none-task-bl...
【揭秘】Thymeleaf的隐藏技能：用fragment打造你的组件化开发利器！
Q2024107的博客
11-21 385
你是否厌倦了在项目中反复编写相同的HTML代码？是否渴望像搭积木一样，快速构建出既美观又高效的Web页面？如果你的答案是肯定的，那么今天我要分享的Thymeleaf技巧绝对会让你眼前一亮——那就是通过fragment实现组件化开发！
如何在Thymeleaf 模板中使用片段Fragments
allway2的博客
10-19 1257
表示可包含在其他模板中的模板片段的片段。它可以是页眉，菜单，页脚和文档的任何其他部分，通常在许多页面上重复。片段可以参数化并包含在特定的初始参数中。在本文中，我们已经展示了百里叶中的模板布局机制是多么灵活。我们还可以将常用的逻辑分离到一个片段中，并将其附加到许多模板中。要使用参数化片段，我们需要提供一个片段名称和声明的参数列表。片段可以隔离在单独的文件中（我们建议使用此方法），也可以在任何其他模板中定义。在下面的示例中，我们定义了一个负责在 HTML 表中显示单个联系人行的片段。
springboot中运用thymeleaf样式消失 【thymeleaf templates引入static中css样式失效】
DXIANGH的博客
07-17 1777
木目录结构和引入路径为如图所示时页面样式加载成功 现在在templates目录下在新创建一个目录为emp,并将list.html方放入 运行时页面样式丢失 原因：引入css路径错误导致样式失效 解决方案：将路径中的static去掉 如图所示页面样式加载成功 ...
thymeleaf中的th:fragment
最新发布
03-04
### Thymeleaf 中 `th:fragment` 属性的使用 在 Thymeleaf 模板引擎中，`th:fragment` 是用于定义可重用片段的关键属性。通过此属性可以创建页面中的局部区域作为独立的部分，在其他地方引用这些部分来构建复杂的网页布局。 #### 定义 Fragment 片段 要定义一个 fragment 片段，可以在任意 HTML 标签上添加 `th:fragment` 属性并指定名称： ```html <div th:fragment="header"> <h1>网站标题</h1> <p>欢迎访问本网站。</p> </div> ``` 上述代码定义了一个名为 header 的片段[^3]。 #### 引入 Fragment 片段 有几种方式可以从另一个文件引入已定义好的 fragments 片段： - **替换当前标签的内容** 当希望完全替代某个容器内的原有内容时，可以利用 `th:replace` 来实现这一点。这将会移除目标位置处原有的标记结构，并代之以新加载进来的 fragment 内容。 ```html <header th:replace="/fragments/header :: header"></header> ``` 这里 `/fragments/header` 表示外部资源路径，而 `:: header` 则指定了具体想要使用的 fragment 名称。 - **插入到现有标签内** 如果只是想把新的内容附加到现有的 DOM 结构之中而不改变其本身的层次关系，则应该选用 `th:insert` 方法来进行操作。 ```html <nav th:insert="/fragments/navigation :: nav-menu"></nav> ``` 这段声明会在 `<nav>` 元素内部追加由 `/fragments/navigation` 文件里 id 为 `nav-menu` 的 section 所代表的一组链接列表。 - **仅复制子节点** 对于只需要获取源文档某一部分下的直接后代元素的情况来说，可以选择应用 `th:include` 方式完成任务；不过需要注意的是自版本 3.0 起官方已经不再建议继续沿用这种方式了。 ```html <footer th:include="/fragments/footer :: footer-content"></footer> ``` 该指令会将来自 `/fragments/footer.html` 文档中具有 `footer-content` ID 值的对象里的所有直系孩子对象克隆至当前位置之下。 #### 实际案例展示 下面给出一段完整的例子说明如何在一个主页面中组合多个不同的 fragments 片段形成最终呈现给用户的完整界面效果： ##### 主页 (index.html) ```html <!DOCTYPE html> <html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"> <head> <!-- ... --> </head> <body> <header th:replace="~{common/fragments :: site-header}"></header> <main role="main"> <section class="hero-unit"> <h1>首页英雄单元格</h1> <p>这是主页的主要内容...</p> </section> <article> <h2>文章标题</h2> <p>正文...</p> </article> </main> <aside th:replace="~{common/fragments :: sidebar}"> <!-- 默认侧边栏占位符 --> </aside> <footer th:replace="~{common/fragments :: page-footer}"> <!-- 页面底部版权信息等 --> </footer> </body> </html> ``` 在这个实例里面，分别调用了位于 common 目录下 fragments 文件夹里面的三个不同功能区——头部 (`site-header`)、侧面 (`sidebar`) 和脚部 (`page-footer`) ——共同构成了整个 index.htm l的整体架构。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值