理解在页面中使用switch 与case的搭配使用：（说明：当需要跳转到三个不同的页面但是是页面内容大致一样的时候，我们需要将相同的部分需要展现的展现出来，不需要展现的就跳过，只需要选择跳转就可以了）
<div class="form-group" th:switch="${sydjBirthReg.childrenOrder}">
<div class="col-sm-12">
<div class="row" th:case="1">
<label class="col-sm-1 control-label" ></label>
</div>
<div class="row" th:case="2">
<label class="col-sm-1 control-label">第1个子女姓名:</label>
<div class="col-md-2">
<input name="name" th:field="*{SydjBirthRegChildren.name}"
class="form-control" type="text">
</div>
<label class="col-sm-1 control-label">出生日期:</label>
<div class="col-md-2">
<div class="input-group date">
<input name="SydjBirthRegChildren.birth"
th:value="${#dates.format(SydjBirthRegChildren.birth,'yyyy-MM-dd')}"
class="form-control" type="text">
</div>
</div>
<label class="col-sm-1 control-label">性别:</label>
<div class="col-md-2">
<select class="form-control noselect2 selectpicker"
name="status"
th:with="type=${@dict.getType('sys_user_sex')}">
<option value="请选择">请选择</option>
<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
th:value="${dict.dictValue}">
</option>
</select>
</div>
</div>
<div class="row" th:case="3">
<label class="col-sm-1 control-label">第2个子女姓名:</label>
<div class="col-md-2">
<input name="name" th:field="*{SydjBirthRegChildren.name}"
class="form-control" type="text">
</div>
<label class="col-sm-1 control-label">出生日期:</label>
<div class="input-group date">
<input name="SydjBirthRegChildren.birth"
th:value="${#dates.format(SydjBirthRegChildren.birth,'yyyy-MM-dd')}"
class="form-control" type="text">
</div>
<label class="col-sm-1 control-label">性别:</label>
<div class="col-md-2">
<select class="form-control noselect2 selectpicker"
name="status"
th:with="type=${@dict.getType('sys_user_sex')}">
<option value="请选择">请选择</option>
<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
th:value="${dict.dictValue}">
</option>
</select>
</div>
</div>
</div>
</div>当我们需要实现这样一个卡片列表的时候只需要实现下列代码就可以了
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#tab-1" id="tab1" aria-expanded="true"> 个人信息</a>
</li>
<li class="">
<a data-toggle="tab" href="#tab-2" id="tab2" aria-expanded="false"> 上传材料</a>
</li>
</ul>关于实现数据从数据库中查询然后回显在表单中的操作；（只要实现mvc的三层）主要代码如下：
controller层
@Controller
@RequestMapping("/sydj/registerQuery")
public class RegisterQueryController extends BaseController
{
private String prefix = "sydj/registerQuery";
/**
* 跳转现场登记查询
* @return
*/
@RequiresPermissions("sydj:registerQuery:view")
@GetMapping("/localRegister")
public String oneChildren()
{
return prefix + "/local_register";
}
跳转到的页面显示主要内容：（其中有关于动态数据的获取，例如女方姓名，男方姓名等）
<th:block th:include="include :: footer" />
<script th:inline="javascript">
var editFlag = [[${@permission.hasPermi('jlfz:children:edit')}]];
var showFlag = [[${@permission.hasPermi('dctf:reg:show')}]];
var removeFlag = [[${@permission.hasPermi('jlfz:children:remove')}]];
var childrenOrderDatas = [[${@dict.getType('sydj_use_declare')}]];
var prefix = ctx + "sydj/reg";
$(function() {
var options = {
url: prefix + "/list",
createUrl: prefix + "/add",
updateUrl: prefix + "/edit/{id}",
removeUrl: prefix + "/remove",
exportUrl: prefix + "/show/{id}",
exportUrl: prefix + "/export",
modalName: "现场登记",
columns: [{
checkbox: true
},
{
field: 'id',
title: '主键id',
visible: false
},
{
field: 'sydjBirthRegWoman.name',
title: '女方姓名'
},
{
field: 'sydjBirthRegWoman.idcard',
title: '女方身份证号',
},
{
field: 'sydjBirthRegMan.name',
title: '男方姓名',
},
{
field: 'sydjBirthRegMan.idcard',
title: '男方身份证号',
},
{
field: 'childrenOrder',
title: '申报类型',
formatter: function(value, row, index) {
return $.table.selectDictLabel(childrenOrderDatas, value);
}
},
{
field: 'insertdate',
title: '申报日期',
},
{
field: 'sydjBirthSyfwd.birthNumber',
title: '生育服务证号',
},
{
title: '操作',
align: 'center',
formatter: function(value, row, index) {
var actions = [];
actions.push('<a class="btn btn-primary btn-xs ' + showFlag + '" href="javascript:void(0)" onclick="$.modal.openTab(\'查看\',ctx+\'sydj/reg/show/' + row.id + '\')"><i class="fa fa-search"></i>查看</a> ');
actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editFull(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>注销</a>');
return actions.join('');
}
}
]
};
关于获取到的内容的操作处理模块：
其中第一个actions.push()中查看页面信息， οnclick="$.modal.openTab（）为选卡页方式打开其中我们可以加属性disabled为其是我们只有仅读的权限
第二个actions.push()中编辑信息，都是根据数据查询id来进行记录的， οnclick="$.operate.editFull()编辑选项，其中将editFull写成edit()的话就不会跳转全窗
第三个actions.push()直接为注销功能，为若依框架封装好的，直接调用即可。
formatter: function(value, row, index) {
var actions = [];
actions.push('<a class="btn btn-primary btn-xs ' + showFlag + '" href="javascript:void(0)" onclick="$.modal.openTab(\'查看\',ctx+\'sydj/reg/show/' + row.id + '\')"><i class="fa fa-search"></i>查看</a> ');
actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editFull(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>注销</a>');
return actions.join('');
}
}
]
};
关于跳转到查看页面和编辑页面的说明：
<!DOCTYPE html>
<html lang="zh" xmlns:th="https://www.thymeleaf.org" xmlns:shiro="www.thymeleaf.org/thymeleaf-extras-shiro">
<head>
<th:block th:include="include :: header('选项卡 & 面板')"/>
<th:block th:include="include :: header('基本表单')"/>
<th:block th:include="include :: header('功能扩展')"/>
<th:block th:include="include :: jasny-bootstrap-css"/>
<th:block th:include="include :: header('日期和时间')" />
<th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeIn">
<div class="row" >
<div class="col-sm-12">
<div class="ibox-title" th:switch="${sydjBirthReg.childrenOrder} ">
<h5 th:case="1">一孩历史录入修改</h5>
<h5 th:case="2">二孩历史录入修改</h5>
<h5 th:case="3">三孩历史录入修改</h5>
</div>
<div class="ibox-content">
<form class="form-horizontal m" id="form-woman-edit" th:object="${sydjBirthReg}">
<input name="id" th:field="*{id}" type="hidden">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-success">
<div class="panel-heading">
女方信息
</div>
<div class="panel-body">
<!-- 标签开始 -->
<div class="form-group">
<div class="col-sm-12">
<div class="row">
<label class="col-sm-1 control-label">姓名</label>
<div class="col-md-2">
<input type="text" disabled class="form-control"
th:value="*{SydjBirthRegWoman.name}">
</div>
<label class="col-sm-1 control-label">联系电话：</label>
<div class="col-md-2">
<input name="tel" disabled th:field="*{SydjBirthRegWoman.tel}"
class="form-control" type="text">
</div>
<label class="col-sm-1 control-label">证件类型：</label>
<div class="col-md-2">
<select name="paperwork" class="form-control m-b" enable="false"
th:with="type=${@dict.getType('sydj_use_certificate')}" disabled>
<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
th:value="${dict.dictValue}"
th:field="*{SydjBirthRegWoman.paperwork}"></option>
</select>
</div>
<!-- <div class="col-md-2">
<select class="form-control noselect2 selectpicker">
<option value="身份证">身份证</option>
<option value="军人证">军人证</option>
</select>
</div>-->
<label class="col-sm-1 control-label">身份证号：</label>
<div class="col-md-2">
<input name="idcard" disabled enable="false" th:field="*{SydjBirthRegWoman.idcard}"
class="form-control" type="text">
</div>
</div>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-12">
<div class="row">
<label class="col-sm-1 control-label">出生日期：</label>
<div class="col-md-2">
<div class="input-group date">
<input name="birthRegMan.birth" disabled
th:value="${#dates.format(sydjBirthReg.SydjBirthRegWoman.birth,'yyyy-MM-dd')}"
class="form-control" type="text">
</div>
</div>
<label class="col-sm-1 control-label">民族：</label>
<div class="col-md-2">
<select name="rate" class="form-control m-b"
th:with="type=${@dict.getType('sydj_use_nation')}" disabled>
<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
th:value="${dict.dictValue}"
th:field="*{SydjBirthRegWoman.rate}"></option>
</select>
</div>
<label class="col-sm-1 control-label">工作单位：</label>
<div class="col-md-2">
<input name="employer" disabled th:field="*{SydjBirthRegWoman.employer}"
class="form-control" type="text">
</div>
<label class="col-sm-1 control-label">单位电话：</label>
<div class="col-md-2">
<input name="workTel" disabled th:field="*{SydjBirthRegWoman.workTel}"
class="form-control" type="text">
</div>
</div>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-12">
<div class="row">
<label class="col-sm-1 control-label">现居住地：</label>
<div class="col-md-5">
<textarea name="residence" disabled class="form-control">[[*{SydjBirthRegWoman.residence}]]</textarea>
</div>
<label class="col-sm-1 control-label">居住地详情：</label>
<div class="col-md-5">
<textarea name="residenceDetail" disabled class="form-control">[[*{SydjBirthRegWoman.residenceDetail}]]</textarea>
</div>
</div>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-12">
<div class="row">
<label class="col-sm-1 control-label">户籍地：</label>
<div class="col-md-5">
<textarea name="census" disabled class="form-control">[[*{SydjBirthRegWoman.census}]]</textarea>
</div>
<label class="col-sm-1 control-label">户籍地详情：</label>
<div class="col-md-5">
<textarea name="censusDetail" disabled class="form-control">[[*{SydjBirthRegWoman.censusDetail}]]</textarea>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="row">
<label class="col-sm-1 control-label">当前孕育情况：</label>
<div class="col-md-2">
<select name="gravidity" disabled class="form-control m-b"
th:with="type=${@dict.getType('sydj_use_currentBreed')}">
<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
th:value="${dict.dictValue}"
th:field="*{SydjBirthRegWoman.gravidity}"></option>
</select>
</div>
<label class="col-sm-1 control-label">末次月经日期：</label>
<div class="col-md-2">
<div class="input-group date">
<input name="birth" disabled id="laydate-demo-1"
th:value="${#dates.format(lastMenstruation, 'yyyy-MM-dd')}"
class="form-control" placeholder="yyyy-MM-dd"
type="text">
<span class="input-group-addon"><i
class="fa fa-calendar"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-success">
<div class="panel-heading">
男方信息
</div>
<div class="panel-body">
<!-- 标签开始 -->
<div class="form-group">
<div class="col-sm-12">
<div class="row">
<label class="col-sm-1 control-label">姓名：</label>
<div class="col-md-2">
<input name="name" disabled th:field="*{SydjBirthRegMan.name}"
class="form-control" type="text">
</div>
<label class="col-sm-1 control-label">联系电话：</label>
<div class="col-md-2">
<input name="tel" disabled th:field="*{SydjBirthRegMan.tel}"
class="form-control" type="text">
</div>
<label class="col-sm-1 control-label">证件类型：</label>
<div class="col-md-2">
<select name="paperwork" disabled class="form-control m-b"
th:with="type=${@dict.getType('sydj_use_certificate')}">
<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
th:value="${dict.dictValue}"
th:field="*{SydjBirthRegMan.paperwork}"></option>
</select>
</div>
<!-- <div class="col-md-2">
<select class="form-control noselect2 selectpicker">
<option value="身份证">身份证</option>
<option value="军人证">军人证</option>
</select>
</div>-->
<label class="col-sm-1 control-label">身份证号：</label>
<div class="col-md-2">
<input name="idcard" disabled th:field="*{SydjBirthRegMan.idcard}"
class="form-control" type="text">
</div>
</div>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-12">
<div class="row">
<label class="col-sm-1 control-label">出生日期：</label>
<div class="col-md-2">
<div class="input-group date">
<input name="birthRegMan.birth" disabled
th:value="${#dates.format(sydjBirthReg.SydjBirthRegMan.birth,'yyyy-MM-dd')}"
class="form-control" type="text">
</div>
</div>
<label class="col-sm-1 control-label">民族：</label>
<div class="col-md-2">
<select name="rate" disabled class="form-control m-b"
th:with="type=${@dict.getType('sydj_use_nation')}">
<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
th:value="${dict.dictValue}"
th:field="*{SydjBirthRegMan.rate}"></option>
</select>
</div>
<label class="col-sm-1 control-label">工作单位：</label>
<div class="col-md-2">
<input name="employer" disabled th:field="*{SydjBirthRegMan.employer}"
class="form-control" type="text">
</div>
<label class="col-sm-1 control-label">单位电话：</label>
<div class="col-md-2">
<input name="workTel" disabled th:field="*{SydjBirthRegMan.workTel}"
class="form-control" type="text">
</div>
</div>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-12">
<div class="row">
<label class="col-sm-1 control-label">现居住地：</label>
<div class="col-md-5">
<textarea name="residence" disabled class="form-control">[[*{SydjBirthRegMan.residence}]]</textarea>
</div>
<label class="col-sm-1 control-label">居住地详情：</label>
<div class="col-md-5">
<textarea name="residenceDetail" disabled class="form-control">[[*{SydjBirthRegMan.residenceDetail}]]</textarea>
</div>
</div>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-12">
<div class="row">
<label class="col-sm-1 control-label">户籍地：</label>
<div class="col-md-5">
<textarea name="census" disabled class="form-control">[[*{SydjBirthRegMan.census}]]</textarea>
</div>
<label class="col-sm-1 control-label">户籍地详情：</label>
<div class="col-md-5">
<textarea name="censusDetail" disabled class="form-control">[[*{SydjBirthRegMan.censusDetail}]]</textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-success">
<div class="panel-body">
<div class="form-group">
<div class="col-sm-12">
<div class="row">
<label class="col-sm-1 control-label">婚姻状态:</label>
<div class="col-md-2">
<select name="marriage" disabled class="form-control m-b"
th:with="type=${@dict.getType('sydj_use_marry')}">
<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
th:value="${dict.dictValue}"
th:field="*{marriage}"></option>
</select>
</div>
<label class="col-sm-1 control-label">结婚登记时间:</label>
<div class="col-md-2">
<div class="input-group date">
<input name="marriageDate" disabled id="laydate-demo-2"
th:value="${#dates.format(marriageDate, 'yyyy-MM-dd')}"
class="form-control" placeholder="yyyy-MM-dd"
type="text">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label class="col-sm-1 control-label">生育登记时间:</label>
<div class="col-md-2">
<div class="input-group date">
<input name="checkDate" disabled id="laydate-demo-3"
th:value="${#dates.format(checkDate, 'yyyy-MM-dd')}"
class="form-control" placeholder="yyyy-MM-dd"
type="text">
<span class="input-group-addon"><i
class="fa fa-calendar"></i></span>
</div>
</div>
<label class="col-sm-1 control-label">生育服务证号:</label>
<div class="col-md-2">
<input name="birthNumber" disabled
th:field="*{CheckResult.birthNumber}"
class="form-control" type="text">
</div>
<label class="col-sm-1 control-label">备注:</label>
<div class="col-md-2">
<input type="text" disabled placeholder="" class="form-control">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-success">
<div class="panel-heading">
子女信息
</div>
<div class="panel-body">
<!-- 标签开始 -->
<div class="form-group" th:switch="${sydjBirthReg.childrenOrder}">
<div class="col-sm-12">
<div class="row" th:case="1">
<label class="col-sm-1 control-label" ></label>
</div>
<div class="row" th:case="2">
<label class="col-sm-1 control-label">第1个子女姓名:</label>
<div class="col-md-2">
<input name="name" disabled th:field="*{SydjBirthRegChildren.name}"
class="form-control" type="text">
</div>
<label class="col-sm-1 control-label">出生日期:</label>
<div class="col-md-2">
<input type="text" disabled placeholder="" class="form-control">
</div>
<label class="col-sm-1 control-label">性别:</label>
<div class="col-md-2">
<select class="form-control noselect2 selectpicker"
name="status" disabled
th:with="type=${@dict.getType('sys_user_sex')}">
<option value="请选择">请选择</option>
<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
th:value="${dict.dictValue}">
</option>
</select>
</div>
</div>
<div class="row" th:case="3">
<label class="col-sm-1 control-label">第2个子女姓名:</label>
<div class="col-md-2">
<input name="name" disabled th:field="*{SydjBirthRegChildren.name}"
class="form-control" type="text">
</div>
<label class="col-sm-1 control-label">出生日期:</label>
<div class="col-md-2">
<input type="text" disabled placeholder="" class="form-control">
</div>
<label class="col-sm-1 control-label">性别:</label>
<div class="col-md-2">
<select class="form-control noselect2 selectpicker"
name="status" disabled
th:with="type=${@dict.getType('sys_user_sex')}">
<option value="请选择">请选择</option>
<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
th:value="${dict.dictValue}">
</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script type="text/javascript">
$(function() {
<!-- laydate示例 -->
layui.use('laydate', function () {
var laydate = layui.laydate;
laydate.render({
elem: '#laydate-demo-1'
});
laydate.render({
elem: '#laydate-demo-2',
type: 'date'
});
laydate.render({
elem: '#laydate-demo-3',
type: 'datetime',
trigger: 'click'
});
laydate.render({
elem: '#laydate-demo-4',
range: true
});
});
});
var prefix = ctx + "birth_reg/reg"
$("#form-people-add").validate({
focusCleanup: true
});
function submitHandler() {
if ($.validate.form()) {
$.operate.save(prefix + "/add", $('#form-people-add').serialize());
}
}
</script>
</body>
</html>当需要跳转到三个页面而他们有大部分相同之处的时候我们就要将他们改为跳转到同一个页面只是将相同的提取出来，需要哪个页面的内容时显示那部分就可以了
还是用到了switch case的判读
<div class="ibox-title" th:switch="${sydjBirthReg.childrenOrder} ">
<h5 th:case="1">一孩历史录入修改</h5>
<h5 th:case="2">二孩历史录入修改</h5>
<h5 th:case="3">三孩历史录入修改</h5>
</div>
<!-- 标签开始 -->
<div class="form-group" th:switch="${sydjBirthReg.childrenOrder}">
<div class="col-sm-12">
<div class="row" th:case="1">
<label class="col-sm-1 control-label" ></label>
</div>
<div class="row" th:case="2">
<label class="col-sm-1 control-label">第1个子女姓名:</label>
<div class="col-md-2">
<input name="name" disabled th:field="*{SydjBirthRegChildren.name}"
class="form-control" type="text">
</div>以这种形式将以*{ }数据展现：
<input name="idcard" disabled th:field="*{SydjBirthRegMan.idcard}"
class="form-control" type="text">
扫一扫
125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
