layui自定义工具栏的方法

给大家分享的功能是layui自定义工具栏

功能效果：开启数据表格头部工具栏区域

关键参数：toolbar

参数类型：String/DOM/Boolean

参数说明：

toolbar: ‘#toolbarDemo' //指向自定义工具栏模板选择器

toolbar: ‘<div>xxx</div>' //直接传入工具栏模板字符

toolbar: true //仅开启工具栏，不显示左侧模板

toolbar: ‘default' //让工具栏左侧显示默认的内置模板

在这里我用的是第一种toolbar:'#toolbarDemo'，就是调用自己定义的工具栏的模板选择器

功能效果图：

已封装好的自定义工具栏模板选择器：

<script type="text/html" id="toolbarDemo">
 <div class="layui-btn-container">
 <button class="layui-btn layui-btn-sm" lay-event="getSelect">查询</button>
 <button class="layui-btn layui-btn-sm" lay-event="getInsert">新增</button>
 <button class="layui-btn layui-btn-sm" lay-event="getUpdate">修改</button>
 <button class="layui-btn layui-btn-sm" lay-event="getDelete">删除</button>
 <button class="layui-btn layui-btn-sm" lay-event="getRefresh">刷新</button>
 </div>
</script>

调用方法：

首先得引用jquery和layui的css样式、js样式

<link href="~/Contents/assets/layui/css/layui.css" rel="external nofollow" rel="stylesheet" />
<script src="~/Contents/js/jquery-3.3.1.min.js"></script>
<script src="~/Contents/assets/layui/layui.all.js"></script>

layui.use('table', function () {
 var table = layui.table;
 table.render({
 elem: '#table',
 url: 'SelectDepartment', //数据接口
 page: true, //开启分页
 cols: [[ //表头
  { type: 'numbers', title: '序号', align: 'center', width: 100 },
  { field: 'DepartmentNumber', title: '部门编号', align: 'center' },
  { field: 'Department', title: '部门名称', align: 'center' }
 ]],
 id: 'table',
 toolbar: '#toolbarDemo',//开启自定义工具行，指向自定义工具栏模板选择器
 defaultToolbar: ['filter', 'print', 'exports']
 });
});

上面的toolbar: '#toolbarDemo'这句代码是这个功能的关键代码

以上这篇layui自定义工具栏的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于Layui自定义模块的使用方法详解

    layui是一个极其不错的前端UI框架.是后端程序员的福音.总之如果你是一个后端开发者.如果你苦于你的界面"惨不忍睹".选择layui来开发是个极好的选择. 之前的项目也有使用过layui.只是没有过多的关注其框架本身.对于项目上.拿来即用即可! 为什么要自定义模块呢?好处很多.比如可以大量重用代码...... 我也是一个极其懒惰的人.总是想办法让代码可重用 根据layui官方的文档说明.首先第一步是要确定你要扩展的模块名称 我现在做的是登录功能.因此我的扩展模块名叫 login 使用

  • layui监听工具栏的实例(操作列表按钮)

    废话不多说,直接上代码吧! <table id="demo" lay-filter="test"></table> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit">查看详情</a> </scr

  • 解决layui调用自定义方法提示未定义的问题

    问题: layui.use(['layer', 'form', 'element'], function(){ var layer = layui.layer ,form = layui.form ,element = layui.element function test(){ //JS代码 } }); 调用test()时提示未定义 解决办法: layui.use(['layer', 'form', 'element'], function(){ var layer = layui.layer

  • layui自定义工具栏的方法

    给大家分享的功能是layui自定义工具栏 功能效果:开启数据表格头部工具栏区域 关键参数:toolbar 参数类型:String/DOM/Boolean 参数说明: toolbar: '#toolbarDemo' //指向自定义工具栏模板选择器 toolbar: '<div>xxx</div>' //直接传入工具栏模板字符 toolbar: true //仅开启工具栏,不显示左侧模板 toolbar: 'default' //让工具栏左侧显示默认的内置模板 在这里我用的是第一种to

  • layui table 参数设置方法

    JSp: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" +

  • vue-quill-editor 自定义工具栏和自定义图片上传路径操作

    背景: 1.某些场景下vue-quill-editor默认的工具栏部分功能不希望出现,需要删除部分功能. 2.vue-quill-editor默认提供的图片上传方案是将图片转成base64存放到内容区,这会导致content字符长度太长,不一定可以传到后台保存(其实即使可以保存也不推荐这种方案).所以我们需要将方案修改为将图片上传到服务器,然后通过URL的 方式访问到图片回显及使用. vue-quill-editor工具栏改造及自定义图片上传(这里使用的是element-ui的上传组件): 引入

  • AngularJS基于factory创建自定义服务的方法详解

    本文实例讲述了AngularJS基于factory创建自定义服务的方法.分享给大家供大家参考,具体如下: 为什么要创建自定义服务? 很简单,不想让控制器显得过于"臃肿",而且服务可复用.针对性强,每个服务对应不同的功能. 这里介绍如何使用factory创建自定义服务,并且使用他. 例子1: <!--HTML--> <div ng-controller="showTheName"> <h1 ng-bind="name"

  • AngularJS创建自定义指令的方法详解

    本文实例讲述了AngularJS创建自定义指令的方法.分享给大家供大家参考,具体如下: 这是一篇译文,来自angular开发者说明的指令.主要面向已经熟悉angular开发基础的开发者.这篇文档解释了什么情况下需要创建自己的指令,和如何去创建指令. 什么是指令 从一个高的层面来讲,指令是angular $compile服务的说明,当特定的标签(属性,元素名,或者注释) 出现在DOM中的时候,它让编译器附加指定的行为到DOM上. 这个过程是很简单的.angular内部有很用这样自带的指令,比如说n

  • wamp安装后自定义配置的方法

    WampServer是目前应用非常广泛的PHP集成开发环境,本文就来讲述Wamp安装后自定义配置的方法.供大家参考借鉴.具体如下: wamp2.5安装完毕后,自己手动重新设置了apache的默认根目录.但是发现本机可以访问,别人不能访问. 提示信息为:Forbidden  you dont hava permission to access * on the server 表示你没有权限访问! 这是比较常见的问题,应该只需修改目录的权限就可以了. 搜索网上讲述的很多方法后发现,都是说把有'den

  • PHP实现创建微信自定义菜单的方法示例

    本文实例讲述了PHP实现创建微信自定义菜单的方法.分享给大家供大家参考,具体如下: 在使用通用接口前,你需要做以下两步工作: 1.拥有一个微信公众账号,并获取到appid和appsecret(在公众平台申请内测资格,审核通过后可获得) 2.通过获取凭证接口获取到access_token 注意: access_token是第三方访问api资源的票据: access_token对应于公众号是全局唯一的票据,重复获取将导致上次获取的access_token失效. 访问下面这个地址(注意替换你的appi

  • Yii视图操作之自定义分页实现方法

    本文实例讲述了Yii视图操作之自定义分页实现方法.分享给大家供大家参考,具体如下: 1. 视图文件调用cgridview,clistview时候调用自定义的分页方法 <?php $this->widget('zii.widgets.grid.CGridView', array( 'id'=>'news-grid', 'dataProvider'=>$model->search(), 'filter'=>$model, 'template'=>'{items}{su

  • thinkPHP自定义类实现方法详解

    thinkPHP自定义类实现方法详解

    本文实例讲述了thinkPHP自定义类实现方法.分享给大家供大家参考,具体如下: 1.通过Model调用 <?php /** * 积分模型 api接口 */ class ApiModel{ private $url = 'http://js.yunlutong.com/Customer/Interface'; public function test() { $post_data['action'] = 'sadf'; $post_data['callback'] = '?'; $res = r

随机推荐