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,
//最大日期为当天
max:0,
//直接显示
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');