layui下拉菜单的按钮组(数据表格表头版)

news/2024/7/11 1:50:01 标签: javascript, html, jquery, 前端

layui下拉菜单的按钮组(数据表格表头版)
最近工作中需要使用layui在数据表格的表头工具栏里添加一个下拉按钮组,layui目前还没有开发出相关的功能,所以需要自己手动拼写,在参考了博友们的部分文章后,做了一部分的改动,实现了基本的需求,即下拉按钮组,点击切换功能,注意是需要通过点击进行下拉展示和收起,也就是div的隐藏和显示,实现的思路其实比较简单,博友们如果有更好的方式欢迎留言

html

<script type="text/html" id="toolbar">
    <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
        <ul class="layui-nav layui-bg-blue btnz" lay-filter="" style="font-size: 12px;border-radius: 0px;float: right;padding:0px 0px 0px 0px;margin-left: 2px;">
            <li class="layui-nav-item" style="line-height: 30px;font-size: 12px;">
                <a  style="color:white;font-size: 12px;padding: 2px 30px 3px 20px;letter-spacing:1px;" id="exportClick">导出<span class="layui-nav-more" style="right: 10px;font-size: 12px;" ></span></a>
                <dl class="layui-nav-child" style="top: 30px;line-height: 30px;padding: 0px 0px 0px 0px;" id="exportEncrypt"> <!-- 二级菜单 -->
                    <dd>
                        <button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-fluid" id="exportPerson" lay-event="exportPerson">个人</button>
                    </dd>
                    <dd>
                        <button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-fluid" id="exportUnit" lay-event="exportUnit">单位</button>
                    </dd>
                </dl>
            </li>
        </ul>
</script>

js:
$("#exportClick").click(function(e) {
$("#exportEncrypt").toggle();
});
效果:
在这里插入图片描述
附:本人参考另一位博主的方法:https://blog.csdn.net/qq493820798/article/details/89963957


http://www.niftyadmin.cn/n/1332670.html

相关文章

使用mysqldump命令导出指定数据库的数据+Java实现数据库的一键导出备份

由于项目中需要用到在页面添加一个一键数据备份的功能&#xff0c;所以选择使用mysqldump命令的方法&#xff0c;用java的运行时类Java.lang.Runtime来使用后台窗口&#xff0c;记录下整个实现的过程&#xff1b; 1.首先mysqldump命令需要在mysql的bin目录下执行&#xff0c;这…

js中给页面添加水印方法

调用方法时传递的参数数量可以自行设置&#xff1a; watermark(参数1,参数2,参数3);function watermark(t1, t2, t3) {var maxWidth document.documentElement.clientWidth;var maxHeight document.documentElement.clientHeight;// 间隔宽度var intervalWidth 240;// 间隔…

通过文件路径获取文件(pdf/doc/docx/xls/xlsx)并输出文件内容

最近在开发过程中&#xff0c;遇到了需要将附件中的文本读出存储到数据库中的问题&#xff0c;下面就记录一下各个格式文本的读取方式&#xff0c;大家按需索取&#xff0c;如有不明白的地方&#xff0c;欢迎留言讨论。 String filePath “你的文件路径";注意&#xff0…

js实现仿浏览器Ctrl+F全局模糊搜索并高亮显示

话不多说&#xff0c;直接上代码&#xff1a;html&#xff1a; <div class"input-group searchDiv"><input class"layui-input layui-input-sm layui-inline" type"text" id"keyWord" autocomplete"off…

面试今日头条好不容易到了三面却跪到了源码上(灬ꈍ ꈍ灬)

最近&#xff0c;我的一位朋友在找工作&#xff0c;已经拿到了美团、快手等公司的Offer&#xff0c;准备选择其中一家入职了。后来他又接到了字节跳动的电话&#xff0c;通知他去参加三面。从二面到三面之间隔了挺久的&#xff0c;他以为都没戏了&#xff0c;结果就收到了通知。…

推荐几个阿里,百度大佬的订阅号给大家

公众号发展到今天&#xff0c;其种类和数量繁多&#xff0c;经常看的人眼花缭乱&#xff0c;技术圈也不例外&#xff0c;要从中挑出值得信赖的原创作者与优质内容&#xff0c;是一件很费精力的事情。所以&#xff0c;今天给大家精心推荐一些行业里做的非常用心的原创公众号&…

Css3旋转的效果

开发工具与关键技术&#xff1a;DW rotate()、keyframes 撰写时间&#xff1a;2019年1月18日 1、在Css3中用rotate()函数通过指定的角度参数使元素相对原点进行旋转来实现的画效果时&#xff0c;你会发现当它在旋转的过程中是不会有停顿的现象&#xff0c;会一直旋转到设置的…