table中如何添加带有layui样式的select

提问 已结
16 229
拒绝者
拒绝者 2018-5-14
悬赏:20飞吻
版本:layui 2.2.5 浏览器:chrome
目前使用templet属性可以添加select控件,但是必须忽略layui的样式,才可进行下拉操作。

现在想加入进layui样式,但是貌似不行,求各路大神指点。(ps:不想通过拼接trtd的方式添加,这样难于维护)
回帖
  • 这么奇怪。我这边是正常的额,用layui的form表单的select。
    https://pan.baidu.com/s/14EYMUTcteSoNJKOvRRBbdQ
    0 回复
  • HoneyBear
    2018-5-14
    [哈哈] 那你就拼个option 然后放在模板引擎里面
    0 回复
  • 拒绝者
    2018-5-14
    我现在是想修改select的样式,跟option好像没有关系吧
    0 回复
  • 你的问题只是表格中select的样式是吧?解决了吗?没有的话可以试试添加下面的样式
    <style>
    .layui-table-view .layui-table[lay-size="sm"] .layui-select-title .layui-input {
    height: 28px;
    margin-top: -8px;
    }
    .layui-table-view .layui-table[lay-size="sm"] .layui-form-select dl dt,.layui-table-view .layui-form-select dl dd {
    line-height: 28px;
    }
    .layui-table-view .layui-table[lay-size="sm"] .layui-form-select dl {
    top: 28px;
    }
    .layui-table-view .layui-table .layui-select-title .layui-input {
    height: 32px;
    margin-top: -3px;
    }
    .layui-table-view .layui-table .layui-form-select dl dt,.layui-table-view .layui-form-select dl dd {
    line-height: 32px;
    }
    .layui-table-view .layui-table .layui-form-select dl {
    top: 32px;
    }
    .layui-table-view .layui-table[lay-size="lg"] .layui-select-title .layui-input {
    height: 38px;
    margin-top: 0;
    }
    .layui-table-view .layui-table[lay-size="lg"] .layui-form-select dl dt,.layui-table-view .layui-form-select dl dd {
    line-height: 38px;
    }
    .layui-table-view .layui-table[lay-size="lg"] .layui-form-select dl {
    top: 38px;
    }
    </style>
    0 回复
  • 拒绝者
    2018-5-15
    @岁月小偷 还是没有解决
    	<div class="layui-form">
    <table class="layui-table" id="ticketlist" lay-filter="ticket">
    </table>
    </div>

    <script type="text/html" id="selectTpl">
    <select lay-ignore id="tickettype" style="width:100px;">
    </select>
    </script>
    我的select是动态取的,将lay-ignore属性去掉后,select是没有下拉的效果的
    0 回复
  • 这个数据另外一个范畴了应该是,你审查元素能看到select里面的option吗?如果可以的话就是因为表格目前td的内容超出是看不到的,这个需要你将含有select的td修改一下样式。
    done: function (res, curr, count) {
    var tableElem = this.elem.next('.layui-table-view');
    count || tableElem.find('.layui-table-header').css('overflow', 'auto');
    layui.each(tableElem.find('select'), function (index, item) {
    var elem = $(item);
    elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
    });
    form.render();
    },
    如果是用原生的select,不需要最后的render
    0 回复
  • 拒绝者
    2018-5-15
    @岁月小偷 select是可以完整的显示在td中,但是option应该是被覆盖了,有没有可以添加edit属性类型的方法呢
    0 回复
  • @拒绝者 加上我刚才的代码还是不行吗?你说的edit属性是啥?table字段的edit设置吗?那个只能支持input,跟你的问题干系不大
    0 回复
  • 拒绝者
    2018-5-15
    @岁月小偷 加上你的代码和样式之后,就是select控件可以完整的显示,但是option是显示不了的
    0 回复
  • 拒绝者
    2018-5-15
    @岁月小偷 我只能晚上回家试下,现在单位上不了网盘
    0 回复
  • 我试一下把代码考进来把,经常遇到社区富文本写代码有bug,有一些被转换了。
    <!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="js/layui/src/css/layui.css" media="all">
    <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
    <style>
    .layui-table-view .layui-table[lay-size="sm"] .layui-select-title .layui-input {
    height: 28px;
    margin-top: -8px;
    }
    .layui-table-view .layui-table[lay-size="sm"] .layui-form-select dl dt,.layui-table-view .layui-form-select dl dd {
    line-height: 28px;
    }
    .layui-table-view .layui-table[lay-size="sm"] .layui-form-select dl {
    top: 28px;
    }
    .layui-table-view .layui-table .layui-select-title .layui-input {
    height: 32px;
    margin-top: -3px;
    }
    .layui-table-view .layui-table .layui-form-select dl dt,.layui-table-view .layui-form-select dl dd {
    line-height: 32px;
    }
    .layui-table-view .layui-table .layui-form-select dl {
    top: 32px;
    }
    .layui-table-view .layui-table[lay-size="lg"] .layui-select-title .layui-input {
    height: 38px;
    margin-top: 0;
    }
    .layui-table-view .layui-table[lay-size="lg"] .layui-form-select dl dt,.layui-table-view .layui-form-select dl dd {
    line-height: 38px;
    }
    .layui-table-view .layui-table[lay-size="lg"] .layui-form-select dl {
    top: 38px;
    }
    </style>
    </head>
    <body>

    <button class="layui-btn" id="getCheckedData">获得表格选中行</button>
    <table id="grid" lay-filter="grid"></table>

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

    <script>

    layui.use(['table', 'layer', 'element', 'jquery', 'form'], function (table, layer, element, $, form) {
    var jsonData = [{
    id: 1,
    city: 20000,
    }, {
    id: 2,
    city: 20001
    }];

    // 监听修改update到表格中
    form.on('select(testSelect)', function (data) {
    var elem = $(data.elem);
    var trElem = elem.parents('tr');
    var tableData = table.cache['grid'];
    // 更新到表格的缓存数据中,才能在获得选中行等等其他的方法中得到更新之后的值
    tableData[elem.attr('name')] = data.value;
    // 其他的操作看需求 TODO
    });
    $('#getCheckedData').click(function () {
    // 验证一下下拉选择之后有没有作用到表格缓存数据
    var checkStatus = table.checkStatus('grid'); //test即为基础参数id对应的值
    console.log(checkStatus.data); //获取选中行的数据
    console.log(checkStatus.data.length); //获取选中行数量,可作为是否有选中行的条件
    console.log(checkStatus.isAll); //表格是否全选
    });
    var tableIns = table.render({
    elem: '#grid',
    width: 800,
    height: 600,
    data: jsonData,
    done: function (res, curr, count) {
    var tableElem = this.elem.next('.layui-table-view');
    count || tableElem.find('.layui-table-header').css('overflow', 'auto');
    layui.each(tableElem.find('select'), function (index, item) {
    var elem = $(item);
    elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
    });
    form.render();
    },
    // size: 'lg',
    cols: [[ //表头
    {type: 'checkbox', fixed: true},
    {field: 'id', title: 'ID', fixed: true, edit: true},
    {
    field: 'city',
    title: '<a href="//baidu.com">城市</a>',
    align: 'center',
    width: 200,
    templet: function (d) {
    // 模板的实现方式也是多种多样,这里简单返回固定的
    return '<select name="city" lay-filter="testSelect" lay-verify="required" data-value="' + d.city + '" >\n' +
    ' <option value=""></option>\n' +
    ' <option value="18000">北京</option>\n' +
    ' <option value="20000">上海</option>\n' +
    ' <option value="20001">广州</option>\n' +
    ' <option value="20002">深圳</option>\n' +
    ' <option value="20003">杭州</option>\n' +
    ' </select>';
    }
    }
    ]]
    });
    });
    </script>

    </body>
    </html>
    你看下能运行不
    0 回复
  • 拒绝者
    2018-5-15
    @岁月小偷 可以了,我之前是让table自适应高度了,所以加载一行,会直接覆盖下拉框
    0 回复
  • 拒绝者
    2018-5-15
    @岁月小偷 现在option动态取出后,下拉是无选择的


    静态的是可以显示的,是不是因为样式的问题呢
    0 回复
  • 动态之后有render吗?看下dl中有没有dd
    0 回复
  • 拒绝者
    2018-5-15
    @岁月小偷 好了,貌似templet必须得用函数转义的写法,我试过模板方法动态加载好像是不好用的
    0 回复
  • 拒绝者
    2018-5-15
    @岁月小偷 现在有个样式问题,想在请教下你

    当到底层时,select就不会往上弹出了,而是显示很窄的一条
    0 回复