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

╰+攻爆jí腚メ 2021-09-26 10:32 547阅读 0赞

> 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:""}}**