数据表格里面如何加入select

提问 已结
20 377
superyin
superyin VIP3 2018-7-12
悬赏:20飞吻


加入select,下拉列表显示不出来,求解,谢谢。
如果 加入 lay-ignore 属性,可以显示出来,但是又不能触发select事件。
回帖
  • 秋谷
    2018-7-12
    @superyin 加上这个css样式
    .layui-form-select dl {
    position: fixed;
    top: initial;
    left: initial;
    min-width: 220px;
    }
    但是这个还是有点问题,下拉框的大小不是自适应的

    之前我也遇到过这个问题,就是用的fixed定位来解决遮挡,虽然其实我也不清楚其中的原理[失望]
    0 回复
  • 秋谷
    2018-7-13

    .layui-input.layui-unselect {
    border: 0;
    height: 100%;
    }
    .layui-select-title,
    .layui-form-select {
    height: 100%;
    }
    .layui-table-cell {
    overflow: initial;
    }
    这样算是比较完美的解决了这个问题,选择框下拉都是自适应的,移动端也是可以的[哈哈]
    2 回复
  • 秋谷
    2018-7-12
    table 需要包裹在form表单元素中,并且 form表单元素需要加上layui-form的类,你看看加了没有
    0 回复
  • @秋谷 都加了。
    0 回复
  • 秋谷
    2018-7-12
    @superyin 最好贴出这部分的js代码,不然不好猜测
    0 回复
  • @秋谷
    直接根据【数据表格】-》【加入表单元素】改造
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="static/vendor/layui/css/layui.css">


    <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
    </head>



    <body>

    <table class="layui-hide" id="test"></table>

    <script type="text/html" id="switchTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" {{ d.id == 10003 ? 'checked' : '' }}>
    </script>

    <script type="text/html" id="checkboxTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="lockDemo" {{ d.id == 10006 ? 'checked' : '' }}>
    </script>


    <script type="text/html" id="selectCityTpl">
    <!-- 这里的 Selected 的状态只是演示 -->
    <select name="city" lay-filter="selectDemo" >
    <option value="" ></option>
    <option value="0" >北京</option>
    <option value="1" selected>上海</option>
    <option value="2" >广州</option>
    <option value="3" >深圳</option>
    <option value="4" >杭州</option>
    </select>
    </script>



    <script src="static/vendor/layui/layui.js"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->

    <script>
    layui.use('table', function(){
    var table = layui.table
    ,form = layui.form;

    table.render({
    elem: '#test'
    ,url:'static/js/test.js'
    ,cellMinWidth: 80
    ,cols: [[
    {type:'numbers'}
    ,{type: 'checkbox'}
    ,{field:'id', title:'ID', width:100, unresize: true, sort: true}
    ,{field:'username', title:'用户名', templet: '#usernameTpl'}
    ,{field:'city', title:'城市', templet: '#selectCityTpl'}
    ,{field:'wealth', title: '财富', minWidth:120, sort: true}
    ,{field:'sex', title:'性别', width:85, templet: '#switchTpl', unresize: true}
    ,{field:'lock', title:'是否锁定', width:110, templet: '#checkboxTpl', unresize: true}
    ]]
    ,page: true
    });

    //监听性别操作
    form.on('switch(sexDemo)', function(obj){
    layer.tips(this.value + ' ' + this.name + ':'+ obj.elem.checked, obj.othis);
    });

    //监听锁定操作
    form.on('checkbox(lockDemo)', function(obj){
    layer.tips(this.value + ' ' + this.name + ':'+ obj.elem.checked, obj.othis);
    });
    });
    </script>

    </body>
    </html>





    0 回复
  • form 模块都没加载进来[汗]
    0 回复
  • @夕阳刻痕 加了也是一样的。
    0 回复
  • layui.use(['form','table'], function(){
    var form = layui.form,
    table= layui.table;
    })
    0 回复
  • @夕阳刻痕 加了,select的下拉菜单还是显示不了,应该被什么遮挡了。
    0 回复
  • <form class="layui-form">
    <table class="layui-hide" id="test"></table>
    </form>
    0 回复
  • @夕阳刻痕 还是不行,应该是下拉菜单被遮挡的原因。
    0 回复
  • table.render({}); 之后加上form.render();表单元素才能显示出来

    0 回复
  • @superyin
    td 下的类名 layui-table-cell laytable-cell-1-9 去除css overflow:hidden 就能实现了
    0 回复
  • @夕阳刻痕 当有比较多的数据的时候,你的方法可以了,如果只有1条数据的情况下,下拉选项被table遮盖,应该就是这个问题了。
    0 回复
  • 秋谷
    2018-7-12
    好像也可以在表格的回调函数中,根据td的宽度来动态设置下拉框的宽度,也是一个办法
    0 回复
  • .layui-form-select dl {
    position: fixed;
    top: initial;
    left: initial;
    min-width: 220px;
    }

    这个办法解决问题,不过在移动模式下面 不显示。
    0 回复
  • @秋谷 非常感谢,还有一个问题,就是选择后只能修改input的值,并不能修改table的数据值。
    0 回复
  • 秋谷
    2018-7-14
    @superyin 没明白你的意思,table的数据值都是自动生成的,选择框里面的值,需要另外取的
    0 回复
  • 丶Blank
    2018-7-18
    在table.render中加上done事件,然后在回调里面根据数据做select控件填充,自己做宽高处理,最后执行form.render("select")
    0 回复