layui.table 表格实现弹窗、下拉、时间选择器

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)
  })
}

四、关于下拉选择，以及弹窗选择，由于用到了第三方插件并进行了修改，就不上代码了