layui表格设置下拉框
时间: 2023-08-09 12:06:26 浏览: 134
在layui表格中设置下拉框可以使用laytpl模板引擎的方式来实现。具体步骤如下:
1. 在表格的列中定义一个templet模板,例如:
```
{field: 'status', title: '状态', templet: '#statusTpl'}
```
2. 在html中定义下拉框的模板,例如:
```
<script type="text/html" id="statusTpl">
<select name="status">
<option value="0">未审核</option>
<option value="1">已审核</option>
</select>
</script>
```
3. 在JavaScript中使用laytpl模板引擎将模板渲染到表格中,例如:
```
layui.use(['table', 'laytpl'], function(){
var table = layui.table;
var laytpl = layui.laytpl;
// 渲染表格
table.render({
elem: '#demo',
url: '/demo/table/user/',
cols: [[
{field: 'id', title: 'ID', width:80},
{field: 'username', title: '用户名', width:120},
{field: 'email', title: '邮箱', minWidth:150},
{field: 'status', title: '状态', templet: '#statusTpl'},
{field: 'operate', title: '操作', toolbar: '#barDemo', width:150}
]],
page: true
});
// 渲染下拉框模板
laytpl($('#statusTpl').html()).render({}, function(html){
$('#demo').html(html);
});
});
```
以上代码将会在表格中的“状态”列中渲染一个下拉框,并且下拉框中有两个选项:“未审核”和“已审核”。
阅读全文