layui数据表格中插入下拉框以及输入框，日期选择等

在数据表格中插入动态数据的下拉框，输入框，日期选择框等需要在table的表头中进行配置，增加template，插入对应的块，在html中使用 script 标签包裹起来

如果使用的下拉框数据需要动态获取，在数据表格中的done函数发送请求，进行处理

详情请看如下代码

HTML部分

//表格
<div class="layui-tab-content layui-tab-content-bor used_table">
	<table id="table-list" class="layui-table" lay-filter="table-list"></table>
</div>
//表格操作列
<script type="text/html" id="auth-state">
	<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="delete">删除</a>
</script>

//使用人插入
<script type="text/html" id="selectEducation">
	<select name="select_user[]" class="select_user" autocomplete="off" lay-search="">
		<option value = "">请选择</option>
	</select>
</script>
//资产位置插入
<script type="text/html" id="inputAddress">
	<input type="text" class="layui-input" name="input_address[]">
</script>

//申请数量插入
<script type="text/html" id="inputNum" class="usedNum">
	<input class="used_num" name="input_num[]" type="number" min="1" value="1">
</script>
//归还日期插入
<script type="text/html" id="returnTime">
	<input type="text" class="layui-input" name="return_time[]" id="returnData" placeholder="请选择时间">
</script>
//申请类型插入
<script type="text/html" id="selectType">
	<select name="select_type[]" class="select_type" autocomplete="off" lay-search="">
		<option value="1">领用</option>
		<option value="2">借用</option>
	</select>
</script>

JS部分

<script>
layui.use(['form', 'layedit','formSelects', 'table', 'laydate'], function() {
	var form = layui.form,
		layer = layui.layer,
		laydate = layui.laydate;
		table = layui.table;

	var tableCol = []
	var tableCol = new Array()

	/* 表格列 */
	tableCol = [
		{
			field: 'sku_code',
			title: 'sku编号',
			align: 'center'
		},
		{
			field: 'spec_name',
			align: 'center',
			title: '产品名称',
		},
		{
			field: 'user',
			align: 'center',
			title: '使用人',
			templet:'#selectEducation',
			width:120
		},
		{
			field: 'position',
			align: 'center',
			title: '资产位置',
			templet:'#inputAddress',
		},
		{
			field: 'apply_type_name',
			title: '申请类型',
			align: 'center',
			templet:'#selectType'
		},
		{
			field: 'return_date',
			align: 'center',
			title: '归还日期',
			templet:'#returnTime'
		},
		{
			field: 'num',
			align: 'center',
			title: '申请数量',
			templet:'#inputNum'
		},
		{
			field: 'stock_num',
			align: 'center',
			title: '可用库存量'
		},
		{
			templet: '#auth-state',
			align: 'center',
			title: '操作'
		}
	]
	/* 表格渲染 */
	table.render({
		id: 'table-list',
		elem: '#table-list',
		data: removeDuplicate(layui.data('cart_used').data),
		cols: [
			tableCol
		],
		done: function(res, curr, count) {
			//使用人下拉框得数据是动态得
			tabData = res.data;
			layer.closeAll('loading');
			$.ajax({
				url:'/home/common/userList',
				data:{
					is_all: 0
				},
				dataType:'json',
				type:'POST',
				success:function(res){
					var opt = '<option value = "">请选择</option>';
					$.each(res.data, function(item, val) {  
						opt += '<option value = "' + val.uid + '">' + val.name + '</option>'
					});
					$(".select_user").html(opt);
					form.render('select');
				},
				error:function(){
					layer.msg('请求超时请联系管理员',{icon:2});
				},
				async: false
			})
		}
	});
})

</script>