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

简介: layUI数据表格可编辑扩展下拉框


  1. 单元格内容使用layui的 templet 功能。如: {field:'jtcyGxmc', title: '关系名称',templet: '#selectGxmc',sort:false}
  2. 代码:
layui.use(['table', 'layer', 'element', 'jquery', 'form'], function(table, layer, element, $, form){
});
  1. 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();
            }
  });
  1. 模版
<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>
  1. 监听
// 监听修改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
        });
  1. 样式调整
/* 防止下拉框的下拉列表被隐藏*/
.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;
} 


相关文章
|
JavaScript
Layui数据表格嵌套文件上传按钮
Layui数据表格嵌套文件上传按钮
212 0
layUI数据表格可编辑表格单元格值修改之后获取修改前的值
layUI数据表格可编辑表格单元格值修改之后获取修改前的值
372 0
|
SQL 前端开发 API
关于ElementUI之动态树+数据表格+分页实例
关于ElementUI之动态树+数据表格+分页实例
186 0
|
7月前
elementui实现表格单选功能
elementui实现表格单选功能
layui表单select框同时支持下拉和输入的解决方案
layui表单select框同时支持下拉和输入的解决方案
363 0
|
7月前
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
LayUI数据表格复选框显示不居中问题
LayUI数据表格复选框显示不居中问题
|
7月前
|
前端开发
Element常用组件—表格、表单、对话框和分页工具条
Element常用组件—表格、表单、对话框和分页工具条
142 0
|
JavaScript
layUI数据表格可编辑扩展日期框
layUI数据表格可编辑扩展日期框
121 0