edit类型 layui_layui-table单元格编辑扩展
layui-table是layui框架中的一个非常重要的组件之一，相信大多人都在使用它，但是在使用的过程中也发现很多没法满足具体业务场景的需求，比如，table内部的单元格编辑事件仅支持text(输入框)，不支持下拉选择框和日期时间选择等的使用。
下面，在贤心大神的源码基础上，以扩展日期时间选择控件为例，对原有的table.js进行扩展添加自己所需的功能：
//显示编辑表单
if(editType){
if(editType === 'select') { //选择框
//var select = $('');
//othis.find('.'+ELEM_EDIT)[0] || othis.append(select);
} else { //输入框
var input = $('');
input[0].value = othis.data('content') || elemCell.text();
othis.find('.'+ELEM_EDIT)[0] || othis.append(input);
input.focus();
}
return;
}
这段代码可以看出贤心大神是准备了要对单元格编辑事件进行扩展的，但是由于种种原因并没有完全实现，我们先分析大神对text(输入框)类型的编辑，可以发现，对于表格的单元格标记有下面的事件进行控制：
//单元格编辑
that.layBody.on('change', '.'+ELEM_EDIT, function(){
var othis = $(this)
,value = this.value
,field = othis.parent().data('field')
,index = othis.parents('tr').eq(0).data('index')
,data = table.cache[that.key][index];
data[field] = value; //更新缓存中的值
layui.event.call(this, MOD_NAME, 'edit('+ filter +')', {
value: value
,data: data
,field: field
});
}).on('blur', '.'+ELEM_EDIT, function(){
var templet
,othis = $(this)
,field = othis.parent().data('field')
,index = othis.parents('tr').eq(0).data('index')
,data = table.cache[that.key][index];
that.eachCols(function(i, item){
if(item.field == field && item.templet){
templet = item.templet;
}
});
othis.siblings(ELEM_CELL).html(
templet ? laytpl($(templet).html() || this.value).render(data) : this.value
);
othis.parent().data('content', this.value);
othis.remove();
});
从上面的源码中可以看出，对于table的单元格编辑总共绑定了两个事件，input='text'的change和blur事件，并且对于change事件绑定了回调接口。
那么基于上述代码示例，接下来就可以在大神的基础上进行扩展添加日期时间选择控件，首先判断编辑单元格编辑的类型editType，以日期时间选择为例，那么就可以在table中将edit设置为date/datetime类型，仿照输入框的写法，那么就可以为：
if (editType === 'date' || editType === 'datetime') { //日期时间选择控件
input = $('');
}
代码中对input类型中的class添加了一个calendar，方便后续绑定对应的日期时间选择控件，具体代码如下：
//同时绑定多个
$('.calendar').each(function (index, elem) {
laydate.render({
elem: elem,
type: editType,
trigger: 'click',
done: function (value, date, endDate) {
var index = othis.parents('tr').eq(0).data('index')
, data = table.cache[that.key][index];
data[field] = value; //更新缓存中的值
othis.html(value);
othis.data('content', value);
layui.event.call(this, MOD_NAME, 'edit(' + filter + ')', {
value: value
, data: data
, field: field
});
}
});
});
其中othis为当前点击的单元格dom结构，仿照上面text(输入框)类型的编辑中对于blur事件的处理，此时要完成对单元格本身的赋值以及其data中key为content的值，最后调用回调函数，即完成了对单元格编辑事件的中日期时间选择控件的扩展。
全部的代码片段为：
//显示编辑表单
if (editType) {
var input;
if (editType === 'date' || editType === 'datetime') { //日期时间选择控件
input = $('');
} else { //输入框
input = $('');
}
input[0].value = othis.data('content') || elemCell.text();
othis.find('.' + ELEM_EDIT)[0] || othis.append(input);
input.focus();
//同时绑定多个
$('.calendar').each(function (index, elem) {
laydate.render({
elem: elem,
type: editType,
trigger: 'click',
done: function (value, date, endDate) {
var index = othis.parents('tr').eq(0).data('index')
, data = table.cache[that.key][index];
data[field] = value; //更新缓存中的值
othis.html(value);
othis.data('content', value);
layui.event.call(this, MOD_NAME, 'edit(' + filter + ')', {
value: value
, data: data
, field: field
});
}
});
});
return;
}