用到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' }); },