在layui 中表格单元格中插入下拉框

最新推荐文章于 2025-07-05 10:11:32 发布

原创

最新推荐文章于 2025-07-05 10:11:32 发布 · 2.7w 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#layui #表格加下拉框

本文记录了在layui框架中如何在表格的单元格内插入下拉框，通过自定义模板生成select节点，并在done回调中使用form.render('select')进行渲染。需要注意表格的默认样式可能会影响下拉菜单的显示，需要额外处理。

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

这个实现采用了layui 社区一位大神的代码，在此感谢大神的分享，我自己做个记录，也给使用layui 的小伙伴们做一个分享。
思路是这样的

可以使用自定义模板返回select节点然后在done回调中form.render(‘select’);然后还有一个需要注意的是默认td 超出是不显示的，所以你会发现form渲染之后select出来了，但是点击下拉的菜单会看不到，需要处理一下。

代码也贴出来

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="js/layui/src/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
 
<button class="layui-btn" id="getCheckedData">获得表格选中行</button>
<table id="grid" lay-filter="grid"></table>
 
<script src="js/layui/src/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，