layui table中加下拉框
时间: 2023-09-11 15:05:06 浏览: 70
在 layui 的 table 中加入下拉框可以通过使用 layui 的 form 模块中的 select 组件来实现。
具体步骤如下:
1. 在 table 的列定义中添加一个自定义列,用来显示下拉框。
```javascript
cols: [
[
{field: 'id', title: 'ID'},
{field: 'name', title: '姓名'},
{field: 'gender', title: '性别'},
{field: 'city', title: '城市'},
{field: 'hobby', title: '爱好'},
{
field: 'dropdown', title: '下拉框', templet: function (d) {
return '<select name="dropdown" lay-filter="dropdown" data-id="' + d.id + '"></select>';
}
}
]
]
```
2. 在页面加载完毕后,通过 ajax 请求获取下拉框的选项数据,并将数据渲染到 select 组件中。
```javascript
layui.use(['table', 'form'], function () {
var table = layui.table;
var form = layui.form;
// 渲染表格
table.render({
elem: '#demo',
url: '/demo/table/user/',
cols: [
// 列定义
],
page: true
});
// 监听下拉框的变化
form.on('select(dropdown)', function (data) {
var id = data.elem.getAttribute('data-id');
var value = data.value;
// TODO: 将下拉框的值保存到数据库中
});
// 页面加载完毕后,请求下拉框的选项数据,并渲染到下拉框中
$.ajax({
url: '/demo/select/options/',
success: function (data) {
var options = '<option value="">请选择</option>';
for (var i = 0; i < data.length; i++) {
options += '<option value="' + data[i].value + '">' + data[i].label + '</option>';
}
$('select[name="dropdown"]').html(options);
form.render('select');
}
});
});
```
其中,form.on('select(dropdown)', function (data) {}) 监听了下拉框的变化事件,可以在这个事件中将下拉框的值保存到数据库中。另外,通过 ajax 请求获取下拉框的选项数据,并将数据渲染到下拉框中,需要注意的是,由于 layui 采用了异步模块加载方式,所以在页面加载完毕后需要手动调用 form.render('select') 方法来渲染下拉框。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)