layui table中点击新增一行有下拉框
时间: 2023-09-25 18:15:27 浏览: 154
layui树形下拉菜单
5星 · 资源好评率100%
你可以使用 layui 的 form 模块来实现下拉框的功能。具体的实现步骤如下:
1. 在 table 的列定义中,为需要使用下拉框的列添加一个 templet 属性,用于指定该列的显示模板。
例如:
```javascript
[
{field: 'name', title: '姓名'},
{field: 'gender', title: '性别', templet: '#genderTpl'},
{field: 'city', title: '城市', templet: '#cityTpl'}
]
```
2. 在页面中定义一个模板,用于生成下拉框的 HTML 代码。
例如:
```html
<script type="text/html" id="genderTpl">
<select name="gender">
<option value="0">男</option>
<option value="1">女</option>
</select>
</script>
<script type="text/html" id="cityTpl">
<select name="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
</script>
```
3. 在 table 的 renderComplete 回调函数中,调用 form 模块的 render 方法,用于渲染表格中的下拉框。
例如:
```javascript
table.render({
// ...
cols: [
[
{field: 'name', title: '姓名'},
{field: 'gender', title: '性别', templet: '#genderTpl'},
{field: 'city', title: '城市', templet: '#cityTpl'}
]
],
// ...
done: function (res, curr, count) {
form.render(); // 渲染下拉框
}
});
```
这样就可以实现在 layui table 中点击新增一行时,带有下拉框的功能了。
阅读全文