layui 表格插入表单元素select 并且值回显

layui 表格插入表单元素select 并且值回显

一. 首先为了让select的选项不被table的样式遮盖，需要加下面样式：

    /* 防止下拉框下拉值被遮盖*/
    .layui-table-cell {
        overflow: visible;
    }

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

    .layui-table-body {
        overflow: visible;
    }
    /* 调整高度 */
    td .layui-form-select{
        margin-top: -10px;
        margin-left: -15px;
        margin-right: -15px;
    }

二.html界面及js代码：

<table class="layui-table" id="birtFieldList" lay-filter="birtFieldList"></table>

<script type="text/html" id="selectFieldType">
    <select name="fieldType"  lay-filter="fieldType"  data-value="{{d.fieldType}}">
        <option value="">[[#{table.select.option}]]</option>
        <option value="String">字符串</option>
        <option value="Date">日期</option>
        <option value="Integer">整型</option>
        <option value="Long">长整型</option>
        <option value="Double">双精度浮点数</option>
    </select>
</script>
<script type="application/javascript">
layui.use(['table', 'layer', 'element', 'jquery', 'form'], function(){
        var form = layui.form,$ = layui.jquery;
        var table = layui.table,elment = layui.element;
 table.render({
            elem: '#birtFieldList',
            url: contextPath + '/birtConfig/loadFieldList',
            method: 'GET',
            height: 'full-135',
            cols: [
                [  
                    {field: 'fieldType', title: '[[#{birt.field.fieldType}]]', width: '14%',align: 'center', templet:'#selectFieldType'}
                ]
            ],
           done: function (res, curr, count) {
               layui.each($('select'), function (index, item) {
                   var elem = $(item);
                   elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
               });
               form.render();
           },
            id: 'birtFieldListReload'
        });

        form.on('select(fieldType)', function(obj){
            var elem = $(obj.elem);
            var trElem = elem.parents('tr');
            var tableData = table.cache['birtFieldList'];
            // 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
            tableData[trElem.data('index')][elem.attr('name')] = data.value;
        });
 });
</script>

字段那块，也可以写成下面的方式，看个人爱好：

{field: 'fieldType', title: '[[#{birt.field.fieldType}]]', width: '14%',align: 'center', templet:function (d) {
                            return '<select name="fieldType"  lay-filter="fieldType" data-value="' + d.fieldType + '" >\n' +
                                '        <option value="">[[#{table.select.option}]]</option>\n' +
                                '        <option value="String">字符串</option>\n' +
                                '        <option value="Date">日期</option>\n' +
                                '        <option value="Integer">整型</option>\n' +
                                '        <option value="Long">长整型</option>\n' +
                                '        <option value="Double">双精度浮点数</option>\n' +
                                '    </select>';}}

三.效果如下：

下一章将会写怎么动态设置table中select 表单元素的选项值