• 00029-layui 表格table 操作列支持下拉按钮(菜单),多级下拉按钮(菜单),dropdown


    用到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="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>&nbsp;&nbsp;税务查询</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>&nbsp;&nbsp;账务管理</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>&nbsp;&nbsp;服务中心</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>&nbsp;&nbsp;业务管理</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>&nbsp;&nbsp;税务管理</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: [[
    				{ 100, align:'center', toolbar: '#'+elemId+'-bar'}
    //                { 100, align:'center', toolbar: '#test2'}
    //                ,{field:'contacts', title: 'test', align: 'center',200,templet:"#test1",hide:true}
    				,{field:'name', title: '公司名称', align: 'center',minWidth:200 ,templet:tplName}
    				,{field:'contacts', title: '联系人', align: 'center',130 }
    				,{field:'mobile', title: '联系电话', align: 'center',130 }
    				,{field:'issueTime', title: '注册时间', align: 'center',160,templet:tplIssueTime}
    				,{field:'regionName', title: '所属区域', align: 'center',130 }
    				,{field:'industry', title: '行业分类', align: 'center',130 }
    				,{field:'serviceBeginDate', title: '服务起止时间', align: 'center',160,templet:tplServiceBeginDate}
                    ,{field:'serviceBeginDate', title: '到期剩余时间', align: 'center',120,templet:tplRemainMonths}
                    ,{field:'taxpayerType', title: '纳税人类型', align: 'center',130,templet:tplTaxpayerType}
    //				,{field:'serviceUserId', title: '客服用户', align: 'center',130 }
    //				,{field:'accountUserId', title: '记帐用户', align: 'center',130 }
    //				,{field:'saleUserId', title: '销售用户', align: 'center',130 }
    				,{field:'serviceStatus', title: '服务状态', align: 'center',130,templet:tplServiceStatus}
                    ,{field:'createTime', title: '创建时间', align: 'center',160,templet:tplCreateTime}
    
                    ,{field:'customerType', title: '客户类型', align: 'center',100,hide:true ,templet:tplCustomerType}
                    ,{field:'taxType', title: '申报方式', align: 'center',100,hide:true,templet:taxTypeTpl }
                    ,{field:'serviceAmount', title: '服务费/月', align: 'center',100,hide:true }
                    ,{field:'accountType', title: '账务类型', align: 'center',100,hide:true,templet:tplAccountType }
                    ,{field:'socialStatus', title: '社保开通状态', align: 'center',120,hide:true,templet:tplSocialStatus }
                    ,{field:'invoiceType', title: '开票方式', align: 'center',100,hide:true ,templet:invoiceTypeTpl}
                    ,{field:'taxPlateStatus', title: '税盘状态', align: 'center',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'
                    });
                },
    
  • 相关阅读:
    考察数据结构(An Extensive Examination of Data Structures)
    考察数据结构——第一部分:数据结构简介[译]
    老生常谈
    使用DataSet的ReadXml和WriteXml方法
    要掌握Sql Server,我还差得远啊!
    新浪短信Web Service
    还是水晶报表
    两种报表组件的功能分析
    无限级分类(非递归算法/存储过程版/GUID主键)完整数据库示例_(4)显示记录
    c#方法中调用参数的值传递方式和引用传递方式,以及ref与out的区别
  • 原文地址:https://www.cnblogs.com/jianquan100/p/13672743.html
Copyright © 2020-2023  润新知