在数据表格中插入动态数据的下拉框,输入框,日期选择框等需要在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上传图片到PHP并压缩图片显示的方法 2023-02-15
- JS循环中正确使用async、await的姿势分享 2023-08-12
- 完美实现CSS垂直居中的11种方法 2022-11-13
- CocosCreator Typescript制作俄罗斯方块游戏 2023-08-08
- vue.js 编译作用域 2023-10-08
- $.ajax中contentType: “application/json” 的用法详解 2023-02-23
- 元素水平居中方案全集 2022-10-16
- VUE3.0-对比VUE2.X和VUE3.0的响应式 2023-10-08
- 【Layui】当Layui数据表格和Layui下拉框组合时发生的问题 2022-12-14
- 我如何用innerhtml中的ajax和php更新mysql数据库 2023-10-26