您的位置:首页 > 产品设计 > UI/UE

layui监听select下拉框获取数据通过doT.js加载页面多选框

2018-01-05 10:37 1021 查看
form表单中的下拉框

<select  class="layui-input" name="base_id" datatype="*" lay-filter="base_id">
<option value="">请选择</option>
<#list baseList as base>
<option value="${base.id!''}" disabled="disabled" >${base.base_name!''}</option>
<#list base.base_list as ba>
<option value="${ba.id!''}">    ${ba.base_name!''}</option>
</#list>
</#list>
</select>


>

layui通过lay-filter=”base_id”检测选中事件

layui.use(['form','util'], function(){
var form = layui.form;

/*监听select框*/
form.on('select(base_id)', function(data){
var base_id = data.value;
//remove掉原来的html
$('#reSpec').remove();
if(base_id==""){
parent.layer.alert("请选择联系人");
}else{
selectspec(base_id);
}
});

/*数据新增方法增加checkbox*/
function selectspec(base_id) {
$.ajax({
type : "post",
url : "${ctx}/origin/goods/select_spec",
data : {base_id,base_id}, // 你的formid
error : function(request) {
parent.layer.alert("网络超时");
},
success : function(data) {
if (data.length != 0) {
var evaluation = doT.template($('#adTemp').html());//组装数据
$("#spec").append(evaluation(data));//添加到id="spec"中
form.render();//重新渲染,应为动态加载所以需要重新渲染
}
}
});
};
});


在页面html中添加上述方法查到的数据(下面的是页面html)

>
<div id="spec" >
<div class="layui-form-item" id="reSpec">
<label class="layui-form-label">请选择规格:</label>
<div class="layui-input-block" >
<#list spec as sp>
<input type="checkbox" name="spec"  lay-skin="primary" <#if goods.spec?contains("${sp}")> checked="checked" </#if> title="${sp}" value="${sp}">
</#list>
</div>
</div>
</div>
<script id="adTemp" type="text/x-dot-template">
<div class="layui-form-item" id="reSpec">
<label class="layui-form-label">请选择规格:</label>
<div class="layui-input-block" >
{{~it:val:index}}
<input type="checkbox" name="spec" lay-skin="primary"  title="{{=val}}" value="{{=val}}"/>
{{~}}
</div>
</div>


**上述html代码中id为spec的div为页面加载时匹配目前选中的多选框,当触发下base_id属性对应的属性框时会调用查询方法先清除原来数据,在加载新查找的数据。根据id为adTemp的script调用doT.js方法加载新查询的数组,当查询到的数据为对象时取值换做{{==val.name}}判断为空时显示空字符串格式:{{==val.name?val.name:""}}**
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  layui doT-js
相关文章推荐