【layui】table使用下拉控件dropdown

原创已于 2025-06-10 16:05:26 修改 · 4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript

于 2022-09-21 15:19:46 首次发布

layui 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用layui框架实现的下拉控件示例。通过该示例可以了解如何在表格中添加带有更多操作选项的下拉菜单，并为每个表格行提供特定的状态选择。示例中详细展示了所需的HTML结构、JavaScript配置及事件绑定。

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

下拉控件dropdown文档 http://layuidropdown.microanswer.cn/.
在这里插入图片描述

<style>
.lay_menu>li{ cursor: pointer; height: 36px; line-height: 36px; }
.lay_menu>li:hover{ background: #f6f6f6; transition: 0.5s all; }
.lay_menu>li.layui_this{ background: #5FB878; color: #fff; }
</style>

<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="barDemo">
     <a class="layui-btn layui-btn-xs" lay-filter="more" lay-dropdown="{template: '#table1toolMenu'}">更多操作 <i class="layui-icon layui-icon-down"></i></a>
</script>
<script id="table1toolMenu" type="text/html">
     <ul class="layui-dropdown-menu lay_menu">
         <li lay-event="getCheckData">获取选中行数据</li>
         <li lay-event="getCheckLength">获取选中数目</li>
         <li lay-event="isAll">验证是否全选</li>
     </ul>
 </script>
        
<script>
createScript("/static/admin/src/controller/dropdown/dropdown.js");
layui.use(['admin', 'table', 'view', 'form', 'layer', 'setter', 'dropdown'], function () {
    var $ = layui.$
        ,admin = layui.admin
        ,form = layui.form
        ,view = layui.view
        ,layer = layui.layer
        ,setter = layui.setter
        ,table = layui.table
        ,dropdown = layui.dropdown
        ,router = layui.router();
        
     table.render({
	    elem: '#test'
	    ,url:'../../test/table/demo1.json.js'/*tpa=http://www.layui.com/test/table/demo1.json*/
	    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
	    ,cols: [[
	      {type: 'checkbox', fixed: 'left'}
	      ,{field:'sex', title:'性别', width:80, edit: 'text'}
	      ,{field:'city', title:'城市', width:100}
	      ,{field:'sign', title:'签名'}
	      ,{field:'experience', title:'积分', width:80}
	      ,{field:'ip', title:'IP', width:120}
	      ,{field:'logins', title:'登入次数', width:100}
	      ,{field:'joinTime', title:'加入时间', width:120}
	      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
	    ]]
	    ,page: true
        ,done: function (res, curr, count) {
			// 按钮--更多操作
            dropdown.suite("[lay-filter='more']", {
                minWidth: 130,
                onShow: function ($maker, $down) {
                    $maker.next().find('.dropdown-pointer').remove();
                },
            });
            // 在表格渲染完成后进行下拉框渲染。
            for (var i = 0; i < res.data.length; i++) {
                drop_data.compl_status=res.data[i].compl_status;
                drop_data.compl_list=compl_list;
                dropdown.suite("[lay-filter='ft"+res.data[i].id+"']", {
                    data: drop_data,
                    minWidth: 130,
                    onShow: function ($maker, $down) {
                        $maker.parent(".layui-form-select").addClass('layui-form-selected');
                    },
                    onHide: function ($maker, $down) {
                        $maker.parent(".layui-form-select").removeClass('layui-form-selected');
                    },
                    success: function ($dom) {
                        $dom.parent(".layui-form-select").find(".lay_menu li").click(function (_item) {
                            var _id = $dom.prev().attr('data-pid');
                            var _status = $(this).attr('data-id');
                            var filter = $dom.prev().attr('lay-filter');
                            $(this).addClass('layui_this').siblings().removeClass('layui_this');
                            $dom.prev().val($(this).attr('data-name'));
                            
                            dropdown.hide("[lay-filter='"+filter+"']");
                        });
                        form.render();
                    }
                });
            }
		}
	  });