<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布局 - CSDN博客
http://blog.csdn.net/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)"> 

Thymeleaf--:fragment的更多相关文章

  1. Thymeleaf+Spring整合

    前言 这个教程介绍了Thymeleaf与Spring框架的集成,特别是SpringMvc框架. 注意Thymeleaf支持同Spring框架的3.和4.版本的集成,但是这两个版本的支持是封装在thym ...

  2. spring+thymeleaf实现表单验证数据双向绑定

    前言 这个教程介绍了Thymeleaf与Spring框架的集成,特别是SpringMvc框架. 注意Thymeleaf支持同Spring框架的3.和4.版本的集成,但是这两个版本的支持是封装在thym ...

  3. Thymeleaf模板引擎+Spring整合使用方式的介绍

    尊重原创,原文地址为:https://www.cnblogs.com/jiangchao226/p/5937458.html 前言 这个教程介绍了Thymeleaf与Spring框架的集成,特别是Sp ...

  4. spring-security doc logout

    18.5.3 Logging Out Adding CSRF will update the LogoutFilter to only use HTTP POST. This ensures that ...

  5. thymeleaf之fragment

    MUEAS项目,web前端采用thymeleaf作为展示层.这个view解析器,个人觉得非常不错.简单而且性能也比较好!个人觉得比JSP和freemarker之类,简单易用! 今天简单记录一下frag ...

  6. thymeleaf的fragment例子

    fragment介绍 fragment类似于JSP的tag,在html中文件中,可以将多个地方出现的元素块用fragment包起来使用. 定义fragment 新建foot.html文件 <!D ...

  7. spring boot:thymeleaf给fragment传递参数的方法(spring boot 2.3.3)

    一,thymeleaf如何给fragment传递参数? 1,如果是全局的参数,可以用interceptor中传递 非全局参数,可以从controller中传递 2,引用片断时也可以传递参数 说明:刘宏 ...

  8. spring boot:thymeleaf模板中insert/include/replace三种引用fragment方式的区别(spring boot 2.3.3)

    一,thymeleaf模板中insert/include/replace三种引用fragment方式的区别 insert: 把整个fragment(包括fragment的节点tag)插入到当前节点内部 ...

  9. spring boot(四):thymeleaf使用详解

    在上篇文章springboot(二):web综合开发中简单介绍了一下thymeleaf,这篇文章将更加全面详细的介绍thymeleaf的使用.thymeleaf 是新一代的模板引擎,在spring4. ...

  10. Thymeleaf

    1.在html顶部添加 <html xmlns:th="http://www.thymeleaf.org"> 2.url表达式 @{...} <link rel= ...

随机推荐

  1. 【译】4. Java反射——字段

    原文地址:http://tutorials.jenkov.com/java-reflection/fields.html ======================================= ...

  2. JS事件(五)内存与性能

    1.减少代码中事件处理程序的数量,是减少内存开销,提升网页速度的有效手段 事件委托: <ul id="ul"> <li id="goSomewhere& ...

  3. (叉积,线段判交)HDU1086 You can Solve a Geometry Problem too

    You can Solve a Geometry Problem too Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/3 ...

  4. socket编程 ------ UDP服务器

    void vLANcommunication( void *pvParameters ) { int32 listenfd; do{ listenfd = socket(AF_INET, SOCK_D ...

  5. Shiro简介(一)

    1.shiro是一个安全验证框架,可以完成认证.授权.加密.会话管理.与Web集成.缓存等.   Authentication:身份认证/登入 Authorization:权限验证.粗粒度权限指对某一 ...

  6. 如何重置mysql中的root密码

    方法一: 在my.ini的[mysqld]字段加入:skip-grant-tables重启mysql服务,这时的mysql不需要密码即可登录数据库 然后进入mysqlmysql>use mysq ...

  7. 被顶级学术期刊枪毙的p.Value到底是个什么鬼

    总结一下,在我看来,p.Value仅仅是在,假设检验,这理论框架下,对于证据力度的一个测量.而且,我们不大可能推翻假设检验这个框架,似乎也不必要,因为,这个框架非常合理,有广泛的应用场景,有强大的生命 ...

  8. Mysq基础l数据库管理、表管理、增删改数据整理

    一.       数据库管理: 创建数据库: create database(自定义) 查询所有数据库: show databases;(查询所有数据库) show create database ( ...

  9. docker 基础之数据管理

    数据卷 一.将本地默认目录挂载到docker容器内指定的目录 #将本地的目录挂在到docker容器内 docker run -it --name container-test -h CONTAINER ...

  10. nfs环境搭建报错clnt_create: RPC: Program not registered

    有时候搭建完成后,使用showmount -e ip检测服务端服务器情况的是,会出现clnt_create: RPC: Program not registered 这个错误,表示rpc程序为注册成功 ...