layui 的数据表单的defaultToolbar参数中筛选列，图标，打印，三个功能，调用单独拿出使用

L_Augety

已于 2024-01-27 20:15:36 修改

阅读量1w

点赞数 17

分类专栏： layui 文章标签： layui 前端 javascript

于 2022-08-11 22:49:45 首次发布

本文链接：https://blog.csdn.net/l_augety/article/details/126293852

版权

layui 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

项目场景：

参数之defaultToolbar：`

在使用layui开发的过程中，常常会用到数据表单这一关键模块，在这里讲一下defaultToolbar:['filter',exports 'print']-------“头部工具栏右侧图标”，如何将这三个按钮调用出来，给自己的按钮使用！！

问题描述

只能调用用layui中的defaultToolbar:['filter',exports 'print']参数才能使用三个功能么？答案：不！

例如：平常使用layui数据表单，defaultToolbar参数根据文章中的提示调用

<!-- 摘抄layui 数据表格文档模板内容 -->


<body>
 
<table id="demo" lay-filter="test"></table>
 
<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 312
    ,url: '/static/json/table/user.json' //数据接口
    ,defaultToolbar:['filter',  'exports','print']  //本章讲述的参数！！！！！！！！！！
    ,title:'打印按钮标题内容' 
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80}

  });
  
});
</script>
</body>
</html>

在这里插入图片描述

解决方案：

记住这三个class 样式

筛选列： lay-event="LAYTABLE_COLS"
导出： lay-event="LAYTABLE_EXPORT"
打印： lay-event="LAYTABLE_PRINT"

前端html

先写三个按钮

        <button type="button" class="layui-btn layui-btn-sm " >筛选列</button>  
        <button type="button" class="layui-btn layui-btn-sm ">导出</button>
        <button type="button" class="layui-btn layui-btn-sm">打印</button>

在这里插入图片描述

给上面三个按钮，分别引用到每个<button class=''></button> 中

筛选列： lay-event="LAYTABLE_COLS"
导出： lay-event="LAYTABLE_EXPORT"
打印： lay-event="LAYTABLE_PRINT"
引入后代码：

 <button type="button" class="layui-btn layui-btn-sm " lay-event="LAYTABLE_COLS">筛选列</button>

<button type="button" class="layui-btn layui-btn-sm " lay-event="LAYTABLE_EXPORT" >导出</button>
   
 <button type="button" class="layui-btn layui-btn-sm" lay-event="LAYTABLE_PRINT" >打印</button>

效果：

因为调用layui组件，所以每个功能和以往一样，只是换了个按钮而已~~~

筛选列：

在这里插入图片描述
导出：

··

嗯？问题来了，怎么点击按钮后，弹出框是空白的？？？

其实有两个按钮，只不过弹框里的字体颜色和背景颜色同样是白色，混色了，所以看不见，如果你拿鼠标触碰一下，会有两个选框的。

怎么解决？
加个样式，改一下字体颜色就行了，
为了方便查看。我这里改了按钮字体颜色和按钮背景
代码：
class="layui-btn-warm layui-btn-sm layui-red"

 <button type="button" class="layui-btn-warm layui-btn-sm layui-red" lay-event="LAYTABLE_EXPORT" >导出</button>

如图：
在这里插入图片描述
然后就出来了：
因为我用的字体颜色是黑色layui-btn-warm所以里面字体颜色也是黑色

点击后，两个导出的文本格式选项就不用我演示了吧，自己点去吧，哈哈，，和layui组件一样

打印：
又重新粘贴了遍代码，就不演示，能正常操作，弹窗打印，自己尝试吧

<button type="button" class="layui-btn layui-btn-sm" lay-event="LAYTABLE_PRINT" >打印</button>

总结

：
就是调用这三个属性
筛选列： lay-event="LAYTABLE_COLS"
导出： lay-event="LAYTABLE_EXPORT"
打印： lay-event="LAYTABLE_PRINT"

好啦，到此为止啦，小伙伴们去尝试一下吧~~~~

L_Augety

关注

17
点赞
踩
24

收藏

觉得还不错? 一键收藏
打赏
6
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录