00001-layui 테이블의 기본 도구 모음에 사용자 정의 단추 추가

3471 단어 layui
먼저 테이블을 정의합니다.
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();
                      }
                  );
              }
          });
      },
  };

좋은 웹페이지 즐겨찾기