最近项目中用到关于layui的前端技术,在使用layui 渲染select option下拉复选框时出现了没有值渲染的问题,还有使用layui日期的过程 ,接下来就一起看看吧。
/**
*从后台渲染字段民族数据
/
<div class="layui-inline">
<label class="layui-form-label"><span style="color: red;">*</span>民族</label>
<div class="layui-input-inline">
<select name="nation" id="nation" lay-verify="required" lay-search="">
</select>
</div>
</div>
<input type="hidden" id="mzxz" value="${caseBean.nation}" />//设置一个隐藏的input框
function getNation() {
var temps = $("#mzxz").val();//对应民族input的值
$.ajax({
id: getNation,
type: "post",
url: '<%=basePath%>case/getNationValues.do',
dataType : 'json',
success: function (data) {
if (data != null) {
for(var i=0;i<data.length;i++) {
if(temps==data[i].type) {
$("#nation").append('<option value="' + data[i].type + '" selected>' + data[i].name + '</option>');//此处将后台等到的数据拼接到对应id为nation的复选select标签下,这样得到后台民族字典项的数据
}else {
$("#nation").append('<option value="' + data[i].type +'">' + data[i].name + '</option>');
}
}
}
layui.form.render("select");//layui表单需要再次渲染select标签元素
},
});
}
以上数据渲染完了发现没有出来,后经发现layui规定在渲染select需要再次用
element元素渲染
在使用layui的laydate时需要引入一下文件
<link rel="stylesheet" href="../../js/layui/css/layui.css"/>
<link rel="stylesheet" href="../../laydate/theme/default/laydate.css"/>
<script src="<%=basePath%>/js/layui/layui.js"></script>
<script src="<%=basePath%>/laydate/laydate.js"></script>
$(function () {
layui.use(["jquery", "upload", 'form', 'element', 'laydate', 'layer'], function () {
laydate.render({
elem: '#birthday'//获取日期标签元素
, type: 'date'//日期格式类型(yyyy-MM-dd)
, done: function (value, date, endDate) {
}
});
form.render();//layui表单再次渲染
});