在数据表格中插入动态数据的下拉框,输入框,日期选择框等需要在table的表头中进行配置,增加template,插入对应的块,在html中使用 script 标签包裹起来 如果使用的下拉框数据需要动态获取,在数据表格中的done函数发送请求,进行处理 详情请
在数据表格中插入动态数据的下拉框,输入框,日期选择框等需要在table的表头中进行配置,增加template,插入对应的块,在html中使用 script 标签包裹起来
如果使用的下拉框数据需要动态获取,在数据表格中的done函数发送请求,进行处理
详情请看如下代码:
//表格
<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>
沃梦达教程
本文标题为:layui数据表格中插入下拉框以及输入框,日期选择框的办法
基础教程推荐
猜你喜欢
- 前端ajax的各种与后端交互的姿势 2023-02-01
- ajax实现数据删除、查看详情功能 2023-01-31
- layer.open()详细参数对照说明 2023-07-09
- Ajax 传递JSON实例代码 2023-01-31
- 细数Ajax请求中的async:false和async:true的差异 2023-01-26
- 关于Ajax跨域问题及解决方案详析 2023-02-23
- android-SQLite代码段功能实现未在TextView中将文本格式设置为HTML 2023-10-27
- HTML 2023-10-28
- Ajax入门学习教程(一) 2023-01-26
- Vue3.2中setup语法糖的使用教程分享 2023-07-10