Layui 结合 BootstrapTable 在列表中实现可选日期

1、bootstrapTable

//插入一条数据,在日期单元格实现 可选layui日期控件,

每新增一行数据,监听需要日期的单元格,取值然后更新单元格值

$('#tableId').bootstrapTable({
        onClickCell: function (field, value, row, $element) {
        if (field == "time") {
         laydate.render({
                  elem: $element[0],
                  type : 'date',
                  show: true,
                  done: function(value, date, endDate){
                  console.log(value); //得到日期生成的值,如:2017-08-18
                  console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                  console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
                  let index = $element.parent().data('index');
                  let tdValue = value;  
           } }); } } })

 更新单元格的值

function saveData (index, field, tdValue) {
        $("#tableId").bootstrapTable('updateCell', {
            index: index,       //行索引
            field: field,       //列名
            value: tdValue,       //cell值
        });
}

 

posted @ 2021-08-05 14:54  唏嘘-  阅读(824)  评论(0编辑  收藏  举报