Layui的table中使用select

最新推荐文章于 2025-07-10 17:20:02 发布

脱离语言

最新推荐文章于 2025-07-10 17:20:02 发布

阅读量1.5w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： Layui 穿梭框

本文链接：https://blog.csdn.net/yjh4866/article/details/92839385

JavaScript 同时被 2 个专栏收录

23 篇文章

订阅专栏

Layui

1 篇文章

订阅专栏

博主用Layui做前端开发时遇到诸多问题并解决。如因项目要求用第三方穿梭框，修改代码支持两表列定义，处理按钮禁用属性，用模板实现右表列下拉框，从服务端动态获取下拉框数据，解决下拉框显示问题等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这段时间用Layui做前端开发，遇到不少问题，已圆满解决，记录如下：

1、穿梭框

Layui从2.5.0版本增加了穿梭框，但项目要求左右两边均是表格，无奈只好使用第三方的穿梭框。

2、左右两边的表列数显示不一样

在原代码的基础上修改，使之支持两表的列定义。

3、未选择行，两表中间的按钮依然可以点击

由于原按钮显示状态是完全正确的，只是无选中的行时按钮未禁用，所以只需要在相应的按钮上用removeAttr和attr移除禁用属性和添加禁用属性。

4、右表某一列需要显示下拉框

对应列使用模板实现。

5、下拉框中的数据是从服务端动态获取的

模板中使用laytpl即可实现。

6、下拉框只能显示在td中，无法完整显示

增加样式如下：

.layui-table-cell{
    overflow: visible;
}
.layui-layer-tips{
    display: none
}
/* 设置下拉框的高度与表格单元相同 */
td .layui-form-select{
    margin-top: -10px;
    margin-left: -15px;
    margin-right: -15px;
}

7、模板代码中给select标签增加data-属性，用于保存对象的id值。下拉框选择时会触发以下代码：

form.on('select(xxx)',function(data){
// 通过data.elem.dataset可以得到保存的对象id
// data.elem.value可以得到下拉框选择的文本
}