00001- layui 表格的默认工具栏添加自定义按钮
首先定义table:
var tableIns = table.render({
elem:'#businessUserListTable'
,url: ctx+'/business/businessUser/query'
,error:admin.error
,cellMinWidth: 80
// ,width:3700
,toolbar: '#businessUserListTable-toolbar'
,defaultToolbar: [{
title: '条件过滤' //标题
,layEvent: 'searchDiv' //事件名,用于 toolbar 事件中使用
,icon: 'layui-icon-search' //图标类名
},
'filter', 'print', 'exports']
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'userName', title: '用户帐号', align: 'center',width:130 }
,{field:'name', title: '姓名', align: 'center',minWidth:130 }
,{field:'department', title: '部门', align: 'center',width:130 }
,{field:'role', title: '角色', align: 'center',width:130 }
,{field:'position', title: '职位信息', align: 'center',width:130 }
,{field:'tel', title: '手机', align: 'center',width:130 }
// ,{field:'sex', title: '性别', align: 'center',width:130,templet:tplSex }
,{field:'isLeader', title: '是否领导', align: 'center',width:130,templet:tplIsLeader }
,{field:'status', title: '状态', align: 'center',width:130,templet:tplStatus}
,{title:'操作', toolbar: '#businessUserListTable-bar', width:180}
]]
,page: true
,limit: 10
,limits: layui.setter.limits
,done: function(res, curr, count){
}
,height: 'full-1'
});
其中defaultToolbar 中的:
{
title: '条件过滤' //标题
,layEvent: 'searchDiv' //事件名,用于 toolbar 事件中使用
,icon: 'layui-icon-search' //图标类名
}
这就是我添加的自定义 搜索按钮。
搜索事件的监听代码:
table.on('toolbar(businessUserListTable)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'addRec':
active.addRec()
break;
case 'delRec':
active.delRec(checkStatus)
break;
case 'searchDiv':
active.searchDiv();
break;
};
});
其中 case 'searchDiv': 与 layEvent: 'searchDiv' 是对应的。
方法的定义如下:
var active = {
searchDiv: function(){
top.layui.admin.popupRight({
id: 'LAY_business_PopupLayer'
,area: '350px'
,success: function(layero,index){
var sexArr = top.layui.dict.options("sex");
var statusArr = top.layui.dict.options("status");
top.layui.view(this.id).render('business/businessUserSearch',$.extend(search_field,{
sexArr:sexArr,
statusArr:statusArr
})).done(
function () {
top.layui.form.render();
}
);
}
});
},
};
00001- layui 表格的默认工具栏添加自定义按钮的更多相关文章
- jqgrid 在表格底部添加自定义按钮
往往我们需要在jqgrid底部的分页行中添加一些自定义按钮,效果如下: 上图中,三个按钮均是自定义添加上的. 1.要新增自定义按钮在表格底部,仍离不开分页div,需要给jqgrid绑定分页方法 2.由 ...
- 富文本编辑器UEditor自定义工具栏(三、自定义工具栏功能按钮图标及工具栏样式简单修改)
导读 富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实 ...
- layui 表格在排序之后没有重新渲染问题
问题描述: 在layui表格中,最后一列增加了操作按钮,并且在某些行设置了样式,但是在排序之后,按钮的点击事件失效了,样式也没有了,可能是没有执行done回调 原因: done回调只有在render和 ...
- ckeditor添加自定义按钮整合swfupload实现批量上传图片
ckeditor添加自定义按钮整合swfupload实现批量上传图片给ckeditor添加自定义按钮,由于ckeditor只能上传一张图片,如果要上传多张图片就要结合ckfinder,而ckfinde ...
- datatable转layui表格【偏原理】
如题这个类负责把datatable转换为layui表格可以显示的内容.适合配合表格url字段的webapi服务端,为其返回响应字符串.代码如下:using System;using System.We ...
- layui表格参数
layui表格对数据进行用table样式展现 举个例子: <!doctype html> <html> <head> <meta charset=" ...
- BootStrap入门教程 (二) :BASE CSS(排版(Typography),表格(Table),表单(Forms),按钮(Buttons))
上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...
- Dynamics CRM2013 任务列表添加自定义按钮
任务列表的command bar 上面添加自定义按钮如下 要注意的是此处的列表不是任务实体而是活动实体,如果你是在任务实体的home栏上面加那你永远看不见按钮的显示,但如果是要在任务的表单界面上加按钮 ...
- Dynamics 365 CRM 添加自定义按钮
在添加自定义按钮之前,我们需要下载这个工具 RibbonWorkbench, 它是专门针对自定义命令栏和Ribbon区域. 下载之后是一个zip压缩包. 怎样安装RibbonWorkbench: Se ...
随机推荐
- 在Eclipse上实现简单的JDBC增删查改操作
在Javaweb的学习里,学到了如何完成简单的增删查改操作,在这里撰写一篇文章以便自己整理回忆. 首先要建立一些包和导入一些文件.建一些类.具体框架如图 编写Product类 public clas ...
- discuz-目录
由于工作原因,开始学习discuz,0基础开发,学了一会总结了一些
- Windows SDK 的 ctype.h 里有一些有用的函数,例如字符串的大小写转换
#define _tolower(c) ((c) - 'A' + 'a') #define _toupper(c) ((c) - 'a' + 'A')
- 怎么在java中关闭一个thread
怎么在java中关闭一个thread 我们经常需要在java中用到thread,我们知道thread有一个start()方法可以开启一个线程.那么怎么关闭这个线程呢? 有人会说可以用Thread.st ...
- Libra教程之:数据结构和存储
文章目录 存储的数据结构 账本历史 账本状态 账户 事件 前面的文章我们知道,libra会把所有的数据都存储在账本中.为了方便业务逻辑和数据的校验,这个存储是以特定的数据结构来实现的,这里我们叫做验证 ...
- CentOS配置Tomcat监听80端口,虚拟主机
2019独角兽企业重金招聘Python工程师标准>>> Tomcat更改默认端口为80 更改的配置文件是: /usr/local/tomcat/conf/server.xml [ro ...
- muduo网络库源码学习————条件变量
muduo里的CountDownLatch类实际上是对条件变量condition进行的封装,既可以用于所有子线程等待主线程发起 "起跑" ,也可以用于主线程等待子线程初始化完毕才开 ...
- 一个简单的wed服务器SHTTPD(7)———— SHTTPD内容类型的实现
//start from the very beginning,and to create greatness //@author: Chuangwei Lin //@E-mail:979951191 ...
- javaweb系统调优方案
1. java代码优化 java代码优化6大原则 : https://blog.csdn.net/bunny1024/article/details/72803708 java代码优化: https: ...
- 从零搭建分布式文件系统MinIO比FastDFS要更合适
前两天跟大家分享了一篇关于如何利用FastDFS组件来自建分布式文件系统的文章,有兴趣的朋友可以阅读下<用asp.net core结合fastdfs打造分布式文件存储系统>.通过留言发现大 ...