? ? ? ? 最早之前寫過兩篇關于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/

實現代碼：

1 $toptable.bootstrapTable({ 2 url: "/dcenter/dealamount/temporarylist",//獲取所有數據的接口 3 striped: true, //是否顯示行間隔色 4 cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*） 5 pageNumber:1, //初始化加載第一頁，默認第一頁 6 pageSize: 5, //每頁的記錄行數（*） 7 pageList: [5], //可供選擇的每頁的行數（*） 8 queryParamsType:'', 9 sidePagination: "server", // 10 toolbar:'#toolbarTop', 11 uniqueId:'id', 12 pagination:true, 13 paginationLoop:false, 14 showExport: true, //是否顯示導出 15 exportDataType: "basic", //basic', 'all', 'selected'. 16 columns: [ { 17 width: '1%', 18 radio: true, 19 valign: 'middle' 20 },{ 21 field: 'id',//與返回數據對象屬性一致 22 title: '序號',//表頭顯示 23 valign:'middle', 24 align: 'center', 25 width: '1%', 26 }, { 27 field: "startdate", 28 title: "起始日期", 29 valign:'middle', 30 align: 'center', 31 width: '15%', 32 formatter: function (value, row, index) { 33 if (value) { 34 return moment.unix(value).format("YYYY-MM-DD"); 35 } 36 } 37 ....

進階篇：可編輯的表格

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

實現代碼：

1 $table1.bootstrapTable({ 2 url: '/dcenter/steel/list?mark=4',//獲取所有數據的接口 3 striped: true, //是否顯示行間隔色 4 cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*） 5 pageNumber:1, //初始化加載第一頁，默認第一頁 6 pageSize: 5, //每頁的記錄行數（*） 7 pageList: [5], //可供選擇的每頁的行數（*） 8 queryParamsType:'', 9 sidePagination: "server", // 10 toolbar:'#toolbar', 11 uniqueId:'id', 12 pagination:true, 13 paginationLoop:false, 14 columns: [{ 15 width: '1%', 16 radio: true, 17 valign: 'middle' 18 },{ 19 field: 'id',//與返回數據對象屬性一致 20 title: '序號',//表頭顯示 21 valign:'middle', 22 align: 'center', 23 width: '1%' 24 },{ 25 field: 'startdate', 26 title: '起始日期', 27 valign:'middle', 28 align: 'center', 29 width: '15%', 30 editable: { 31 type: 'date', 32 title: '起始日期', 33 placement: 'bottom', 34 datepicker: { 35 language: 'zh-CN', 36 }, 37 validate: function (value) { 38 value=jQuery.trim(value); 39 if (value == '') { 40 return '開始時間不能為空!'; 41 } 42 } 43 } 44 }, 45 ....

---

?

1.以為這樣就可以完美的解決所有的需求~~

? ? ? ? 你永遠滿足不了產品的需求：要求開始時間不能選給定日期之前的日期，截止時間不能選給定時間之后的日期（其實就是今天之后的日期）；于是在摸爬滾打中再次看看這個可編輯的行內日期框，就找到了很多文檔：

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

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

? ? ? ? 原因均在于行內編輯的日期框是基于bootstrap-datepicker來擴展的，于是只能從中找方法……

? ? ? ? 還真的找到了一種屬性，可以滿足這樣的需求：

? ? ? ? 看起來非常完美！結果，自己就又被坑了好久……

拿不到給?startDate賦值的字符串！！！

有大神研究過的，可以順便分享一下經驗。。。。

---

?

? ? ? ? 強迫癥者的毛病就是想要事事達到完美，但是無奈能力有限，最終還是沒有找到如何給startdate賦值的方法。最終，只能棄之，換種活法：

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

? ? ? ? 依舊跟以往一樣，正常返回table列，只是在時間那一列返回值為input框，然后使用layerui中的laydate組件實現這一功能：http://www.layui.com/laydate/；在上面的表格初始化完成后，在onLoadSuccess方法中增加：

1 ... // } 2 }], 3 onLoadSuccess:function(data){ 4 lay('.starttime-item').each(function(){ 5 laydate.render({ 6 elem: this, 7 min:jQuery(this).val(), 8 max:-1,//昨天 9 btns: ['confirm'], 10 // done: function(value, date, endDate){ 11 // console.log('111111111'+value); //得到日期生成的值，如：2017-08-18。 12 // jQuery(this).attr('value',value); 13 // } 14 }); 15 }); 16 lay('.endtime-item').each(function(){ 17 laydate.render({ 18 elem: this, 19 min:jQuery(this).parent().prev().find('input').val(), 20 max:0,//明天 21 btns: ['confirm'], 22 // done: function(value, date, endDate){ 23 // console.log('22222222'+value); //得到日期生成的值，如：2017-08-18。 24 // jQuery(this).attr('value',value); 25 // } 26 }); 27 }); 28 } 29 });

? ? ? ? 當一種辦法不能解決問題的時候，糾結一段時間后就該試著找另外一種方法，而不要固步自封，多學、再靈活點~

?

總結

以上是生活随笔為你收集整理的行内编辑时间框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。