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 表格的默认工具栏添加自定义按钮相关推荐

layui表格设置默认排序_layui table对表格数据处理后的排序问题
table模块是layui最核心的组成之一,它用于对表格进行一些列功能和动态化数据操作.在 table模块对表格数据处理后排序可能出现问题,本文就来为大家介绍一下解决这种问题的方法. 使用layui ...
layui表格设置默认排序_改造 layui 表格组件实现多重排序
layui 的表格组件目前只支持单列排序,在实际应用中并不能很好的支撑我们的业务需求.今天一时手痒,决定改造一番以支持多重排序. 实现思路也比较简单,只需要用一个数组来存放所有排序的列,再把这个数组传 ...
layUI表格工具栏事件点击后刷新页面解决办法
layUI表格工具栏事件点击后刷新页面的解决办法将默认的按钮<button class="layui-btn" lay-event="事件名">按 ...
layui表格点击按钮下方新增加空白行
layui表格点击按钮下方新增加空白行一.先上代码二.代码解析三.实现业务逻辑分析四.页面展示一.先上代码 html界面代码 js代码二.代码解析这只是我个人的的代码解析,想要得到更详细 ...
layui表格点击排序按钮后，表格绑定事件失效解决方法
layui表格点击排序按钮后,表格绑定事件失效解决方法参考文章: (1)layui表格点击排序按钮后,表格绑定事件失效解决方法 (2)https://www.cnblogs.com/gongliha ...
button layui 点击事件_Layui 带多选框表格监听事件以及按钮自动点击写法实例
不话不多说了,直接上代码吧: 获取选中行数据获取选中数目验证是否全选提交选择 id运动名运动时长运动类型 var msg=""; var idlist="" ...
layui表格中开启复选框后，怎么获取跨页勾选的全部数据，layui表格获取勾选的所有数据，获取跨页勾选数据的数量，如何预渲染让数据默认勾选上？
这个功能layui 本身可能没直接提供给我们相关的功能 ,需要自己写出来了有几个疑点可能要一一排查出来核心点: 能不能有一个状态值能判断当前行的数据是否是勾选状态然后就可以一步一步 ...
layui表格使用：经验总结（含案例、代码、截图）
文章目录 layui表格使用:经验总结(含案例.代码.截图) 一.原生table案例 1.1. 原生table案例 · 效果截图: 1.2. 原生table案例 · 代码示下: 二.案例转化:layu ...
layui表格使用之重载
layui表格使用之重载(reload) 近期由于项目使用到layui,所以下班后花了点时间学习了一下layui ,记录分享一下学习心得与踩坑经验需求描述: 按照创建时间查询xxx表数据需要支持条件 ...

00001- layui 表格的默认工具栏添加自定义按钮

00001- layui 表格的默认工具栏添加自定义按钮相关推荐

最新文章

热门文章