那些年我踩过的关于layui表格的坑

1 表格

1 表格显示

1 格式化

需求可能会要求将表格显示为不同的格式，如2位小数，其他值。我举个例子
return 处可以随意发挥，甚至调用方法

{field:'sex',title:'性别',templet:function(d){
    return "男";
}}

2 常用属性

属性	作用
edit:‘text’	使表格的这个字段拥有可编辑功能
hide:true	隐藏当前字段

3 表格的可编辑日期字段

（1）首先，你需要为你的bean类格式化，不至于他在保存或者传值时，将年月日变成年月日时分秒，栗子(SpringBoot)如下：

@JsonFormat(pattern="yyyy-MM-dd")
@DateTimeFormat(pattern="yyyy-MM-dd")
private Date date1;

(2)然后html

table.render({
elem:'#elem1',
...
{field:'date1',title:'日期',edit:'text',event:'date'}
...
});
table.on('tool(elem1)',function(obj) {
  var data = obj.data;
  if(obj.event === 'date') {
    var field = $(this).data('field');
    laydate.render({
      elem:this.firstChild,
      //直接显示
      show:true,
      //点击this所在元素关闭事件冒泡。不设定的话无法弹出控件
      closeStop:this,
      done:function(value,date) {
        //修改后的值
        data[field] = value;
        obj.update(data);
      }
    });
  }
});

4 表格合并

链接

2 表格传值

• 1 不可编辑表格/静态表格
  var datas = layui.sessionData(‘elemId’).data;
• 2 可编辑表格/动态表格（只可以传递当页）
  var datas = layui.table.cache[“elemId”];

3 表格获取值

• 1 table.render的done仅在表格渲染时调用，edit的时候不会调用
• 2 表格渲染后，值并不在表格内，而是在其下方的layui-table-view内，所以你如果想获取值，应该先

var $table = $("#"+tableName).next('div.layui-table-view');