layUI数据表格可编辑扩展下拉框(转)

1. 单元格内容使用layui的 templet 功能。如： {field:'jtcyGxmc', title: '关系名称',templet: '#selectGxmc',sort:false}
2. 代码:

layui.use(['table', 'layer', 'element', 'jquery', 'form'], function(table, layer, element, $, form){

});

3. table.render渲染done回调

//展示已知数据
  table.render({
    elem: '#grid'
    ,cols: [[ //标题栏
      {field: 'id', title: 'ID', width: 80, sort: true}
      ,{field: 'username', title: '用户名', width: 120}
      ,{field: 'email', title: '邮箱', minWidth: 150}
      ,{field: 'city', title: '城市', width: 100}
      ,{field: 'selectName', title: '下拉框',  templet: '#selectGxmc'}
      ,{field: 'layuiData', title: '日期框', templet: '#layuiDataGxmc'}
      ,{field: 'editText', title: '编辑框', edit:'text'}
    ]]
    ,data: [{
      "id": "10001"
      ,"username": "杜甫"
      ,"email": "xianxin@layui.com"
      ,"city": "浙江杭州"
      ,"layuiData":''
      ,'editText':'1'
    },{"id": "10002"
      ,"username": "杜甫2"
      ,"email": "xianxin@layui.com"
      ,"city": "浙江杭州"
    }, {
      "id": "10003"
      ,"username": "杜甫3"
      ,"email": "xianxin@layui.com"
      ,"city": "浙江杭州"
    }]
    ,skin: 'line' //表格风格
    ,even: true
    //,page: true //是否显示分页
    //,limits: [5, 7, 10]
    //,limit: 5 //每页默认显示的数量
    ,done: function (res, curr, count) {
                count || this.elem.next('.layui-table-view').find('.layui-table-header').css('overflow', 'auto');
                layui.each($('select'), function (index, item) {
                    var elem = $(item);
                    elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
                });
                // form.render();
            }
  });

4. 模版

<script type="text/html" id="selectGxmc" >
	<select name='selectName' lay-verify='selectVerify' lay-search=''">
		<option value=""></option>
		<option value="父子">父子</option>
		<option value="母子">母子</option>
		<option value="姐弟">姐弟</option>
		<option value="弟弟">弟弟</option>
	</select>
</script>

5. 监听

 // 监听修改update到表格中
        form.on('select', function (data) {
            debugger;
            var elem = $(data.elem);
            var trElem = elem.parents('tr');
            var tableData = table.cache['grid'];
            // 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
            tableData[trElem.data('index')][elem.attr('name')] = data.value;
            // 其他的操作看需求 TODO
        });

6. 样式调整

/* 防止下拉框的下拉列表被隐藏*/
.layui-table-cell { overflow: visible !important; }

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

/* 使得下拉框与单元格刚好合适 */
td .layui-form-select{
    margin-top: -10px;
    margin-left: -15px;
    margin-right: -15px;
}