Thymeleaf--:fragment
<htmlxmlns="http://www.w3.org/1999/xhtml"xmlns:th="http://www.thymeleaf.org"> <body> <divth:fragment="crudmodal"> //主要是这里 <!--modify modal--> <divclass="modal fade"id="crudmodal_modify"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true">
<htmlxmlns="http://www.w3.org/1999/xhtml"xmlns:th="http://www.thymeleaf.org"> <body> <!--crudmodal--> <!--add modal--> <divth:fragment="crudmodal"> <!--modify modal--> <divclass="modal fade"id="crudmodal_modify"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true"> <divstyle="width: 900px;"class="modal-dialog"> <divclass="modal-content"> <divclass="modal-header"> <buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">×</button> <h4id="modaltitle"class="modal-title">送检人员</h4> </div> <divclass="modal-body"> <divclass="panel panel-default"> <formclass="form-horizontal"style="width: 60%;"> <divclass="form-group"> <divclass="col-sm-2 control-label">姓名</div> <divclass="col-sm-10"> <inputid="xingMing"type="text"class="form-control"placeholder="姓名" /> </div> </div> <divclass="form-group"> <divclass="col-sm-2 control-label">性别</div> <divclass="col-sm-10"> <selectclass="col-sm-10 form-control"id="xbSelect"style="float: left;"> <optionvalue="男">男</option> <optionvalue="女">女</option> </select> </div> </div> <divclass="form-group"> <divclass="col-sm-2 control-label">身份证号码</div> <divclass="col-sm-10"> <inputid="shenFenZhengHaoMa"type="text"class="form-control"placeholder="身份证号码" /> </div> </div> <divclass="form-group"> <divclass="col-sm-2 control-label">电话号码</div> <divclass="col-sm-10"> <inputid="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>--> <divclass="form-group"> <divclass="col-sm-2 control-label">区域</div> <divclass="col-sm-10"> <selectclass="form-control"id="quyuSelect"> <optionth: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>--> <divclass="form-group"> <divclass="col-sm-2 control-label">人员状态</div> <divclass="col-sm-10"> <selectclass="form-control"id="ryztSelect"> <optionth:each="ryztadd:${renyuanzhuangtais}"th:value="${ryztadd.renYuanZhuangTaiId}"th:text="${ryztadd.renYuanZhuangTai}"></option> </select> </div> </div> </form> </div> </div> <divclass="modal-footer"> <buttontype="button"class="btn btn-default"data-dismiss="modal">取消</button> <buttontype="button"class="btn btn-primary"data-dismiss="modal"modifyid=""AddorModify=""onclick="addorModifySubmit(this);">是</button> </div> </div> <!--/.modal-content--> </div> <!--/.modal--> </div> <!--delete modal--> <divclass="modal fade"id="crudmodal_delete"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true"> <divclass="modal-dialog"> <divclass="modal-content"> <divclass="modal-header"> <buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">×</button> <h4class="modal-title">作废订单</h4> </div> <divclass="modal-body">是否确定作废该订单吗？</div> <divclass="modal-footer"> <buttontype="button"class="btn btn-default"data-dismiss="modal">否</button> <buttontype="button"class="btn btn-primary"data-dismiss="modal"deleteid="0"onclick="delSubmit(this);">是</button> </div> </div> <!--/.modal-content--> </div> <!--/.modal--> </div> <!--operation result modal--> <divclass="modal fade"id="crudmodal_result"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true"> <divclass="modal-dialog"> <divclass="modal-content"> <divclass="modal-header"> <buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">×</button> <h4class="modal-title">操作结果</h4> </div> <divid="crudmodal_result_operateResult"class="modal-body"> </div> <divclass="modal-footer"> <buttontype="button"class="btn btn-default"data-dismiss="modal"onclick="refresh();">确定</button> </div> </div> <!--/.modal-content--> </div> <!--/.modal--> </div> <!--loading modal--> <divclass="modal fade"id="crudmodal_loading"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"data-backdrop='static'> <divclass="modal-dialog"role="document"> <divclass="modal-content"> <divclass="modal-header"> <h4class="modal-title">提示</h4> </div> <divclass="modal-body">请稍候。。。</div> </div> </div> </div> </div> </body> </html>
完整版
functioninitModifyModal(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是一个前端模板，最近做的项目是通过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: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)">