ES6模板字符串
模板字符串以·开头,比以前字符串拼接要方便
以前写
"He is <b>"+person.name+"</b>"+"and we wish to know his"+person.age+".That is all"
用模板写
`He is <b>${person.name}</b>and we wish to know his${person.age}.that is all`
通过${}来取值,代替之前的拼接
与EL表达式$ 符号冲突
`<tr><td>${name}</td></tr>`
在模板字符串里,这样用$
取值会出问题,需要用\${}
th:each在模板字符串里不生效
在正常的页面中,使用th:each
<div class="layui-input-block">
<select name="orgRank" id="orgRank" required lay-verify="required">
<option value="">选择...</option>
<th:block th:each="s:${labels}">
<option th:value="${s.codeValue}" th:text="${s.codeName}"></option>
</th:block>
</select>
</div>
controller传值
model.addAttribute("labels",codeService.findCodesByCodeGroupName("hosp_label"));
传的是一个List对象数组
List<ComCodeEntity>
这样前台页面可以通过th:each解析
但是如果这个th:each放在模板字符串里,就会取不到值,我尝试了很多办法,包括上边提到的\$
都没有成功,最后只能通过js赋值,如果有哪个大佬有好的解决方法,麻烦告知一下
对应的模板字符串
let html = ` <fieldset id="dynamic-line-${idRecord}" class="layui-elem-field" id="cancelInfoDiv1" >
<legend>癌症信息${idRecord}</legend>
<div class="layui-form-item" style="margin-left: 1rem;">
<div id="checkICDO3${idRecord}" style="display: none;">
<div class="layui-form-item">
<div class="layui-inline upDown">
<label class="layui-form-label">解剖学编码:</label>
<div class="layui-input-block">
<select name="planingCoding${idRecord}" id="planingCoding${idRecord}" lay-verType="tips" lay-verify="otherReq" lay-search>
</select>
</div>
</div>
<div class="layui-inline upDown">
<label class="layui-form-label">形态学编码:</label>
<div class="layui-input-block">
<select name="morphologicalCoding${idRecord}" id="morphologicalCoding${idRecord}" lay-verType="tips" lay-verify="otherReq" lay-search>
</select>
</div>
</div>
<div class="layui-inline upDown">
<label class="layui-form-label">行为学编码:</label>
<div class="layui-input-block">
<select name="behavioralCoding${idRecord}" id="behavioralCoding${idRecord}" lay-verType="tips" lay-verify="otherReq" lay-search>
</select>
</div>
</div>
<div class="layui-inline upDown">
<label class="layui-form-label">分级:</label>
<div class="layui-input-block">
<select name="cd03${idRecord}" id="cd03${idRecord}" lay-verType="tips" lay-verify="otherReq" lay-search>
</select>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-row" style="text-align: center;">
<a id=${idRecord} class="layui-btn relation">删除</a>
</div>
</div>
</fieldset>`;
$('#dynamic-table').append(html);
给解剖学编码,形态学编码等几个select 进行动态赋值,从后台获取数据
<input id="jpxbm" name="jpxbm" type="hidden" th:value="${jpxbm}">
<input id="xtxbm" name="xtxbm" type="hidden" th:value="${xtxbm}">
<input id="xwxbm" name="xwxbm" type="hidden" th:value="${xwxbm}">
<input id="fjbm" name="fjbm" type="hidden" th:value="${fjbm}">
<input id="icd10bm" name="icd10bm" type="hidden" th:value="${icd10bm}">
assembleRadioViews($("#jpxbm"), $("#planingCoding" + idRecord))
assembleRadioViews($("#xtxbm"), $("#morphologicalCoding" + idRecord))
assembleRadioViews($("#xwxbm"), $("#behavioralCoding" + idRecord))
assembleRadioViews($("#fjbm"), $("#cd03" + idRecord))
assembleRadioViews($("#icd10bm"), $("#icd10" + idRecord))
function assembleRadioViews(jsonView,radioView){
var labelValue=JSON.parse(jsonView.val())
//给select赋值
for(let i=0;i<labelValue.length;i++){
console.log(labelValue[i])
var value=labelValue[i].codeValue
var name=labelValue[i].codeName
radioView.append(`<option value='${value}'>${name}</option>`);
}
}
controller传数据要处理一下,不能传递对象List了,因为不用th:each,不好解析,需要变成json字符串
@Autowired
private ObjectMapper objectMapper;
model.addAttribute("jpxbm",objectMapper.writeValueAsString(codeService.findCodesByCodeGroupName("jpxbm")));
model.addAttribute("xtxbm",objectMapper.writeValueAsString(codeService.findCodesByCodeGroupName("xtxbm")));
model.addAttribute("xwxbm",objectMapper.writeValueAsString(codeService.findCodesByCodeGroupName("xwxbm")));
model.addAttribute("fjbm",objectMapper.writeValueAsString(codeService.findCodesByCodeGroupName("fjbm")));
model.addAttribute("icd10bm",objectMapper.writeValueAsString(codeService.findCodesByCodeGroupName("icdbm")));
select取值和赋值
$(’#planingCoding’ + i).val(),//取值
$("#planingCoding" + idRecord).val(d.planingCoding);//赋值