在数据表格中插入动态数据的下拉框,输入框,日期选择框等需要在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数据表格中插入下拉框以及输入框,日期选择框的办法
基础教程推荐
猜你喜欢
- CSS3的几个标签速记(推荐) 2024-04-07
- 基于Vue制作组织架构树组件 2024-04-08
- 关于文字内容过长,导致文本内容超出html 标签宽度的解决方法之自动换行 2023-10-28
- Ajax实现动态加载数据 2023-02-01
- vue离线环境如何安装脚手架vue-cli 2025-01-19
- js禁止页面刷新与后退的方法 2024-01-08
- 浅谈Vue2和Vue3的数据响应 2023-10-08
- JS前端广告拦截实现原理解析 2024-04-22
- this[] 指的是什么内容 讨论 2023-11-30
- 浅析canvas元素的html尺寸和css尺寸对元素视觉的影响 2024-04-26
