Web 表格table实现横向滚动条以及时间组件laydate的使用

本文介绍了如何解决前端表格由于列过多导致的显示问题，通过将表格置于div并设置overflow-x实现横向滚动条。同时，详细讲解了laydate时间组件的使用，包括基本引入、不同类型的配置及各个回调函数的应用，帮助开发者更好地理解和运用这些前端功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天有空来总结下最近的问题最近的问题应该是昨天磕了一天的前端，吐槽一下前端提供的文档写的太不详细了，坑太多了。

一个是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）才会返回。对象成员同上。
  }
});