layui.use(['table','layer'], function () {
var table = layui.table;
var selectParams = [
{name:1,value:"张三1"},
{name:2,value:"张三2"},
{name:3,value:"张三3"},
{name:4,value:"张三4"},
{name:5,value:"张三5"}
];
var tableData = [
{"id":1,"name":"张三1","danxuan":"","duoxuan":"","birthday":""},
{"id":2,"name":"张三2","danxuan":"","duoxuan":"","birthday":""},
{"id":3,"name":"张三3","danxuan":"","duoxuan":"","birthday":""},
{"id":4,"name":"张三4","danxuan":"","duoxuan":"","birthday":""},
{"id":5,"name":"张三5","danxuan":"","duoxuan":"","birthday":""},
{"id":6,"name":"张三6","danxuan":"","duoxuan":"","birthday":""},
{"id":7,"name":"张三7","danxuan":"","duoxuan":"","birthday":""},
{"id":8,"name":"张三8","danxuan":"","duoxuan":"","birthday":""},
{"id":9,"name":"张三9","danxuan":"","duoxuan":"","birthday":""},
{"id":10,"name":"张三10","danxuan":"","duoxuan":"","birthday":""}
];
table.render({
elem: '#tableId'
,id:'id'
,data:tableData
,height: 'full-90'
,page: true
,cols: [[
{type:'checkbox'}
,{field:'name',title: '姓名',width:120}
,{field:'danxuan', title: '单选',width:120,edit:'select',data:selectParams}
,{field:'duoxuan', title: '多选',width:120,edit:'select',data:selectParams,enabled:true} //enabled(单、多选开关) true：多选，false：单选。默认为false
,{field:'birthday', title: '生日',width:120,edit:'date',dateType:'date'}
]]
});
table.on('edit(tableEvent)', function(obj){
var value = obj.value //得到修改后的值
,data = obj.data //得到所在行所有键值
,field = obj.field; //得到字段
console.log(value);
if(field === 'danxuan'){
obj.update({danxuan:value.value});
}
if(field === 'duoxuan'){
obj.update({duoxuan:'多选'});
}
if(field === 'birthday'){
obj.update({birthday:value});
}
});
});
html表格日期选框 table单元格编辑新增下拉框（select支持单或多选） 时间选择（date）功能！ · Pull Request !26 · 贤心/layui - ...
