行内编辑时间框

        最早之前写过两篇关于bootstrap table的文章：

1.http://www.cnblogs.com/zhengyeye/p/6561430.html

2.http://www.cnblogs.com/zhengyeye/p/8442129.html

        果然在无数次的与后台管理系统打交道的过程中，必不可免的又遇到了它——

基础表格：

1.http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

实现代码：

$toptable.bootstrapTable({
            url: "/dcenter/dealamount/temporarylist",//获取所有数据的接口
            striped: true,      //是否显示行间隔色
            cache: false,      //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pageNumber:1,      //初始化加载第一页，默认第一页
            pageSize: 5,      //每页的记录行数（*）
            pageList: [5],  //可供选择的每页的行数（*）
            queryParamsType:'',
            sidePagination: "server", //
            toolbar:'#toolbarTop',
            uniqueId:'id',
            pagination:true,
            paginationLoop:false,
            showExport: true,                     //是否显示导出
            exportDataType: "basic",              //basic', 'all', 'selected'.
            columns: [ {
                 '1%',
                radio: true,
                valign: 'middle'
            },{
                field: 'id',//与返回数据对象属性一致
                title: '序号',//表头显示
                valign:'middle',
                align: 'center',
                 '1%',
            }, {
                field: "startdate",
                title: "起始日期",
                valign:'middle',
                align: 'center',
                 '15%',
             formatter: function (value, row, index) {
                        if (value) {
                            return moment.unix(value).format("YYYY-MM-DD");
                        }
                }
....

进阶篇：可编辑的表格

2.https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/editable

实现代码：

 $table1.bootstrapTable({
            url: '/dcenter/steel/list?mark=4',//获取所有数据的接口
            striped: true,      //是否显示行间隔色
            cache: false,      //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pageNumber:1,      //初始化加载第一页，默认第一页
            pageSize: 5,      //每页的记录行数（*）
            pageList: [5],  //可供选择的每页的行数（*）
            queryParamsType:'',
            sidePagination: "server", //
            toolbar:'#toolbar',
            uniqueId:'id',
            pagination:true,
            paginationLoop:false,
            columns: [{
                 '1%',
                radio: true,
                valign: 'middle'
            },{
                field: 'id',//与返回数据对象属性一致
                title: '序号',//表头显示
                valign:'middle',
                align: 'center',
                 '1%'
            },{
                field: 'startdate',
                title: '起始日期',
                valign:'middle',
                align: 'center',
                 '15%',
                editable: {
                    type: 'date',
                    title: '起始日期',
                    placement: 'bottom',
                    datepicker: {
                        language: 'zh-CN',
                    },
                    validate: function (value) {
                        value=jQuery.trim(value);
                        if (value == '') {
                            return '开始时间不能为空!';
                        }
                    }
                }
            },
....

---

1.以为这样就可以完美的解决所有的需求~~

        你永远满足不了产品的需求：要求开始时间不能选给定日期之前的日期，截止时间不能选给定时间之后的日期（其实就是今天之后的日期）；于是在摸爬滚打中再次看看这个可编辑的行内日期框，就找到了很多文档：

1.http://bootstrap-datepicker.readthedocs.io/en/latest/events.html

2.http://vitalets.github.io/bootstrap-datepicker/

        原因均在于行内编辑的日期框是基于bootstrap-datepicker来扩展的，于是只能从中找方法……

        还真的找到了一种属性，可以满足这样的需求：

        看起来非常完美！结果，自己就又被坑了好久……

拿不到给 startDate赋值的字符串！！！

有大神研究过的，可以顺便分享一下经验。。。。

---

        强迫症者的毛病就是想要事事达到完美，但是无奈能力有限，最终还是没有找到如何给startdate赋值的方法。最终，只能弃之，换种活法：

...
{
                field: "startdate",
                title: "起始日期",
                valign:'middle',
                align: 'center',
                 '15%',
                formatter: function (value, row, index) {
                    return "<input id='starttime_"+row.id+"' class='starttime-item' value='"+value+"' style='border:1px solid #e8e8e8;'></input>";
                }...

        依旧跟以往一样，正常返回table列，只是在时间那一列返回值为input框，然后使用layerui中的laydate组件实现这一功能：http://www.layui.com/laydate/；在上面的表格初始化完成后，在onLoadSuccess方法中增加：

...    // }
            }],
            onLoadSuccess:function(data){
                 lay('.starttime-item').each(function(){
                    laydate.render({
                        elem: this,
                        min:jQuery(this).val(),
                        max:-1,//昨天
                        btns: ['confirm'],
                        // done: function(value, date, endDate){
                        //     console.log('111111111'+value); //得到日期生成的值，如：2017-08-18。
                        //     jQuery(this).attr('value',value);
                        // }
                    });
                });
                lay('.endtime-item').each(function(){
                    laydate.render({
                        elem: this,
                        min:jQuery(this).parent().prev().find('input').val(),
                        max:0,//明天
                        btns: ['confirm'],
                        // done: function(value, date, endDate){
                        //     console.log('22222222'+value); //得到日期生成的值，如：2017-08-18。
                        //     jQuery(this).attr('value',value);
                        // }
                    });
                });
            }
        });

        当一种办法不能解决问题的时候，纠结一段时间后就该试着找另外一种方法，而不要固步自封，多学、再灵活点~