layui动态加载的列表添加和修改

之前有写过一个layui的ajax动态加载列表的功能，但是不太全,这次，重新整理了一下，在加上动态列表的修改展示功能,一起写了下来。

对于一些功能，比如商品添加页面有两个下拉框，先选择一级分类，再选择二级分类，需要二级分类根据选择的一级分类动态加载出来。

三部分代码

html

<div class="layui-form-item">
     <label class="layui-form-label">一级分类</label>
     <div class="layui-input-block">
          <select id="cat_id" lay-search lay-filter="changecate">
               <option value="-1">--请选择--</option>
                {volist name="cates" id="vo"}
                     <option value="{$vo.id}">{$vo.name}</option>
                {/volist}
          </select>
     </div>
</div>
<div class="layui-form-item">
      <label class="layui-form-label">二级分类</label>
      <div class="layui-input-block">
           <select id="two_cat_id" lay-search lay-filter="two-cate">
                 <option value="-1">--请选择--</option>
            </select>
      </div>
</div>

里面的一级分类列表数据，需要提前加载到页面中来，用的{volist}，用{foreach}也可以

js代码

 

//切换一级分类 获取二级分类
    form.on('select(changecate)', function(data){
        //清空品牌
        $('#two_cat_id').html('');
        var id=data.value;
        if(id == -1){
            $('#two_cat_id').html('<option value="-1">--请选择--</option>');
            form.render();//菜单渲染 把内容加载进去
        }else{
            $.ajax({
                url:'/admin/goods/gettwocate',
                data:{
                    id:id,
                },
                dataType:'json',
                type:'post',
                success:function(resp){
                    if (resp.err_code == 0) {
                        var brands = resp.data;
                        var html = '<option value="-1">--请选择--</option>';
                        for(var i = 0;i < brands.length;i++){
                            html += '<option value="'+brands[i].id+'">'+brands[i].name+'</option>';
                            //console.log(brands[i].name)
                        }
                        $('#two_cat_id').append(html);
                        form.render();//菜单渲染 把内容加载进去
                    }
                }
            })
        }
    });

PHP代码

不在详述,就是根据一级分类获取子分类的列表的函数，不同的数据库设计，sql语句会不一样,但都是大同小异。

接下来是比较复杂的地方，这个是添加，修改是比较复杂的地方，一级分类好说，加载过来，然后加个判断。

例如：

但是二级分类就比较复杂，因为之前是ajax加载的，html代码是写在js里面的，所以这次加载，只能是再次用js动态加载，

那么可以用onready事件，页面加载的时候，就去执行

html代码

<div class="layui-form-item">
     <label class="layui-form-label">供应商</label>
     <div class="layui-input-block">
           <select id="supplier_id" lay-search lay-filter="changesupplier">
                 <option value="-1">--请选择--</option>
                 {volist name="suppliers" id="vo"}
                        <option value="{$vo.id}" {if $goods.supplier_id eq $vo.id} selected="selected" {/if} >{$vo.name}</option>
                  {/volist}
            </select>
     </div>
</div>
<div class="layui-form-item">
      <label class="layui-form-label">品牌</label>
      <div class="layui-input-block">
          <select id="brand_id" lay-search>
                <option value="-1">--请选择--</option>
          </select>
      </div>
</div>

//还有一些数据,需要加载进来
<input type="hidden" name="id" id="id" value="{$goods.id}"><!-- 隐藏的商品id -->
<input type="hidden" name="input_cat_id" id="input_cat_id" value="{$goods.cat_id}">
<!-- 隐藏的商品一级分类id -->
<input type="hidden" name="input_two_cat_id" id="input_two_cat_id" value="{$goods.two_cat_id}">
<!-- 隐藏的商品二级分类id -->

基本上变化不大

js代码

<script type="text/javascript">
    $(document).ready(function() { 

        // 加载商品二级分类
        var cat_id = $('#input_cat_id').val();
        var two_cat_id = $('#input_two_cat_id').val();
        $.ajax({
                url:'/admin/goods/gettwocate_edit',
                data:{
                    cat_id:cat_id,
                    two_cat_id:two_cat_id,
                },
                dataType:'json',
                type:'post',
                success:function(resp){
                    if (resp.err_code == 0) {
                        var brands = resp.data;
                        var html = '';
                        for(var i = 0;i < brands.length;i++){
                            if(brands[i].true == 1){
                                html += '<option value="'+brands[i].id+'" selected="selected" >'+brands[i].name+'</option>';
                            }else{
                                html += '<option value="'+brands[i].id+'">'+brands[i].name+'</option>';
                            }
                            
                            //console.log(brands[i].name)
                        }
                        $('#two_cat_id').append(html);
                        form.render();//菜单渲染 把内容加载进去
                    }
                }
            }) 
         
    }); 
</script>

和之前的添加页面的写在js里面的 代码相比，需要加个判断，如果是选中的，需要添加上selected="selected"这个样式。

PHP代码

    /**
     * 切换一级分类 获取二级(修改商品时候加载数据)
     */
    public function getTwoCate_edit()
    {
        $cat_id = input('post.cat_id');
        $two_cat_id = input('post.two_cat_id');
        $cates = $this
            -> where('status','=',0)
            -> where('pid','=',$cat_id)
            -> field('id,name')
            -> select()
            -> toArray();

        //遍历,给该商品所在的二级分类特殊标记
        foreach ($cates as $key => $value) {
            if ($cates[$key]['id'] == $two_cat_id) {
                $cates[$key]['true'] = 1;
            }else{
                $cates[$key]['true'] = 0;
            }
        }
        return $cates;
    }

//如果只是添加页面的时候获取，这个函数，不需要添加下面遍历，只要上面部分即可
另外省略了controller部分的代码，只把model的代码拿过来了

希望会帮到大家，谢谢。