Web 表格table實現橫向滾動條以及時間組件laydate的使用

今天有空 來總結下最近的問題 最近的問題應該是昨天磕了一天的前端，吐槽一下前端提供的文檔寫的太不詳細了，坑太多了。

一個是table實現橫向滾動的，做的功能是想把Hbase內容放入表格顯示，Hbase中的列太多，且內容很長，所以使用普通的表格顯示的時候會出現列拉伸的效果，因此用橫向滾動，最簡單的方法，將table放入一個div中，對div設置寬度，並且指明屬性overflow-x:scroll，這樣當表格的寬度大於這個寬度的時候，就會出現橫向的滾動條了。

另一個是時間組件的，用了一個封裝好的laydate.js組件，說明文檔見layDate 日期與時間組件

使用方式非常簡單，如果只需要使用這個單獨模塊的時候，只需要下載laydate.js，並且引入，在自定義js文件中通過

<input type="text" id="test">

laydate.render({ 
  elem: '#test',
  type: 'datetime'
});

加載即可，這裏的type可以指定時間組件的類型，datetime是年月日時分秒都有，month對應月，year對應年，date對應日期，time對應時分秒格式的。可以自由選擇，elem參數的id
接下來要就是對時間組件操作相應的回調函數了

控件初始打開的回調
控件在打開時觸發，回調返回一個參數：初始的日期時間對象

laydate.render({
  elem: '#test'
  ,ready: function(date){
    console.log(date); //得到初始的日期時間對象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
  }
});

日期時間被切換後的回調
年月日時間被切換時都會觸發。回調返回三個參數，分別代表：生成的值、日期時間對象、結束的日期時間對象

laydate.render({
  elem: '#test'
  ,change: 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）纔會返回。對象成員同上。
  }
});

控件選擇完畢後的回調
點擊日期、清空、現在、確定均會觸發。回調返回三個參數，分別代表：生成的值、日期時間對象、結束的日期時間對象

laydate.render({
  elem: '#test'
  ,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）纔會返回。對象成員同上。
  }
});