1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > Layui数据表格添加时间控件

Layui数据表格添加时间控件

时间:2018-09-11 09:01:44

相关推荐

Layui数据表格添加时间控件

Layui数据被使用的非常广泛,但是呢在文档可查询到到数据表格格式非常有限,需要我们自己通过表格里面的方法属性扩展它的使用方法,例如往里面表格里面添加一些内容等等,今天我带来往layui数据表格里添加时间控件的方法。

先看效果图:

能达到的效果如上图所示,目前我是写在了固定数据的表格里面,如需写在异步请求的数据表格内可对该方法进行修正以及改善。

首先要准备一个数据表格,在需要加入时间控件的列添加两个属性,自定义列模板templet、以及自定义单元格点击事件名event。Templet是用于存放时间控件的容器,event是用于触发时间控件的方法。

Templet的内容如下:

这里的id值非常重要,关系到时间控件是否显示的决定元素,需要每一个都不一样,因为时间控件的绑定是通过元素id值进行绑定的,id又是有唯一性的,如果是一样的话就只能出现一个时间控件了,而且是第一个。我这里使用的是每条数据的索引值,当然你也可以使用其他的,自己能看懂就行,div标签内容就是你该个列的内容,也就是显示出来的值。

Event的内容如下:

进入后,在这个方法内的核心代码就是对当前点击的这个标签绑定时间控件,这里是通过时间控件前面的状态列的数据判断点击的是哪个。layDate就是加载时间控件的方法,里面尤其要注意的就是elem值和closeStop值,这两值必须跟Templet里面的id一样,不同行的id也是不一样的,要根据你添加id时的数据来决定。按着这样子走就可以顺利的吧时间控件绑定在数据表格里面了,时间控件需要逐个绑定,可以尝试着使用循环。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。