layui 数据表格内置 下拉框

工作需求,需要在 layui 的每一条数据中增加一个下拉框,提供用户选择;其中遇到几个问题,特此记录

//监听下拉框操作
            form.on('select(selectDemo)', function (obj) {
                //数据表格对应字段赋值
                table.cache['selectDemo-table'][obj.elem.getAttribute('dataId')]["partCd"] = obj.value;
            });

            function tableDemo(datas){
                table.render({
                    elem: '#selectDemo-table',
                    id: 'selectDemo-table',
                    title: '数据表',
                    cols: [[
                        {field: 'id', title: '编号'},
                        {
                            field: 'partCd', title: '部位', templet: function (d) {
                                //dataId:是为了知道点击的下拉框在第几行;data-state:为了后面解决遮挡
                                var select = "";
                                return select;
                            }, minWidth: 115
                        },
                    ]],
                    limit: datas.length,//当不分页时,重新渲染需要加上数据长度,不然显示的数据条数还是第一次默认加载的10条
                    data: datas,
                    done: function (res, curr, count) {
                        if (res.data.length !== 0) {
                            //解决下拉框被表格遮挡;
                            var tableElem = this.elem.next('.layui-table-view');
                            //数据表格字段设置了fixed 属性导致下拉框被遮挡,没有设置可以注释
                            $("[lay-id='rm-bs-procPlan-scheme-table'] .layui-table-box").find(".layui-table-fixed").children('.layui-table-body').css('overflow', 'visible');
                            //这两条解决数据表格高度不足,下拉框导致表格出现滚动条,前提是你没有设置fixed
                            // $("[lay-id='bs-store-add-prodMaterial-main-table'] .layui-table-box").css('overflow', 'visible');
                            // $("[lay-id='bs-store-add-prodMaterial-main-table'] .layui-table-box").find('.layui-table-body').css('overflow', 'visible');
                    
                            //下拉框被遮挡解决
                            layui.each(tableElem.find('select[name="partCd"]'), function (index, item) {
                                var elem = $(item);
                                //特定下拉框遮挡解决
                                elem.val(elem.data('state')).parents('div .layui-table-cell').css('overflow', 'visible');
                            });
                            form.render();//刷新表单
                        }
                    }
                });
            }

你可能感兴趣的:(layui,数据表格,下拉框,遮挡解决,javascript,html5)