1. 程式人生 > >layui在table表格中新增時間控制元件

layui在table表格中新增時間控制元件

 timeB為name

   layui.table.render({
                elem: '#lay-purchasing-change',
                     id: "layTableId1"   ,
                url: baseURL + 'purchase/erpPruchasingOver/info/' + data.purchasingOverId,
                method: 'POST'
                , where: {}
                , contentType: "application/json;charset=utf-8"
                //資料介面 //資料介面/info/{purchasingOrderId}
                , cols: [[ //表頭
                    // {type:'checkbox'}
                    {field: 'timeA', title: '付款時間', align: 'center', width: 260},
                    {field: 'moneyA', title: '付款金額(元)', align: 'center', width: 260},
                    {field: 'timeB', title: '待修改時間', align: 'center', width: 260, edit: 'select',
                        templet: function (d) {
                            return '<input type="text" name="timeB" verify lay-verify="verify" value="' + (d.timeB || '') + '" placeholder="請選擇時間" readonly="readonly" class="layui-input layui-input-date" style="text-align: center"/>';
                        }},
                    {field: 'moneyB', title: '待修改金額(元)', align: 'center', width: 260 ,edit: 'text'},
                ]],
                done: function (res, curr, count) {
                    //日期控制元件
                    $(".layui-input-date").each(function (i) {
                        layui.laydate.render({
                            elem: this,
                            format: "yyyy-MM-dd",
                            done: function (value, date) {
                                if (res && res.data[i]) {
                                    $.extend(res.data[i], {'timeB': value})
                                }
                            }
                        });
                    });
                    console.log(res);
                },
                page: false,
                loading: true
            });