LayUI的头部工具栏

layUI如何显示头部工具栏

只需要在原始表格中加入如下代码即可

 toolbar: '#toolbar0',

加入之后的代码为这样，其中，#toolbar0是自定义的js代码块儿，如果无此js代码块儿，则默认显示layUI自带的头部按钮

 table.render({
                    elem: '#commodity', 	//指定原始表格元素选择器（推荐id选择器）
                    url: ******, 					//数据接口
                    page: true, 					//开启分页
                    cellMinWidth: 120,
                    toolbar: '#toolbar0',
                    limit:navTab.pageSize,
                });

效果如下图所示

现在，我们想用自己来自定义的工具按钮，那么我们可以自定义一个上面代码中的js代码块

<script type="text/html" id="toolbar0">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>

注意！！！此时自定义的js代码块的id必须与上面的表格中引用的toolbar的参数一样！！！

看，这就是加了代码块儿之后的效果。

当然，也有人觉得左边的按钮太丑了，那我们也可以使用layUI给我们提供的字体图标，就像右边的几个小图标一样。

<script type="text/html" id="toolbar0">
 	<div class="layui-inline" title="菜单" lay-event="commExport">
 		<i class="layui-icon layui-icon-shrink-right"></i>
	</div>
</script>

效果如下：

字体图标地址：layui字体图标

这是layUI给我们提供的字体图标地址，可以自己去选择想要用的图标，然后在代码中修改相应的标签的class就可以了，改为

<i class="layui-icon layui-icon-face-smile" ></i> 

但是如果想要监听工具栏的点击事件的话就不能用<i>标签了，需要把标签换为<button>或者<a>

 <a class="layui-icon layui-icon-face-smile"></a> 
 <button class="layui-icon layui-icon-face-smile"></button> 

那既然我们可以自己选择图标，那么右边的图标就可以不用了，所以我们可以通过设置属性让右边的图标消失，具体代码如下：

 table.render({
                    elem: '#commodity', 	//指定原始表格元素选择器（推荐id选择器）
                    url: ******, 					//数据接口
                    page: true, 					//开启分页
                    cellMinWidth: 120,
                    toolbar: '#toolbar0',
                    limit:navTab.pageSize,
                    defaultToolbar: [],
                });

只需要在表格属性中加defaultToolbar: [],属性就ok了，这个属性是设置layUI默认的工具栏的，里面的默认值是
defaultToolbar: [‘filter’, ‘print’, ‘exports’]，分别对应默认的三个标签，所以如果不想要就置空，也可以排列属性顺序来排列图标顺序。