layui.table 表格实现弹窗、下拉、时间选择器
一、说明
由于官方text属性支持“text”,是需求又需要弹窗、下拉、时间选择器等,所以只能自己动手实现
edit String 单元格编辑类型(默认不开启)目前只支持:text(输入框) text
二、实现过程
模仿官方实现edit:"text"的效果
三、代码,下面以时间控件为例
1、cols写法
{
field: 'testingPeriod',
width: 300,
title: '检测期限',
event: 'testingPeriodEvent',
style: 'outline: 1px solid #e6e6e6;outline-offset: -5px;',
templet: function (d) {
return (d.productName || "")
}
}
1.1、说明:核心属性是event,接下来的自定义控件都是基于这个属性来做的
2、自定义控件以及实现取值和赋值
/**
* table渲染input
* @param {*} obj
* @param {*} layEvent
*/
function tableInputRender(obj, layEvent, readonly) {
var tr = obj.tr //获得当前行 tr 的DOM对象;
var ELEM_EDIT = 'table-input-edit'
, ELEM_CELL = '.layui-table-cell'
var othis = tr.find('td[lay-event="' + layEvent + '"]')
, elemCell = othis.children(ELEM_CELL)
var input = $('<input class="layui-input ' + ELEM_EDIT + '" ' + readonly + '>')
input[0].value = othis.data('content') || elemCell.text()
othis.find('.' + ELEM_EDIT)[0] || othis.append(input)
input.focus()
return input
}
/**
* 单元格检测期限
* @param {*} obj
*/
function testingPeriodEvent(obj) {
window.event.stopPropagation() // 禁止冒泡
var _input = tableInputRender(obj, 'testingPeriodEvent', '')
var _timer = null
_input.on('click', function (e) {
laydate.render({
elem: _input[0],
type: 'date',
trigger: 'click',
done: function (value) {
clearTimeout(_timer)
obj.update({ testingPeriod: value })
_input.remove()
}
})
e.stopPropagation()
})
_input.trigger('click')
_input.blur(function () {
var _self = $(this)
_timer = setTimeout(() => {
_self.remove()
}, 0)
})
}