Layui动态表格编辑可select选择可date日期选择

开发过程中经常会遇到动态编辑记录内容的情况，layui好像是只支持简单的文本编辑，像select或者date等组件官方是没有给出案例的，下面就是动态表格Table的select和date组件的相关代码。

效果示例：

 效果代码：

table.render({
	id:tableId
	,elem: '#'+tableId
	,limit: Number.MAX_VALUE
	,cols: [[
		{field:'periods', title: '期次', width:60, align:'center'}
		,{field:'conditions', title: '费项类型', width:200,templet: function(d){
			var seletxt = '<option value="">费项名称</option>';
			for (i = 0; i < cost_type_arr.length; i++) {
				seletxt += '<option value="' + cost_type_arr[i].id + '"';
				if(cost_type_arr[i].id == d.cost_type){
					seletxt += ' selected="selected"';
				}
				seletxt += '>' + cost_type_arr[i].name + '</option>';
			}
			return '<select data-periods="' + d.periods + '" lay-filter="cost_type" lay-verify="required">' + seletxt + '</select>';
		}}
		,{field:'plan_date', title: '计划收款日期', placeholder:'格式：yyyy-mm-dd', width:150,templet: function(d){
			return '<input lay-filter="plan_date" type="text" id="plan_date'+d.periods+'" lay-verify="date|required" autocomplete="off" placeholder="计划收款日期" class="layui-input">';
		}}
		,{field:'money', title: '计划收款金额(元)', placeholder:'保留两位小数', width:150, templet: function(d){
			return '<input data-periods="' + d.periods + '" type="text" lay-filter="money" lay-verify="required|number" autocomplete="off" placeholder="计划收款金额" class="layui-input" value="' + d.money + '">';
		}}
		,{field:'comments', title: '备注', minWidth:400, templet: function(d){
			return '<input data-periods="' + d.periods + '" type="text" lay-filter="comments" autocomplete="off" placeholder="备注" class="layui-input" value="' + d.comments + '">';
		}}
	]]
	,data:table_data
	,done: function(value, date){
		if(value.data.length > 0){
			$(value.data).each(function(i,v){
				var tmpplandatevalue = value.data[i]['plan_date'];
				layui.laydate.render({
					elem: '#plan_date'+value.data[i]['periods']
					,trigger: 'click'
					,value: tmpplandatevalue
					,done: function(value2, date, endDate){
						for(var ii=0, row; ii < table_data.length; ii++){
							row = table_data[ii];
							if(value.data[i]['periods'] == row.periods){
								$.extend(row, {'plan_date': value2});
							}
						}
						table.reload(tableId, {
							data: table_data
						});
					}
				});
			});
		}
	}
});

form.on('select(cost_type)', function (data) {
	var nowperiods = data.elem.dataset.periods;
	for(var i=0, row; i < table_data.length; i++){
		row = table_data[i];
		if(nowperiods == row.periods){
			$.extend(row, {'cost_type': data.value});
		}
	}
});
$(document).on("input","input[data-periods]",function(e){
	var name = $(this).attr('lay-filter');
	var periods = $(this).attr('data-periods');
	var value = $(this).val();
	var updata = {};
	if(name === 'money'){
		value = value.replace(/[^\d.]/g,'');
		if(''!=value){
			//value = parseFloat(value).toFixed(2);
		}
		updata.money = value;
		$(this).val(value);
	}else{
		updata.comments = value;
	}

	for(var i=0, row; i < table_data.length; i++){
		row = table_data[i];
		if(periods == row.periods){
			$.extend(row, updata);
		}
	}
	if(name === 'money'){
		var tmpmoney = 0;
		var tmpmoney1 = 0;
		if(table_data.length > 0){
			$(table_data).each(function(i,v){
				tmpmoney1 = parseFloat(v.money);
				if(!isNaN(tmpmoney1)){
					tmpmoney = parseFloat(tmpmoney + tmpmoney1);
				}
			});
		}
		$('#span_total_money').html(tmpmoney.toFixed(2));
	}
});

目前只是为了解决个人项目问题写的，对于兼容性问题没有测试，代码仅供参考，有不妥的地方请20cm大神指正。