用到 dropdown 控件：
地址：
http://test.microanswer.cn/page/dropdown.html
引入 css,js:
<link rel="stylesheet" href="${ctxLayui}/layuiadmin/style/dropdown.css" media="all">layui.config({base: '${ctxLayui}/layuiadmin/'
}).extend({index: 'lib/index'}).use(['index', 'table','dict','laydate','util','element','dropdown'], function(){
var $ = layui.$,table = layui.table,form = layui.form;
var dict = layui.dict;
var laydate = layui.laydate;
var admin = layui.admin;
var util = layui.util;
var element = layui.element;
var dropdown = layui.dropdown;操作列模板：
<script id="myCompanyList-bar" type="text/html">
<button class="layui-btn layui-btn-xs" lay-filter="ft{{d.id}}" lay-dropdown="{template:'#bar_content',maxHeight:'600px;'}" >
<span> 操作 </span>
<i class="layui-icon layui-icon-triangle-d"></i>
</button>
</script>bar_content 即为下拉多级按钮，也是模板：
<script id="bar_content" type="text/html">
<div style="width:170px;">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title" lay-event="header_h1" style="text-align:left;padding-left:8px;"><i class="layui-icon layui-icon-down"></i> 税务查问 </h2>
<div class="layui-colla-content" lay-event="showTaxInfo" style="text-align:left;"> 税务注销 </div>
<div class="layui-colla-content" lay-event="showTaxCategory" style="text-align:left;"> 认定治理 </div>
<div class="layui-colla-content" lay-event="showTaxLevyOverdue" style="text-align:left;"> 申报征收查问 </div>
<div class="layui-colla-content" lay-event="showTaxSocialReocrd" style="text-align:left;"> 社保注销查问 </div>
<div class="layui-colla-content" lay-event="showTaxTicket" style="text-align:left;"> 发票业务 </div>
<div class="layui-colla-content" lay-event="showTaxLllegal" style="text-align:left;"> 守法违章 </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title" lay-event="header_h2" style="text-align:left;padding-left:8px;"><i class="layui-icon layui-icon-down"></i> 账务治理 </h2>
<div class="layui-colla-content" lay-event="showAccountNote" style="text-align:left;"> 做账要求 </div>
<div class="layui-colla-content" lay-event="showAccount" style="text-align:left;"> 做账记录 </div>
<div class="layui-colla-content" lay-event="showAccountProfile" style="text-align:left;"> 账务详情（年）</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title" lay-event="header_h3" style="text-align:left;padding-left:8px;"><i class="layui-icon layui-icon-down"></i> 服务中心 </h2>
<div class="layui-colla-content" lay-event="showContacts" style="text-align:left;"> 联系人 </div>
<div class="layui-colla-content" lay-event="showServiceItem" style="text-align:left;"> 业务服务 </div>
<div class="layui-colla-content" lay-event="showException" style="text-align:left;"> 异样业务 </div>
<div class="layui-colla-content" lay-event="showItemWorkDetail" style="text-align:left;"> 服务进度 </div>
<div class="layui-colla-content" lay-event="showServiceUser" style="text-align:left;"> 服务人员 </div>
<div class="layui-colla-content" lay-event="showOrder" style="text-align:left;"> 合同记录 </div>
<div class="layui-colla-content" lay-event="showTask" style="text-align:left;"> 工作记录 </div>
<div class="layui-colla-content" lay-event="showWorkTask" style="text-align:left;"> 工单记录 </div>
<div class="layui-colla-content" lay-event="showPaper" style="text-align:left;"> 证照信息 </div>
<div class="layui-colla-content" lay-event="showQuality" style="text-align:left;"> 公司资质 </div>
<div class="layui-colla-content" lay-event="showAccountNumber" style="text-align:left;"> 账号信息 </div>
<div class="layui-colla-content" lay-event="showAddressee" style="text-align:left;"> 收件人 </div>
<div class="layui-colla-content" lay-event="showCompanyNoticeEvent" style="text-align:left;"> 告诉事件 </div>
<div class="layui-colla-content" lay-event="showCompanyWarn" style="text-align:left;"> 公司预警 </div>
<div class="layui-colla-content" lay-event="showCompanyTag" style="text-align:left;"> 公司标签 </div>
<div class="layui-colla-content" lay-event="showLog" style="text-align:left;"> 操作日志 </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title" lay-event="header_h4" style="text-align:left;padding-left:8px;"><i class="layui-icon layui-icon-down"></i> 业务管理 </h2>
<div class="layui-colla-content" lay-event="signOrder" style="text-align:left;"> 增加合同 </div>
<div class="layui-colla-content" lay-event="renewOrder" style="text-align:left;"> 续费合同 </div>
<div class="layui-colla-content" lay-event="addTask" style="text-align:left;"> 增加工作单 </div>
<div class="layui-colla-content" lay-event="addWorkTask" style="text-align:left;"> 添加工单 </div>
<div class="layui-colla-content" lay-event="addException" style="text-align:left;"> 标记异样 </div>
<div class="layui-colla-content" lay-event="recover" style="text-align:left;"> 复原服务 </div>
<div class="layui-colla-content" lay-event="editServiceDate" style="text-align:left;"> 批改服务工夫 </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title" lay-event="header_h5" style="text-align:left;padding-left:8px;"><i class="layui-icon layui-icon-down"></i> 税务治理 </h2>
<div class="layui-colla-content" lay-event="showDeclareRecord" style="text-align:left;"> 申报记录 </div>
<div class="layui-colla-content" lay-event="showSalary" style="text-align:left;"> 员工工资 </div>
<div class="layui-colla-content" lay-event="showSocial" style="text-align:left;"> 员工社保 </div>
<div class="layui-colla-content" lay-event="showProvidentFund" style="text-align:left;"> 员工公积金 </div>
<div class="layui-colla-content" lay-event="showInvoice" style="text-align:left;"> 开票治理 </div>
</div>
</div>
</div>
</script>表格 js:
var elemId = "myCompanyList";
var tableIns = table.render({
elem:'#'+elemId
,url: ctx+'/company/company/queryMy'
,error:admin.error
,cellMinWidth: 80
,toolbar: '#'+elemId+'-toolbar'
,defaultToolbar: [{
title: '条件过滤' // 题目
,layEvent: 'searchDiv' // 事件名，用于 toolbar 事件中应用
,icon: 'layui-icon-search' // 图标类名
},
'filter']
,cols: [[{width: 100, align:'center', toolbar: '#'+elemId+'-bar'}
// {width: 100, align:'center', toolbar: '#test2'}
// ,{field:'contacts', title: 'test', align: 'center',width:200,templet:"#test1",hide:true}
,{field:'name', title: '公司名称', align: 'center',minWidth:200 ,templet:tplName}
,{field:'contacts', title: '联系人', align: 'center',width:130}
,{field:'mobile', title: '联系电话', align: 'center',width:130}
,{field:'issueTime', title: '注册工夫', align: 'center',width:160,templet:tplIssueTime}
,{field:'regionName', title: '所属区域', align: 'center',width:130}
,{field:'industry', title: '行业分类', align: 'center',width:130}
,{field:'serviceBeginDate', title: '服务起止工夫', align: 'center',width:160,templet:tplServiceBeginDate}
,{field:'serviceBeginDate', title: '到期剩余时间', align: 'center',width:120,templet:tplRemainMonths}
,{field:'taxpayerType', title: '纳税人类型', align: 'center',width:130,templet:tplTaxpayerType}
// ,{field:'serviceUserId', title: '客服用户', align: 'center',width:130}
// ,{field:'accountUserId', title: '记帐用户', align: 'center',width:130}
// ,{field:'saleUserId', title: '销售用户', align: 'center',width:130}
,{field:'serviceStatus', title: '服务状态', align: 'center',width:130,templet:tplServiceStatus}
,{field:'createTime', title: '创立工夫', align: 'center',width:160,templet:tplCreateTime}
,{field:'customerType', title: '客户类型', align: 'center',width:100,hide:true ,templet:tplCustomerType}
,{field:'taxType', title: '申报形式', align: 'center',width:100,hide:true,templet:taxTypeTpl}
,{field:'serviceAmount', title: '服务费 / 月', align: 'center',width:100,hide:true}
,{field:'accountType', title: '账务类型', align: 'center',width:100,hide:true,templet:tplAccountType}
,{field:'socialStatus', title: '社保开明状态', align: 'center',width:120,hide:true,templet:tplSocialStatus}
,{field:'invoiceType', title: '开票形式', align: 'center',width:100,hide:true ,templet:invoiceTypeTpl}
,{field:'taxPlateStatus', title: '税盘状态', align: 'center',width:100,hide:true,templet:tplTaxPlateStatus}
]]
,page: true
,limit: 10
,limits: layui.setter.limits
,height: 'full-1'
,done: function(res, curr, count){
var _tableData = res;
dropdown.suite();
/*for (var i = 0; i < _tableData.data.length; i++) {var row = _tableData.data[i];
mapData.set(""+row.id,row);
dropdown.onFilter("ft" + row.id, function (event) {var arr = event.split("_");
active[arr[0]].call({},{key:arr[1]})
});
}*/
}
});监听按钮事件：
table.on('tool('+elemId+')', function(obj){
var eventName = obj.event;
if(eventName=='showRec'){active.showRec(obj);
}else if(eventName.indexOf("header_")!=-1){active.header(obj,eventName);
}else{active[eventName].call({},obj)
}
});active.header(obj,eventName) 的代码如下：
var active = {header:function (obj,eName) {var headerDiv = $(obj.tr).find("[lay-event="+eName+"]");
var headerIcon = headerDiv.find(".layui-icon");
if(headerIcon.hasClass("layui-icon-down")){headerIcon.removeClass("layui-icon-down");
headerIcon.addClass("layui-icon-up");
}else{headerIcon.addClass("layui-icon-down");
headerIcon.removeClass("layui-icon-up");
}
var contentDiv = headerDiv.parent().find("div");
if(contentDiv.hasClass("layui-show")){contentDiv.removeClass("layui-show")
}else{contentDiv.addClass("layui-show")
}
},
}其余事件格局如下：
showTaxInfo:function (obj) {active.showPage(obj.data,'tax/taxInfoTabs.jsp','税务注销');
},showPage 代码如下：
showPage:function (data,page,title) {
top.layui.admin.popupRight({
id: 'LAY_'+elemId+'PopupLayer'
,title:title?title:false
,type: 2
,content: page
,area: layui.setter.popup_layer_area
,success: function(layero,index){top.window.formData = data;}
,btn: ['敞开']
,btnAlign: 'c'
});
},