layui table动态渲染二级联动select下拉框

记录：layui table动态渲染二级联动select下拉框
HTML代码：

<style>
    #mytable{
        min-width: 750px;
    }
    #mytable tr:hover{
        background-color: #fff
    }
    #mytable td{
        border: hidden;
        text-align: right;
        color: #000;
    }
    .noborder{
        border: none;
        background-color: #fff;
    }
    .setzujin td .layui-input{
        text-align: center;
    }
    /* 这个是让table里的下拉框不被遮挡 */
    .layui-select-title,.layui-select-title input{
        line-height: 28px;
        height: 28px;
    }

    .layui-table-cell {
        overflow: visible !important;
    }

    .layui-table-box {
        overflow: visible;
    }

    .layui-table-body {
        overflow: visible; 
    }
</style>

<!-- 要入库的商品 -->
<div class="layui-form-item">            
    <table class="layui-hide" id="demo" lay-filter="demo"></table>
</div>

JS代码：

<script src="__STATIC__/jquery.min.js?v={$version}" charset="utf-8"></script>

<!-- tables：商品数量input框 -->
<script type="text/html" id="inputNumber">
    {{d.number}}
    <input type="hidden" name="goodsidArr[]" value="{{d.id}}">
</script>
<!-- tables：批次号input框 -->
<script type="text/html" id="inputPici">
    <input type="text" name="piciArr[]" class="layui-input" style="line-height: 28px;height: 28px;" value="{{d.pici}}">
</script>
<!-- tables：入库数量input框 -->
<script type="text/html" id="inputActualNumber">
    <input type="text" name="actualNumberArr[]" class="layui-input" style="line-height: 28px;height: 28px;" value="{{d.actual_number}}">
</script>
<!-- tables：选择库区select框 -->
<script type="text/html" id="selectWareArea">
    <select name="wareAreaArr[]" lay-filter="wareArea"> 
        <option value="">请选择</option>
        {{d.ware_area_option}}
    </select>
</script>

<!-- tables：选择库位select框 -->
<script type="text/html" id="selectWareLocation">
    <select name="wareLocationArr[]" lay-filter="wareLocation">
        {{d.ware_location_option}}
    </select>
</script>

<script>
    //JavaScript代码区域
    layui.use(['element', 'table', 'form'], function () {
        var element = layui.element,
            table = layui.table
            , form = layui.form
            ,laydate = layui.laydate;
        var tables;
        var goodsList = {$goodsList|raw};   //原始数据
        //展示已知数据
        tables = table.render({
            elem: '#demo'
            // , width: 500
            ,toolbar: '#toolbar' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter'] //开启右边按钮
            , cols: [[ //标题栏
                {field: 'id', width: 50, title: 'ID'},
                {field: 'title', minWidth: 120, title: '货物名称'},
                {field: 'code', minWidth: 180, title: '货物编码'},
                // {field: 'barcode', minWidth: 160, title: '货物条码'},
                {field: 'number', title: '计划入库', width: 90, templet: '#inputNumber', align: "center"}, 
                {field: 'actual_number_total', title: '已入库', width: 90}, 
                {field: 'pici', title: '批次号', width: 90, templet: '#inputPici', edit: 'text' , align: "center"}, 
                {field: 'actual_number', title: '入库数量', width: 120, templet: '#inputActualNumber', edit: 'text' , align: "center"}, 
                {field: 'ware_area', title: '库区', width: 140, templet: '#selectWareArea', align: "center"}, 
                {field: 'ware_location', title: '库位', width: 140, templet: '#selectWareLocation', align: "center"},             
                {field: 'cateName', minWidth: 120, title: '货物分类'},
                {field: 'guige', minWidth: 80, title: '规格'},
                {field: 'unitName', minWidth: 100, title: '计量单位'},
                {field: 'weight', minWidth: 90, title: '重量(kg)'},
                
            ]]
            //默认渲染的数据为空
            , data: goodsList
            , done: function (res, curr, count) {
                console.log('table渲染')
            }
            , even: true
        });

        //这是监听可编辑的
        table.on('edit(demo)', function (obj) {
            // data = obj.data //得到所在行所有键值
            // console.log('修改，',obj.tr.data("index"),data);//获取当前行索引
        });

        //这是监听下拉框改变
        form.on('select(wareArea)', function (data) {
            //更新缓存
            var selectElem = $(data.elem);
            var tdElem = selectElem.closest("td");
            var trElem = tdElem.closest("tr");
            var tableView = trElem.closest(".layui-table-view");
            table.cache[tableView.attr("lay-id")][trElem.data("index")][tdElem.data("field")] = data.value;
            layer.load(1);//加载中
            $.ajax({
                url: "getAreaLocationOption",
                type: 'POST',
                async: true,
                data: {areaid:data.value},
                success: function (datas) {
                    var data = JSON.parse(datas);
                    //更新表格数据缓存
                    table.cache[tableView.attr("lay-id")][trElem.data("index")]['ware_area_option'] = data.ware_area_option;
                    table.cache[tableView.attr("lay-id")][trElem.data("index")]['ware_location_option'] = data.ware_location_option;
                    //刷新表格
                    var Data = table.cache[tableView.attr("lay-id")];                    
                    tables.reload({
                        data: Data
                    });
                    layer.closeAll('loading');
                }
            });
        });  
        //这是监听下拉框改变
        form.on('select(wareLocation)', function (data) {
            //更新缓存
            var selectElem = $(data.elem);
            var tdElem = selectElem.closest("td");
            var trElem = tdElem.closest("tr");
            var tableView = trElem.closest(".layui-table-view");
            table.cache[tableView.attr("lay-id")][trElem.data("index")][tdElem.data("field")] = data.value;
            //获取库区
            var areaid = table.cache[tableView.attr("lay-id")][trElem.data("index")]['ware_area'];
            layer.load(1);//加载中
            $.ajax({
                url: "getAreaLocationOption",
                type: 'POST',
                async: true,
                data: {areaid:areaid,locationid:data.value},
                success: function (datas) {
                    var data = JSON.parse(datas);
                    console.log(data);
                    //更新表格数据缓存
                    table.cache[tableView.attr("lay-id")][trElem.data("index")]['ware_location_option'] = data.ware_location_option;
                    //刷新表格
                    var Data = table.cache[tableView.attr("lay-id")];                    
                    tables.reload({
                        data: Data
                    });
                    layer.closeAll('loading');
                }
            });
        });   
    });   
</script>

PHP代码：

	/**
     * @NodeAnotation(title="入库")
     */
    public function rkconfirm($id)
    {
        $row = $this->model->find($id);
        empty($row) && $this->error('数据不存在');
        //确认入库操作的状态：1-待入库，2-入库中，3-部分已入库
        if($row['status'] != 1 && $row['status'] != 2 && $row['status'] != 3){
            $this->error('当前任务状态不能修改');
        }
        if ($this->request->isAjax()) {
            $post = $this->request->post();
            $data = [
                'rkid' =>input('id'),  //入库任务id
                'inbound_people'=>input('inbound_people'),    //入库人
                'goodsidArr' =>input('goodsidArr/a'),    // 要入库的商品信息key
                'piciArr' =>input('piciArr/a'), //批次号
                'actualNumberArr' =>input('actualNumberArr/a'),   //实际入库数量
                'wareAreaArr' =>input('wareAreaArr/a'),   //库区
                'wareLocationArr' =>input('wareLocationArr/a'),   //库位
                'remark' =>input('remark'),
                'create_type'=>0,   //创建类型：0-手动，1-接口
                'create_people'=>$this->adminInfo['id'],    //创建人                
            ];
            $result = $this->logic->rkconfirm($data);
            if($result['status'] !== 'success'){
                $this->error($result['msg']);
            }
            $this->success('保存成功');

        }
        $goodsListArr = json_decode($row['goodsid'],true);
        $goodsList = [];
        foreach($goodsListArr as $key=>$value){
            $item = (new GoodsModel())->withoutField('delete_time')->where(['id'=>$value['id'],'customer_id'=>$row['customer_id'],'status'=>1])->find();
            $item['cateName'] = $item->goodsCate ? $item->goodsCate->name : ''; //分类
            $item['unitName'] = $item->goodsUnit ? $item->goodsUnit->name : ''; //单位
            $item['sale_unit_price'] = floatval($item['sale_unit_price']);
            $item['purchase_unit_price'] = floatval($item['purchase_unit_price']);
            $item['long'] = floatval($item['long']);
            $item['wide'] = floatval($item['wide']);
            $item['high'] = floatval($item['high']);
            $item['weight'] = floatval($item['weight']);
            $item['volume'] = floatval($item['volume']);
            $item['number'] = $value['number'];
            $item['create_time'] = date('Y-m-d H:i:s',$item['create_time']);    
            $item['good_id'] = $item['id'];
            $item['id'] = $key;
            //此商品推荐库区
            $ware_area_id_arr = $item['ware_area_id'] ? explode(',', $item['ware_area_id']) : [];
            $item['ware_area_id'] = $ware_area_id_arr;  //推荐库区数组
            $ware_area_id_first = current($ware_area_id_arr);  //取推荐库区数组中的第一个元素
            $item['ware_area'] = $ware_area_id_first; //默认显示的库区
            $item['ware_area_option'] = (new WareAreaModel())->getSelectOption(false,$ware_area_id_first);
            //推荐库位下拉列表
            $item['ware_location_option'] = '';
            if($ware_area_id_first){
                $item['ware_location_option'] = (new WareLocationModel())->getSelectOption($ware_area_id_first,1,0);
            }
            //实际入库数量
            $item['actual_number_total'] = Db::name('inbound_bills_goods')->where(['rktz_id'=>$row['id'],'goods_key'=>$key])->sum('actual_number');        
            //入库商品状态:0-待入库，1-部分入库，2-入库完成
            $item['rk_status'] = 0; 
            if($item['actual_number_total']){
                $item['rk_status'] = 1;
            }
            if(array_key_exists('rk_status',$value)){
                $item['rk_status'] = $value['rk_status'];
            }
            $item['pici'] = ''; //默认显示的批次号
            $item['actual_number'] = $item['number'] - $item['actual_number_total']; //默认显示的入库数量
            $goodsList[] = $item->toArray();
        }
        $goodsList = json_encode($goodsList);
        $this->assign('row', $row);
        $this->assign('goodsList', $goodsList);
        $adminList = (new SystemAdminModel())->getAdminList();
        $this->assign('adminList', $adminList);
        return $this->fetch();
    }
	

    /**
     * @NodeAnotation(title="获取库区库位下拉框")
     */
    public function getAreaLocationOption()
    {
        if ($this->request->isAjax() && $this->request->isPost()) {
            $areaid = input('areaid');
            $locationid = input('locationid');
            $ware_area_option = (new WareAreaModel())->getSelectOption(false,$areaid);
            $ware_location_option = '';
            if($areaid){
                $ware_location_option = (new WareLocationModel())->getSelectOption($areaid,1,$locationid);
            }
            $data = [
                'code'  => 0,
                'msg'   => '',
                'ware_area_option'  => $ware_area_option,
                'ware_location_option'  => $ware_location_option,
            ];
            return json_encode($data); 
        }
    }

效果如下：