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

2024-06-12前端开发问题
146

首先定义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();
                      }
                  );
              }
          });
      },
  };
The End

相关推荐

layui实现laydate日历控件控制之前日期不可选择
具体实现代码如下: laydate.render({ elem: '#start_time', min:0, //,type: 'date' //默认,可不填}); 只要加一个min参数,就可以控制了。0表示之前的日期不可...
2024-11-29 前端开发问题
133

如何使用百度地图API获取地理位置信息
首先,我们需要在百度地图开放平台上申请一个开发者账号,并创建一个应用。在创建应用的过程中,我们会得到一个密钥(ak),这是调用API的凭证。 接下来,我们需要准备一个PHP文件,以便可以在网页中调用。首先,我们需要引入百度地图API的JS文件,代码如下...
2024-11-22 前端开发问题
244

ajax请求获取json数据并处理的实例代码
ajax请求获取json数据并处理的实例代码 $.ajax({ type: 'GET', url: 'https://localhost:44369/UserInfo/EditUserJson',//请求数据 data: json,//传递数据 //dataType:'json/text',//预计服务器返回的类型 timeout: 3000,//请求超时的时间 //回调函数传参 suc...
2024-11-22 前端开发问题
215

js删除数组中指定元素的5种方法
在JavaScript中,我们有多种方法可以删除数组中的指定元素。以下给出了5种常见的方法并提供了相应的代码示例: 1.使用splice()方法: let array = [0, 1, 2, 3, 4, 5];let index = array.indexOf(2);if (index -1) { array.splice(index, 1);}// array = [0,...
2024-11-22 前端开发问题
182

layui 实现实时刷新一个外部的div
主页面上显示了一个合计,在删除和增加的时候需要更改这个总套数的值: //html代码div class="layui-inline layui-show-xs-block" style="margin-left: 10px" id="sumDiv"spanSOP合计:/spanspan${totalNum}/spanspan套/span/div 于是在我们删除这个条数据后,...
2024-11-14 前端开发问题
156

layui 单选框、复选框、下拉菜单不显示问题如何解决?
1. 如果是ajax嵌套了 页面, 请确保 只有最外层的页面引入了layui.css 和 layui.js ,内层页面 切记不要再次引入 2. 具体代码如下 layui.use(['form', 'upload'], function(){ var form = layui.form; form.render(); // 加入这一句});...
2024-11-09 前端开发问题
313