• layui 表格 展开

     一、表格嵌套表格（手风琴打开）

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>设备上下线统计title>
    7.  
    8.     <script type="text/javascript" src="../../../language/language.js">script>
    9.     <script type="text/javascript" src="../../proto/protobuf.min.js">script>
    10.     <script type="text/javascript" src="../../component/js/common.js">script>
    11.     <script type="text/javascript" src="../../component/js/commonNew.js">script>
    12.  
    13.     <script type="text/javascript" src="../../layui/layui.js?r=3.0">script>
    14.     <link type="text/css" rel="stylesheet" href="../../layui/css/layui_base.css"/>
    15.     <script type="text/javascript" src="../../component/js/jquery-2.1.0.min.js">script>
    16.  
    17.     
    18.     <script src="../../component/js/xlsx.js">script>
    19.     <script src="../../component/xlsx/dom.js">script>
    20.     <script src="../../component/xlsx/xlsx.core.min.js">script>
    21.  
    22.     <script type="text/javascript" src="./error.js?r=1.3.3">script>
    23.  
    24. head>
    25.  
    26. <body>
    27. <form class="layui-form">
    28.     
    29.     <div id="none">
    30.         <table class="layui-table" lay-filter="tabView" id="tabView">table>
    31.     div>
    32.  
    33. form>
    34. body>
    35.  
    36. <script>
    37.     var userPerson = getUser();
    38.     var httpUser = { userName: userPerson.name, userGuid: userPerson.sessionId };
    39.  
    40.     let IPS;
    41.     let str = document.domain;
    42.     if (document.domain == 'localhost' || document.domain == "192.168.100.50") {
    43.         IPS = 'https://xxc.chinamdvr.com:7050/v1/api/web/mgmt/deviceSetup/setupTicket/statistic';
    44.     } else {
    45.         IPS = 'https://www.chinamdvr.com:9201/v1/api/web/mgmt/deviceSetup/setupTicket/statistic';
    46.     }
    47.  
    48.     let $, element, form, laydate, layer, tableView, util;
    49.  
    50.     let listData = [], listDataDetail = [], radioIndex = 0, objData = {}, dataDetail = {};
    51.  
    52.     let colsList = [
    53.         { field: 'id', title: '', width: 50,  //给需要展开的列添加状态event，添加模板
    54.             event:'collapse',
    55.             templet: function(res) {
    56.                 return '
      '
    57.                     +'
      '
  • }
  • },
  • { field: 'region', title: "网点所在区", align: 'center' },
  • { field: 'required', title: "安装总数", align: 'center' },
  • { field: 'installed', title: "已安装总数", align: 'center' },
  • { field: 'checked', title: "已验收数量", align: 'center' },
  • { field: 'installNo', title: "未验收数量", align: 'center' },
  • { field: 'process', title: "安装进度", align: 'center', templet: schedule },
  • ];
  • layui.use(['element', 'form', 'laydate', 'layer', "util"], function(){
  • form = layui.form, laydate = layui.laydate, layer = layui.layer;
  • util = layui.util
  • element = layui.element;
  • $ = layui.$;
  • tableRender();
  • interfaceParam();
  • });
  • /** 进度条 */
  • function schedule(d) {
  • //设置页面进度条
  • return '
    ' +
  • '
    'layui-bg-green' + '" lay-percent="' + d.process + '">' +
  • '
    '
  • }
  • function tableRender () {
  • layui.use('table', function () {
  • tableView = layui.table;
  • // 渲染第一个表格
  • tableView.render({
  • elem: '#tabView',
  • data: listData,
  • height: '700',
  • toolbar: '#toolbarDemo',
  • defaultToolbar: [{
  • title: languageTL.historyMap.exportXls,
  • layEvent: 'export',
  • icon: 'layui-icon-export'
  • }],
  • cellMinWidth: 80,
  • cols: [colsList],
  • page: true, //是否显示分页
  • limits: [10, 20, 50, 100],
  • page: {
  • count: listData.length,
  • prev:languageTL.common. previousStr,
  • next: languageTL.common.nextStr,
  • layout: ['prev', 'page', 'next', 'count', 'limit']
  • },
  • done: function (res, curr, count) {
  • element.render();
  • // element.progress('rate', '75%');
  • }
  • });
  • //头工具栏事件 统计信息导出
  • tableView.on('toolbar(tabView)', function (obj) {
  • switch (obj.event) {
  • //自定义头工具栏右侧图标 - 提示
  • case 'export':
  • if (listData.length == 0) {
  • layer.msg(languageTL.deviceVideo.loss[3]);
  • return;
  • }
  • let tHeader = [], filterVal = [];
  • colsList.map((item, index) => {
  • tHeader.push(item.title);
  • filterVal.push(item.field);
  • });
  • // 导出的数据
  • const data = PlExportExcel.formatJson(filterVal, listData);
  • // 导出表格
  • PlExportExcel.exportJsonToExcel({
  • header: tHeader,
  • data: data,
  • filename: "Install",
  • autoWidth: true,
  • bookType: 'xlsx'
  • });
  • break;
  • };
  • });
  • tableView.on('tool(tabView)',function(obj){
  • //获取单行数据
  • var data=obj.data;
  • //判断状态
  • if(obj.event==='collapse'){
  • var trObj = layui.$(this).parent('tr'); //当前行
  • var accordion = true //开启手风琴，那么在进行折叠操作时，始终只会展现当前展开的表格。
  • var content = '
    '     //内容
  • //折叠方法
  • collapseTable({
  • elem: trObj,
  • accordion: accordion,
  • content: content,
  • success:function(trObjChildren, index){
  • //给当前table添加id和lay-filter
  • trObjChildren.find('table').attr("id", index);
  • trObjChildren.find('table').attr("lay-filter", index);
  • //渲染table
  • tableView.render({
  • elem: "#" + index,
  • data: [{region: 1111, required: 2222, installed: 3333, checked: 4444, installNo: 5555, process: "76%"}],
  • limit: 3,
  • // id:index,//用于表格重载
  • cellMinWidth: 80,
  • cols: [[
  • { field: 'region', title: "网点所在区", align: 'center' },
  • { field: 'required', title: "安装总数", align: 'center' },
  • { field: 'installed', title: "已安装总数", align: 'center' },
  • { field: 'checked', title: "已验收数量", align: 'center' },
  • { field: 'installNo', title: "未验收数量", align: 'center' },
  • { field: 'process', title: "安装进度", align: 'center', templet: schedule },
  • ]],
  • done: function (res, curr, count) {
  • element.render();
  • $('th').hide()
  • }
  • });
  • //重新加载element
  • element.init();
  • //监听当前table的头部工具栏点击事件
  • tableView.on('toolbar('+index+')',function(obj){
  • var checkStatus = tableView.checkStatus(obj.config.id);
  • var data=checkStatus.data;
  • console.log(data);
  • switch(obj.event){
  • case'selecttime':
  • }
  • })
  • }
  • })
  • }
  • });
  • });
  • }
  • function collapseTable(options) {
  • var trObj = options.elem;
  • if (!trObj) return;
  • var accordion = options.accordion,
  • success = options.success,
  • content = options.content || '';
  • var tableView = trObj.parents('.layui-table-view'); //当前表格视图
  • var id = tableView.attr('lay-id'); //当前表格标识
  • var index = trObj.data('index'); //当前行索引
  • var leftTr = tableView.find('.layui-table-fixed.layui-table-fixed-l tr[data-index="' + index + '"]'); //左侧当前固定行
  • var rightTr = tableView.find('.layui-table-fixed.layui-table-fixed-r tr[data-index="' + index + '"]'); //右侧当前固定行
  • var colspan = trObj.find('td').length; //获取合并长度
  • var trObjChildren = trObj.next(); //展开行Dom
  • var indexChildren = id + '-' + index + '-children'; //展开行索引
  • var leftTrChildren = tableView.find('.layui-table-fixed.layui-table-fixed-l tr[data-index="' + indexChildren +
  • '"]'); //左侧展开固定行
  • var rightTrChildren = tableView.find('.layui-table-fixed.layui-table-fixed-r tr[data-index="' + indexChildren +
  • '"]'); //右侧展开固定行
  • var lw = leftTr.width() + 15; //左宽
  • var rw = rightTr.width() + 15; //右宽
  • //不存在就创建展开行
  • if (trObjChildren.data('index') != indexChildren) {
  • //装载HTML元素
  • var tr = ''">
    '">
    'px;padding-right:' + rw + 'px" class="layui-table-cell">' +
  • content + '
    ';
  • trObjChildren = trObj.after(tr).next().hide(); //隐藏展开行
  • var fixTr = ''">'; //固定行
  • leftTrChildren = leftTr.after(fixTr).next().hide(); //左固定
  • rightTrChildren = rightTr.after(fixTr).next().hide(); //右固定
  • }
  • //展开|折叠箭头图标
  • trObj.find('td[lay-event="collapse"] i.layui-colla-icon').toggleClass("layui-icon-right layui-icon-down");
  • //显示|隐藏展开行
  • trObjChildren.toggle();
  • //开启手风琴折叠和折叠箭头
  • if (accordion) {
  • trObj.siblings().find('td[lay-event="collapse"] i.layui-colla-icon').removeClass("layui-icon-down").addClass(
  • "layui-icon-right");
  • trObjChildren.siblings('[data-index$="-children"]').hide(); //展开
  • rightTrChildren.siblings('[data-index$="-children"]').hide(); //左固定
  • leftTrChildren.siblings('[data-index$="-children"]').hide(); //右固定
  • }
  • success(trObjChildren, indexChildren); //回调函数
  • heightChildren = trObjChildren.height(); //展开高度固定
  • rightTrChildren.height(heightChildren + 115).toggle(); //左固定
  • leftTrChildren.height(heightChildren + 115).toggle(); //右固定
  • }
  • // 调用接口
  • function interfaceParam() {
  • let url = IPS + "/progress";
  • let timerTimeOut, loadingTimeOut;
  • layui.use('layer', function () {
  • layer = layui.layer;
  • loadingTimeOut = layer.load(2, { shade: false });
  • timerTimeOut = setTimeout(function () {
  • layer.open({
  • title: languageTL.common.promptTitle,
  • content: languageTL.count.btns2[5],
  • btn: [languageTL.confirm]
  • });
  • layer.close(loadingTimeOut);
  • }, 1000 * 10);
  • });
  • proPostNew(url, "FtpManage.EpibolyTicketProgressReq", "FtpManage.EpibolyTicketProgressResp", { userInfo: httpUser }, function (code, result) {
  • clearTimeout(timerTimeOut); // 关闭定时器
  • layer.close(loadingTimeOut);
  • if (code == 200) {
  • console.log(result)
  • result.epibolyTicketProgressList.map(item => {
  • item.installNo = item.installed - item.checked;
  • item.process = percentNum(item.installed , item.required);
  • })
  • listData = result.epibolyTicketProgressList;
  • tableRender();
  • } else {
  • layer.msg(errLayer(result.code));
  • }
  • }, 'ftpManage', 'FtpManage.Error');
  • }
  • //小数点后两位百分比
  • function percentNum(num,num2) {
  • return (Math.round(num / num2 * 10000) / 100.00 + "%");
  • }
  • script>
  • html>

    •  二、树结构展开（数据写死的）

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>设备上下线统计title>
    7.  
    8.     <script type="text/javascript" src="../../../language/language.js">script>
    9.     <script type="text/javascript" src="../../proto/protobuf.min.js">script>
    10.     <script type="text/javascript" src="../../component/js/common.js">script>
    11.     <script type="text/javascript" src="../../component/js/commonNew.js">script>
    12.  
    13.     <script type="text/javascript" src="../../layui/layui.js?r=3.0">script>
    14.     <link type="text/css" rel="stylesheet" href="../../layui/css/layui_base.css"/>
    15.     <script type="text/javascript" src="../../component/js/jquery-2.1.0.min.js">script>
    16.  
    17.     
    18.     <script src="../../component/js/xlsx.js">script>
    19.     <script src="../../component/xlsx/dom.js">script>
    20.     <script src="../../component/xlsx/xlsx.core.min.js">script>
    21.  
    22.     <script type="text/javascript" src="./error.js?r=1.3.3">script>
    23.  
    24. head>
    25.  
    26. <body>
    27. <form class="layui-form">
    28.     
    29.     <div id="none">
    30.         <table class="layui-table" lay-filter="tabView" id="tabView">table>
    31.     div>
    32.  
    33. form>
    34. body>
    35.  
    36. <script>
    37.     var userPerson = getUser();
    38.     var httpUser = { userName: userPerson.name, userGuid: userPerson.sessionId };
    39.  
    40.     let IPS;
    41.     let str = document.domain;
    42.     if (document.domain == 'localhost' || document.domain == "192.168.100.50") {
    43.         IPS = 'https://xxc.chinamdvr.com:7050/v1/api/web/mgmt/deviceSetup/setupTicket/statistic';
    44.     } else {
    45.         IPS = 'https://www.chinamdvr.com:9201/v1/api/web/mgmt/deviceSetup/setupTicket/statistic';
    46.     }
    47.  
    48.     let $, element, form, laydate, layer, tableView, util, treeTable;
    49.  
    50.     let listData = [
    51.         {
    52.             "region": "系统管理",
    53.             "required": 1,
    54.             "installed": 2,
    55.             "checked": 3,
    56.             "installNo": 4,
    57.             "process": "60%",
    58.  
    59.             "parentId": -1,
    60.             id: 1,
    61.             "open": true
    62.         },
    63.         {
    64.             "region": "用户管理",
    65.             "required": 11,
    66.             "installed": 22,
    67.             "checked": 33,
    68.             "installNo": 44,
    69.             "process": "61%",
    70.  
    71.             "parentId": 1,
    72.             id: 2,
    73.             "open": true
    74.         },
    75.  
    76.         {
    77.             "region": "查询用户",
    78.             "required": 111,
    79.             "installed": 222,
    80.             "checked": 333,
    81.             "installNo": 444,
    82.             "process": "63%",
    83.  
    84.             "parentId": 2,
    85.             id: 3,
    86.             "open": true
    87.         },
    88.         {
    89.             "region": "添加用户",
    90.             "required": 1111,
    91.             "installed": 2222,
    92.             "checked": 3333,
    93.             "installNo": 4444,
    94.             "process": "64%",
    95.  
    96.             "parentId": 2,
    97.             id: 4,
    98.             "open": true
    99.         },
    100.         {
    101.             "region": "修改用户",
    102.             "required": 11111,
    103.             "installed": 22222,
    104.             "checked": 33333,
    105.             "installNo": 44444,
    106.             "parentId": 2,
    107.             "process": "67%",
    108.  
    109.             "parentId": 2,
    110.             id: 5,
    111.             "open": true
    112.         },
    113.         {
    114.             "region": "删除用户",
    115.             "required": 111111,
    116.             "installed": 222222,
    117.             "checked": 333333,
    118.             "installNo": 444444,
    119.             "process": "69%",
    120.  
    121.             "parentId": 2,
    122.             id: 6,
    123.             "open": true
    124.         }];
    125.  
    126.     layui.config({
    127.         base: './'
    128.     }).use(['element', 'form', 'laydate', 'layer', "util", "treeTable"], function(){
    129.         form = layui.form, laydate = layui.laydate, layer = layui.layer;
    130.         util = layui.util;
    131.         element = layui.element;
    132.         $ = layui.$;
    133.         treeTable = layui.treeTable;
    134.  
    135.         // 渲染
    136.         var inst = treeTable.render({
    137.             elem: '#tabView',
    138.             data: listData,
    139.             tree: {
    140.                 iconIndex: 0,
    141.                 isPidData: true,
    142.                 idName: 'id', // 父ID
    143.                 pidName: 'parentId', // 子ID
    144.                 // openName: 'open',// 是否默认展开的字段名
    145.             },
    146.             maxHeight: '501px',
    147.             cols: [[
    148.                 { field: 'region', title: "网点所在区", align: 'center' },
    149.                 { field: 'required', title: "安装总数", align: 'center' },
    150.                 { field: 'installed', title: "已安装总数", align: 'center' },
    151.                 { field: 'checked', title: "已验收数量", align: 'center' },
    152.                 { field: 'installNo', title: "未验收数量", align: 'center' },
    153.                 { field: 'process', title: "安装进度", align: 'center', templet: schedule },
    154.             ]],
    155.             toolbar: true,
    156.             defaultToolbar: ['exports'],
    157.             page: true,
    158.             done: function (res, curr, count) {
    159.                 element.render();
    160.                 // element.progress('rate', '75%');
    161.             }
    162.         });
    163.  
    164.         interfaceParam();
    165.     });
    166.  
    167.     /** 进度条 */
    168.     function schedule(d) {
    169.         //设置页面进度条
    170.         return '
      ' +
    171.             '
      'layui-bg-green' + '" lay-percent="' + d.process + '">' +
    172.             '
      '
    173.     }
    174.  
    175.     // 调用接口
    176.     function interfaceParam() {
    177.         let url = IPS + "/progress";
    178.  
    179.         let timerTimeOut, loadingTimeOut;
    180.         layui.use('layer', function () {
    181.             layer = layui.layer;
    182.             loadingTimeOut = layer.load(2, { shade: false });
    183.             timerTimeOut = setTimeout(function () {
    184.                 layer.open({
    185.                     title: languageTL.common.promptTitle,
    186.                     content: languageTL.count.btns2[5],
    187.                     btn: [languageTL.confirm]
    188.                 });
    189.                 layer.close(loadingTimeOut);
    190.             }, 1000 * 10);
    191.         });
    192.         proPostNew(url, "FtpManage.EpibolyTicketProgressReq", "FtpManage.EpibolyTicketProgressResp", { userInfo: httpUser }, function (code, result) {
    193.             clearTimeout(timerTimeOut); // 关闭定时器
    194.             layer.close(loadingTimeOut);
    195.             if (code == 200) {
    196.                 console.log(result)
    197.  
    198.                 result.epibolyTicketProgressList.map(item => {
    199.                     item.installNo = item.installed - item.checked;
    200.                     item.process = percentNum(item.installed , item.required);
    201.                 })
    202.  
    203.                 listData = result.epibolyTicketProgressList;
    204.  
    205.             } else {
    206.                 layer.msg(errLayer(result.code));
    207.             }
    208.         }, 'ftpManage', 'FtpManage.Error');
    209.     }
    210.  
    211.     //小数点后两位百分比
    212.     function percentNum(num,num2) {
    213.         return (Math.round(num / num2 * 10000) / 100.00 + "%");
    214.     }
    215.  
    216.  
    217. script>
    218.  
    219. html>

     有一个需要引入的文件：treeTable.js

    1. /** 树形表格3.x Created by wangfan on 2020-05-12 https://gitee.com/whvse/treetable-lay */
    2. layui.define(["laytpl","form","util"],function(s){var g=layui.jquery;var d=layui.laytpl;var c=layui.form;var b=layui.util;var o=layui.device();var h="treeTable";var k={};var e={elem:undefined,cols:undefined,url:undefined,method:undefined,where:undefined,contentType:undefined,headers:undefined,parseData:undefined,request:{pidName:"pid"},toolbar:undefined,defaultToolbar:undefined,width:undefined,height:undefined,cellMinWidth:90,done:undefined,data:undefined,title:undefined,skin:undefined,even:undefined,size:undefined,text:{none:"无数据"},reqData:undefined,useAdmin:false,tree:{idName:"id",pidName:"pid",childName:"children",haveChildName:"haveChild",openName:"open",iconIndex:0,arrowType:undefined,onlyIconControl:undefined,getIcon:function(u){var t=u[this.haveChildName];if(t!==undefined){t=t===true||t==="true"}else{if(u[this.childName]){t=u[this.childName].length>0}}if(t){return''}else{return''}}}};var r={field:undefined,title:undefined,width:undefined,minWidth:undefined,type:"normal",fixed:undefined,hide:undefined,unresize:undefined,style:undefined,align:undefined,colspan:undefined,rowspan:undefined,templet:undefined,toolbar:undefined,"class":undefined,singleLine:undefined};var p=function(t){k[t.elem.substring(1)]=this;this.reload(t)};p.prototype.initOptions=function(t){var D=this;function B(J){if(!J.INIT_OK){J=g.extend({INIT_OK:true},r,J)}if(J.type==="space"){if(!J.width){J.width=15}J.minWidth=J.width}else{if(J.type==="numbers"){if(!J.width){J.width=40}J.minWidth=J.width;if(!J.singleLine){J.singleLine=false}if(!J.unresize){J.unresize=true}if(!J.align){J.align="center"}}else{if(J.type==="checkbox"||J.type==="radio"){if(!J.width){J.width=48}J.minWidth=J.width;if(!J.singleLine){J.singleLine=false}if(!J.unresize){J.unresize=true}if(!J.align){J.align="center"}}}}if(J.toolbar){J.type="tool"}return J}if("Array"!==l(t.cols[0])){t.cols=[t.cols]}for(var w=0;wcols.length;w++){for(var u=0;ucols[w].length;u++){t.cols[w][u].INIT_OK=undefined;t.cols[w][u].key=undefined;t.cols[w][u].colGroup=undefined;t.cols[w][u].HAS_PARENT=undefined;t.cols[w][u].parentKey=undefined;t.cols[w][u].PARENT_COL_INDEX=undefined}}var F=[],G=0;for(var y=0;ycols.length;y++){var C=t.cols[y];for(var x=0;xlength;x++){var A=C[x];if(!A){C.splice(x,1);continue}A=B(A);A.key=y+"-"+x;var I=undefined;if(A.colGroup||A.colspan>1){A.colGroup=true;A.type="group";I=[];G++;var z=0;for(var v=0;vcols[y+1].length;v++){var H=g.extend({INIT_OK:true},r,t.cols[y+1][v]);if(H.HAS_PARENT||(z>1&&z==A.colspan)){t.cols[y+1][v]=H;continue}H.HAS_PARENT=true;H.parentKey=y+"-"+x;H.key=(y+1)+"-"+v;H.PARENT_COL_INDEX=G;H=B(H);I.push(H);z=z+parseInt(H.colspan>1?H.colspan:1);t.cols[y+1][v]=H}}A.CHILD_COLS=I;if(!A.PARENT_COL_INDEX){F.push(A)}t.cols[y][x]=A}}this.options=g.extend(true,{},e,t);this.options.colArrays=F;if(this.options.url){this.options.reqData=function(J,K){if(!D.options.where){D.options.where={}}if(J){D.options.where[D.options.request.pidName]=J[D.options.tree.idName]}(D.options.useAdmin?layui.admin:g).ajax({url:D.options.url,data:D.options.contentType&&D.options.contentType.indexOf("application/json")===0?JSON.stringify(D.options.where):D.options.where,headers:D.options.headers,type:D.options.method,dataType:"json",contentType:D.options.contentType,success:function(L){if(D.options.parseData){L=D.options.parseData(L)}if(L.code==0){K(L.data)}else{K(L.msg||"加载失败")}},error:function(L){K(L.status+" - "+L.statusText)}})}}else{if(this.options.data&&this.options.data.length>0&&this.options.tree.isPidData){this.options.data=a.pidToChildren(this.options.data,this.options.tree.idName,this.options.tree.pidName,this.options.tree.childName)}}if("default"===this.options.toolbar){this.options.toolbar=["
      ",'   
      ','      ',"   
      "      ,'   
      ','      ',"   
      "      ,'   
      ','      ',"   
      "      ,"
      "      ].join("")}if(this.options.defaultToolbar===undefined){this.options.defaultToolbar=["filter","exports","print"]}if(typeof this.options.tree.getIcon==="string"){var E=this.options.tree.getIcon;this.options.tree.getIcon=function(K){if(E!=="ew-tree-icon-style2"){return E}var J=K[this.haveChildName];if(J!==undefined){J=J===true||J==="true"}else{if(K[this.childName]){J=K[this.childName].length>0}}if(J){return''}else{return''}}}};p.prototype.init=function(){var E=this.options;var u=g(E.elem);var B=E.elem.substring(1);u.removeAttr("lay-filter");if(u.next(".ew-tree-table").length===0){u.css("display","none");u.after(['
      '" style="',E.style||"",'">','   ','   
      ','      
      '      ,"   
      "      ,'   
      ','      
      '      ,'      
      ','         ',"      
      "      ,'      
      ',E.text.none||"","
      "      ,"   
      "      ,"
      "      ].join(""))}var A=this.getComponents();if(E.skin){A.$table.attr("lay-skin",E.skin)}if(E.size){A.$table.attr("lay-size",E.size)}if(E.even){A.$table.attr("lay-even",E.even)}A.$toolbar.empty();if(E.toolbar===false||E.toolbar===undefined){A.$toolbar.hide()}else{A.$toolbar.show();if(typeof E.toolbar==="string"){d(g(E.toolbar).html()).render({},function(F){A.$toolbar.html('
      '+F+"
      "      )})}var C=['
      '];for(var y=0;ydefaultToolbar.length;y++){var w;if("filter"===E.defaultToolbar[y]){w={title:"筛选",layEvent:"LAYTABLE_COLS",icon:"layui-icon-cols"}}else{if("exports"===E.defaultToolbar[y]){w={title:"导出",layEvent:"LAYTABLE_EXPORT",icon:"layui-icon-export"}}else{if("print"===E.defaultToolbar[y]){w={title:"打印",layEvent:"LAYTABLE_PRINT",icon:"layui-icon-print"}}else{w=E.defaultToolbar[y]}}}if(w){C.push('
      );C.push(' title="'+w.title+'"');C.push(' lay-event="'+w.layEvent+'">');C.push('icon+'">
      '      )}}A.$toolbar.append(C.join("")+"
      "      )}if(E.width){A.$view.css("width",E.width);A.$tHeadGroup.css("width",E.width);A.$tBodyGroup.css("width",E.width)}var v=this.resize(true);var D=""+this.renderBodyTh()+"";A.$tBodyGroup.children("style").remove();if(E.height){A.$tHead.html(v+D);A.$tBody.html(v+"");if(E.height.indexOf("full-")===0){var z=parseFloat(E.height.substring(5))+A.$toolbar.outerHeight()+A.$tHeadGroup.outerHeight()+1;A.$tBodyGroup.append(['"].join(""));A.$tBodyGroup.data("full",z);A.$tBodyGroup.css("height","")}else{A.$tBodyGroup.css("height",E.height);A.$tBodyGroup.data("full","")}A.$tHeadGroup.show()}else{A.$tHeadGroup.hide();var x={lg:50,sm:30,md:38};A.$tBodyGroup.append(['"].join(""));A.$tBody.html(v+D+"")}c.render("checkbox",B);function t(H){var F=H.data("parent"),G;if(!F){return}var I=A.$table.children("thead").children("tr").children('[data-key="'+F+'"]');var J=I.attr("colspan")-1;I.attr("colspan",J);if(J===0){I.addClass("layui-hide")}t(I)}A.$table.children("thead").children("tr").children("th.layui-hide").each(function(){t(g(this))});if(E.reqData){this.options.data=undefined;this.renderBodyAsync()}else{if(E.data&&E.data.length>0){this.renderBodyData(E.data)}else{A.$loading.hide();A.$empty.show()}}};p.prototype.bindEvents=function(){var v=this;var t=this.options;var u=this.getComponents();var w=u.$table.children("tbody");var x=function(y){var z=g(this);if(!z.is("tr")){var C=z.parent("tr");if(C.length>0){z=C}else{z=z.parentsUntil("tr").last().parent()}}var A=v.getDataByTr(z);var B={tr:z,data:A,del:function(){var F=z.data("index");var D=parseInt(z.data("indent"));z.nextAll("tr").each(function(){if(parseInt(g(this).data("indent"))<=D){return false}g(this).remove()});var G=(typeof F==="number"?1:F.split("-").length);z.nextAll("tr").each(function(){var H=g(this);if(parseInt(H.data("indent"))return false}var I=H.data("index").toString().split("-");I[G-1]=parseInt(I[G-1])-1;H.data("index",I.join("-"))});var E=z.prevAll("tr");v.del(undefined,F);z.remove();v.renderNumberCol();E.each(function(){var H=parseInt(g(this).data("indent"));if(H>=D){return true}v.checkParentCB(g(this));D=H});v.checkChooseAllCB();if(t.data.length===0){u.$empty.show()}f(u.$view)},update:function(E){A=g.extend(true,A,E);var D=parseInt(z.data("indent"));v.renderBodyTr(A,D,undefined,z);c.render(null,u.filter);v.renderNumberCol();z.prevAll("tr").each(function(){var F=parseInt(g(this).data("indent"));if(F>=D){return true}v.checkParentCB(g(this));D=F});v.checkChooseAllCB()}};return g.extend(B,y)};w.off("click.fold").on("click.fold",".ew-tree-pack",function(C){layui.stope(C);var A=g(this).parentsUntil("tr").last().parent();if(A.hasClass("ew-tree-table-loading")){return}var y=A.data("have-child");if(y!==true&&y!=="true"){return}var z=A.hasClass("ew-tree-table-open");var B=v.getDataByTr(A);if(!z&&!B[t.tree.childName]){v.renderBodyAsync(B,A)}else{B[t.tree.openName]=i(A)}});w.off("click.tool").on("click.tool","*[lay-event]",function(z){layui.stope(z);var y=g(this);layui.event.call(this,h,"tool("+u.filter+")",x.call(this,{event:y.attr("lay-event")}))});c.on("radio("+u.radioFilter+")",function(y){var z=v.getDataByTr(g(y.elem).parentsUntil("tr").last().parent());v.removeAllChecked();z.LAY_CHECKED=true;z.LAY_INDETERMINATE=false;layui.event.call(this,h,"checkbox("+u.filter+")",{checked:true,data:z,type:"one"})});c.on("checkbox("+u.checkboxFilter+")",function(C){var B=C.elem.checked;var E=g(C.elem);var z=E.next(".layui-form-checkbox");if(!B&&E.hasClass("ew-form-indeterminate")){B=true;E.prop("checked",B);z.addClass("layui-form-checked");E.removeClass("ew-form-indeterminate")}var A=E.parentsUntil("tr").last().parent();var D=v.getDataByTr(A);D.LAY_CHECKED=B;D.LAY_INDETERMINATE=false;if(D[t.tree.childName]&&D[t.tree.childName].length>0){v.checkSubCB(A,B)}var y=parseInt(A.data("indent"));A.prevAll("tr").each(function(){var F=parseInt(g(this).data("indent"));if(FcheckParentCB(g(this));y=F}});v.checkChooseAllCB();layui.event.call(this,h,"checkbox("+u.filter+")",{checked:B,data:D,type:"more"})});c.on("checkbox("+u.chooseAllFilter+")",function(A){var z=A.elem.checked;var B=g(A.elem);var y=B.next(".layui-form-checkbox");if(!t.data||t.data.length===0){B.prop("checked",false);y.removeClass("layui-form-checked");B.removeClass("ew-form-indeterminate");return}if(!z&&B.hasClass("ew-form-indeterminate")){z=true;B.prop("checked",z);y.addClass("layui-form-checked");B.removeClass("ew-form-indeterminate")}layui.event.call(this,h,"checkbox("+u.filter+")",{checked:z,type:"all"});v.checkSubCB(u.$tBody.children("tbody"),z)});w.off("click.row").on("click.row","tr",function(){layui.event.call(this,h,"row("+u.filter+")",x.call(this,{}))});w.off("dblclick.rowDouble").on("dblclick.rowDouble","tr",function(){layui.event.call(this,h,"rowDouble("+u.filter+")",x.call(this,{}))});w.off("click.cell").on("click.cell","td",function(C){var y=g(this);var E=y.data("type");if(E==="checkbox"||E==="radio"){return layui.stope(C)}var H=y.data("edit");var G=y.data("field");if(H){layui.stope(C);if(w.find(".ew-tree-table-edit").length>0){return}var B=y.data("index");var z=y.find(".ew-tree-table-indent").length;var D=v.getDataByTr(y.parent());if("text"===H||"number"===H){var F=g(''" class="layui-input ew-tree-table-edit"/>');F[0].value=D[G];y.append(F);F.focus();F.blur(function(){var K=g(this).val();if(K==D[G]){return g(this).remove()}var I=layui.event.call(this,h,"edit("+u.filter+")",x.call(this,{value:K,field:G}));if(I===false){g(this).addClass("layui-form-danger");g(this).focus()}else{D[G]=K;var J=y.data("key").split("-");v.renderBodyTd(D,z,B,y,t.cols[J[0]][J[1]])}})}else{console.error("不支持的单元格编辑类型:"+H)}}else{var A=layui.event.call(this,h,"cell("+u.filter+")",x.call(this,{td:y,field:G}));if(A===false){layui.stope(C)}}});w.off("dblclick.cellDouble").on("dblclick.cellDouble","td",function(C){var D=g(this);var z=D.data("type");if(z==="checkbox"||z==="radio"){return layui.stope(C)}var A=D.data("edit");var B=D.data("field");if(A){return layui.stope(C)}var y=layui.event.call(this,h,"cellDouble("+u.filter+")",x.call(this,{td:D,field:B}));if(y===false){layui.stope(C)}});u.$toolbar.off("click.toolbar").on("click.toolbar","*[lay-event]",function(A){layui.stope(A);var z=g(this);var y=z.attr("lay-event");if("LAYTABLE_COLS"===y){v.toggleCol()}else{if("LAYTABLE_EXPORT"===y){v.exportData("show")}else{if("LAYTABLE_PRINT"===y){v.printTable()}else{layui.event.call(this,h,"toolbar("+u.filter+")",{event:y,elem:z})}}}});u.$tBodyGroup.on("scroll",function(){var y=g(this);u.$tHeadGroup.scrollLeft(y.scrollLeft())});u.$toolbar.off("click.export").on("click.export",".layui-table-tool-panel>[data-type]",function(){var y=g(this).data("type");if("csv"===y||"xls"===y){v.exportData(y)}});u.$toolbar.off("click.panel").on("click.panel",".layui-table-tool-panel",function(y){layui.stope(y)});c.on("checkbox("+u.colsToggleFilter+")",function(y){v.toggleCol(y.elem.checked,undefined,y.value)})};p.prototype.getComponents=function(){var v=g(this.options.elem).next(".ew-tree-table");var t=v.attr("lay-filter");var w=v.children(".ew-tree-table-head");var u=v.children(".ew-tree-table-box");return{$view:v,filter:t,$tHeadGroup:w,$tBodyGroup:u,$tHead:w.children(".layui-table"),$tBody:u.children(".layui-table"),$table:v.find(".layui-table"),$toolbar:v.children(".ew-tree-table-tool"),$empty:u.children(".ew-tree-table-empty"),$loading:u.children(".ew-tree-table-loading"),checkboxFilter:"ew_tb_checkbox_"+t,radioFilter:"ew_tb_radio_"+t,chooseAllFilter:"ew_tb_choose_all_"+t,colsToggleFilter:"ew_tb_toggle_cols"+t}};p.prototype.eachCols=function(w,v){if(!v){v=this.options.colArrays}for(var t=0;tlength;t++){var u=v[t];w&&w(t,u);if(u.CHILD_COLS){this.eachCols(w,u.CHILD_COLS)}}};p.prototype.eachData=function(w,v){if(!v){v=this.options.data}for(var t=0;tlength;t++){var u=v[t];w&&w(t,u);if(u[this.options.tree.childName]){this.eachData(w,u[this.options.tree.childName])}}};p.prototype.renderBodyAsync=function(x,w){var v=this;var t=this.options;var u=this.getComponents();if(w){w.addClass("ew-tree-table-loading");w.find(".ew-tree-pack").children(".ew-tree-table-arrow").addClass("layui-anim layui-anim-rotate layui-anim-loop")}else{u.$empty.hide();if(t.data&&t.data.length>0){u.$loading.addClass("ew-loading-float")}u.$loading.show()}t.reqData(x,function(y){if(typeof y!=="string"&&y&&y.length>0&&t.tree.isPidData){y=a.pidToChildren(y,t.tree.idName,t.tree.pidName,t.tree.childName)}v.renderBodyData(y,x,w)})};p.prototype.renderBodyData=function(w,A,x){var u;if(typeof w==="string"){u=w;w=[]}var z=this;var C=this.options;var y=this.getComponents();if(A===undefined){C.data=w}else{A[C.tree.childName]=w}var v;if(x){v=parseInt(x.data("indent"))+1;A[C.tree.openName]=true}var t=this.renderBody(w,v,A);if(x){x.nextAll("tr").each(function(){if(parseInt(g(this).data("indent"))<=(v-1)){return false}g(this).remove()});x.after(t).addClass("ew-tree-table-open")}else{y.$tBody.children("tbody").html(t)}c.render(null,y.filter);this.renderNumberCol();if(x){this.checkParentCB(x);x.prevAll("tr").each(function(){var D=parseInt(g(this).data("indent"));if(D<(v-1)){z.checkParentCB(g(this));v=D+1}});x.removeClass("ew-tree-table-loading");var B=x.find(".ew-tree-pack").children(".ew-tree-table-arrow");B.removeClass("layui-anim layui-anim-rotate layui-anim-loop");if(u){x.removeClass("ew-tree-table-open")}else{if(w&&w.length===0){A[C.tree.haveChildName]=false;x.data("have-child",false);B.addClass("ew-tree-table-arrow-hide");B.next(".ew-tree-icon").after(C.tree.getIcon(A)).remove()}}}else{y.$loading.hide();y.$loading.removeClass("ew-loading-float");if(w&&w.length>0){y.$empty.hide()}else{y.$empty.show();if(u){y.$empty.text(u)}else{y.$empty.html(C.text.none)}}}this.checkChooseAllCB();f(y.$view);C.done&&C.done(w)};p.prototype.renderBody=function(z,t,y){var u=this.options;if(!t){t=0}var x="";if(!z||z.length===0){return x}var w=y?!y[u.tree.openName]:undefined;for(var v=0;vlength;v++){var A=z[v];A.LAY_INDEX=(y?y.LAY_INDEX+"-":"")+v;x+=this.renderBodyTr(A,t,w);x+=this.renderBody(A[u.tree.childName],t+1,A)}return x};p.prototype.renderBodyTr=function(B,u,x,w){var z=this;var C=this.options;if(!u){u=0}var A=B[C.tree.haveChildName];if(A===undefined){A=B[C.tree.childName]&&B[C.tree.childName].length>0}if(w){w.data("have-child",A?"true":"false");w.data("indent",u);w.removeClass("ew-tree-table-loading")}var v=";var t="";if(A&&B[C.tree.openName]){t+="ew-tree-table-open"}if(x){t+="ew-tree-tb-hide"}v+=(' class="'+t+'"');if(A){v+=(' data-have-child="'+A+'"')}v+=(' data-index="'+B.LAY_INDEX+'"');v+=(' data-indent="'+u+'">');var y=0;this.eachCols(function(E,D){if(D.colGroup){return}v+=z.renderBodyTd(B,u,y,w?w.children("td").eq(y):undefined,D);y++});v+="";return v};p.prototype.renderBodyTd=function(C,v,A,t,u){if(u.colGroup){return""}var F=this.options;var y=this.getComponents();if(!v){v=0}var B="",E="",D="";if(u.type==="numbers"){B=''}else{if(u.type==="checkbox"){B=[',C.LAY_CHECKED?' checked="checked"':"",' lay-filter="',y.checkboxFilter,'"',' lay-skin="primary" class="ew-tree-table-checkbox',C.LAY_INDETERMINATE?" ew-form-indeterminate":"",'" />'].join("")}else{if(u.type==="radio"){B=[',C.LAY_CHECKED?' checked="checked"':"",' lay-filter="',y.radioFilter,'"',' name="',y.radioFilter,'"',' class="ew-tree-table-radio" />'].join("")}else{if(u.templet){if(typeof u.templet==="function"){B=u.templet(C)}else{if(typeof u.templet==="string"){d(g(u.templet).html()).render(C,function(G){B=G})}}}else{if(u.toolbar){if(typeof u.toolbar==="function"){B=u.toolbar(C)}else{if(typeof u.toolbar==="string"){d(g(u.toolbar).html()).render(C,function(G){B=G})}}}else{if(u.field&&C[u.field]!==undefined&&C[u.field]!==null){B=b.escape(C[u.field]===0?"0":C[u.field])}}}}}}if(A===F.tree.iconIndex){for(var w=0;w''}D+='';var z=C[F.tree.haveChildName];if(z===undefined){z=C[F.tree.childName]&&C[F.tree.childName].length>0}D+=('"":" ew-tree-table-arrow-hide"));D+=(" "+(F.tree.arrowType||"")+'">');D+=F.tree.getIcon(C);B=""+B+"";if(F.tree.onlyIconControl){B=D+""+B}else{B=D+B+""}}E=['
      singleLine===undefined||u.singleLine?" single-line":"",'"',u.align?' align="'+u.align+'"':"",">",'   
      ',B,"
      "      ,'   ','   ',"
      "      ].join("");if(t){t.html(E)}var x=";if(u.field){x+=(' data-field="'+u.field+'"')}if(u.edit){x+=(' data-edit="'+u.edit+'"')}if(u.type){x+=(' data-type="'+u.type+'"')}if(u.key){x+=(' data-key="'+u.key+'"')}if(u.style){x+=(' style="'+u.style+'"')}if(u["class"]){x+=(' class="'+u["class"]+(u.hide?" layui-hide":"")+'"')}else{if(u.hide){x+=(' class="layui-hide"')}}x+=(">"+E+"");return x};p.prototype.renderBodyTh=function(){var t=this.options;var v=this.getComponents();var u=[];g.each(t.cols,function(x,w){u.push("");g.each(w,function(A,z){u.push(");if(z.colspan){u.push(' colspan="'+z.colspan+'"')}if(z.rowspan){u.push(' rowspan="'+z.rowspan+'"')}if(z.type){u.push(' data-type="'+z.type+'"')}if(z.key){u.push(' data-key="'+z.key+'"')}if(z.parentKey){u.push(' data-parent="'+z.parentKey+'"')}if(z.hide){u.push(' class="layui-hide"')}u.push(">");u.push('
      singleLine===undefined||z.singleLine?" single-line":"")+'"');if(z.thAlign||z.align){u.push(' align="'+(z.thAlign||z.align)+'"')}u.push(">");u.push('
      ');var y='chooseAllFilter+'" lay-skin="primary" class="ew-tree-table-checkbox"/>';if(z.type==="checkbox"){u.push(y)}else{u.push(z.title||"")}u.push('
      '      );u.push('
      '      );if(!z.colGroup&&!z.unresize){u.push('')}u.push("")});u.push("")});return u.join("")};p.prototype.resize=function(z){var t=this.options;var x=this.getComponents();var v=1,u=1,A=true,w=0;this.eachCols(function(B,C){if(C.colGroup||C.hide){return}if(C.width){u+=(C.width+1);if(C.minWidth){if(C.widthminWidth      ){C.width=C.minWidth}}else{if(C.widthcellMinWidth      ){C.width=t.cellMinWidth}}}else{A=false}if(C.width){v+=(C.width+1)}else{if(C.minWidth){v+=(C.minWidth+1);w+=C.minWidth}else{v+=(t.cellMinWidth+1);w+=t.cellMinWidth}}});if(v){x.$tHead.css("min-width",v);x.$tBody.css("min-width",v)}else{x.$tHead.css("min-width","auto");x.$tBody.css("min-width","auto")}if(A){x.$tHead.css("width",u);x.$tBody.css("width",u)}else{x.$tHead.css("width","100%");x.$tBody.css("width","100%")}var y=[];this.eachCols(function(B,C){if(C.colGroup||C.hide){return}y.push(");if(C.width){y.push(' width="'+C.width+'"')}else{if(C.minWidth){y.push(' width="'+(C.minWidth/w*100).toFixed(2)+'%"')}else{y.push(' width="'+(t.cellMinWidth/w*100).toFixed(2)+'%"')}}if(C.type){y.push(' data-type="'+C.type+'"')}if(C.key){y.push(' data-key="'+C.key+'"')}y.push("/>")});y=y.join("");if(z){return""+y+""}x.$table.children("colgroup").html(y)};p.prototype.getDataByTr=function(v){var w,t;if(typeof v!=="string"&&typeof v!=="number"){if(v){t=v.data("index")}}else{t=v}if(t===undefined){return}if(typeof t==="number"){t=[t]}else{t=t.split("-")}for(var u=0;ulength;u++){if(w){w=w[this.options.tree.childName][t[u]]}else{w=this.options.data[t[u]]}}return w};p.prototype.checkSubCB=function(y,x){var w=this;var v=this.getComponents();var t=-1,u;if(y.is("tbody")){u=y.children("tr")}else{t=parseInt(y.data("indent"));u=y.nextAll("tr")}u.each(function(){if(parseInt(g(this).data("indent"))<=t){return false}var A=g(this).children("td").find('input[lay-filter="'+v.checkboxFilter+'"]');A.prop("checked",x);A.removeClass("ew-form-indeterminate");if(x){A.next(".layui-form-checkbox").addClass("layui-form-checked")}else{A.next(".layui-form-checkbox").removeClass("layui-form-checked")}var z=w.getDataByTr(g(this));z.LAY_CHECKED=x;z.LAY_INDETERMINATE=false})};p.prototype.checkParentCB=function(x){var u=this.options;var w=this.getComponents();var z=this.getDataByTr(x);var y=0,v=0;if(z[u.tree.childName]){function t(C){for(var B=0;Blength;B++){if(C[B].LAY_CHECKED){y++}else{v++}if(C[B][u.tree.childName]){t(C[B][u.tree.childName])}}}t(z[u.tree.childName])}var A=x.children("td").find('input[lay-filter="'+w.checkboxFilter+'"]');if(y>0&&v===0){A.prop("checked",true);A.removeClass("ew-form-indeterminate");A.next(".layui-form-checkbox").addClass("layui-form-checked");z.LAY_CHECKED=true;z.LAY_INDETERMINATE=false}else{if(y===0&&v>0){A.prop("checked",false);A.removeClass("ew-form-indeterminate");A.next(".layui-form-checkbox").removeClass("layui-form-checked");z.LAY_CHECKED=false;z.LAY_INDETERMINATE=false}else{if(y>0&&v>0){A.prop("checked",true);A.data("indeterminate","true");A.addClass("ew-form-indeterminate");A.next(".layui-form-checkbox").addClass("layui-form-checked");z.LAY_CHECKED=true;z.LAY_INDETERMINATE=true}}}};p.prototype.checkChooseAllCB=function(){var u=this.options;var w=this.getComponents();var x=0,v=0;function t(A){for(var z=0;zlength;z++){if(A[z].LAY_CHECKED){x++}else{v++}if(A[z][u.tree.childName]){t(A[z][u.tree.childName])}}}t(u.data);var y=w.$view.find('input[lay-filter="'+w.chooseAllFilter+'"]');if(x>0&&v===0){y.prop("checked",true);y.removeClass("ew-form-indeterminate");y.next(".layui-form-checkbox").addClass("layui-form-checked")}else{if((x===0&&v>0)||(x===0&&v===0)){y.prop("checked",false);y.removeClass("ew-form-indeterminate");y.next(".layui-form-checkbox").removeClass("layui-form-checked")}else{if(x>0&&v>0){y.prop("checked",true);y.addClass("ew-form-indeterminate");y.next(".layui-form-checkbox").addClass("layui-form-checked")}}}};p.prototype.renderNumberCol=function(){this.getComponents().$tBody.children("tbody").children("tr").each(function(t){g(this).children("td").find(".ew-tree-table-numbers").text(t+1)})};p.prototype.getIndexById=function(v){var t=this.options;function u(x,y){for(var w=0;wlength;w++){if(x[w][t.tree.idName]==v){return y!==undefined?y+"-"+w:w}if(x[w][t.tree.childName]){return u(x[w][t.tree.childName],y!==undefined?y+"-"+w:w)}}}return u(t.data)};p.prototype.expand=function(x,u){var w=this.getComponents();var v=w.$table.children("tbody").children('tr[data-index="'+this.getIndexById(x)+'"]');if(!v.hasClass("ew-tree-table-open")){v.children("td").find(".ew-tree-pack").trigger("click")}if(u===false){return}var t=parseInt(v.data("indent"));v.prevAll("tr").each(function(){var y=parseInt(g(this).data("indent"));if(yif(!g(this).hasClass("ew-tree-table-open")){g(this).children("td").find(".ew-tree-pack").trigger("click")}t=y}})};p.prototype.fold=function(v){var u=this.getComponents();var t=u.$table.children("tbody").children('tr[data-index="'+this.getIndexById(v)+'"]');if(t.hasClass("ew-tree-table-open")){t.children("td").find(".ew-tree-pack").trigger("click")}};p.prototype.expandAll=function(){this.getComponents().$table.children("tbody").children("tr").each(function(){if(!g(this).hasClass("ew-tree-table-open")){g(this).children("td").find(".ew-tree-pack").trigger("click")}})};p.prototype.foldAll=function(){this.getComponents().$table.children("tbody").children("tr").each(function(){if(g(this).hasClass("ew-tree-table-open")){g(this).children("td").find(".ew-tree-pack").trigger("click")}})};p.prototype.getData=function(){return this.options.data};p.prototype.reload=function(t){this.initOptions(this.options?g.extend(true,this.options,t):t);this.init();this.bindEvents()};p.prototype.checkStatus=function(t){if(t===undefined){t=true}var u=[];this.eachData(function(v,w){if((t||!w.LAY_INDETERMINATE)&&w.LAY_CHECKED){u.push(g.extend({isIndeterminate:w.LAY_INDETERMINATE},w))}});return u};p.prototype.setChecked=function(u){var w=this;var v=this.getComponents();var t=v.$table.find('input[lay-filter="'+v.radioFilter+'"]');if(t.length>0){t.each(function(){var x=w.getDataByTr(g(this).parentsUntil("tr").parent());if(x&&u[u.length-1]==x[w.options.tree.idName]){g(this).next(".layui-form-radio").trigger("click");return false}})}else{v.$table.find('input[lay-filter="'+v.checkboxFilter+'"]').each(function(){var C=g(this);var y=C.next(".layui-form-checkbox");var z=C.prop("checked");var B=C.hasClass("ew-form-indeterminate");var A=w.getDataByTr(C.parentsUntil("tr").parent());for(var x=0;xlength;x++){if(A&&u[x]==A[w.options.tree.idName]){if(A[w.options.tree.childName]&&A[w.options.tree.childName].length>0){continue}if(!z||B){y.trigger("click")}}}})}};p.prototype.removeAllChecked=function(){this.checkSubCB(this.getComponents().$table.children("tbody"),false)};p.prototype.exportData=function(w){var y=this.getComponents();if("show"===w){y.$toolbar.find(".layui-table-tool-panel").remove();y.$toolbar.find('[lay-event="LAYTABLE_EXPORT"]').append(['
        ','   
      • 导出到 Csv 文件
        • '        ,'   
      • 导出到 Excel 文件
        • '        ,"
      "      ].join(""))}else{if(o.ie){return layer.msg("不支持ie导出")}if(!w){w="xls"}var u=[],t=[];this.eachCols(function(A,B){if(B.type!=="normal"||B.hide){return}u.push(B.title||"")});y.$tBody.children("tbody").children("tr").each(function(){var A=[];g(this).children("td").each(function(){var B=g(this);if(B.data("type")!=="normal"||B.hasClass("layui-hide")){return true}A.push(B.text().trim().replace(/,/g,"，"))});t.push(A.join(","))});var v=document.createElement("a");var x=encodeURIComponent(u.join(",")+"\r\n"+t.join("\r\n"));var z=({csv:"text/csv",xls:"application/vnd.ms-excel"})[w];v.href="data:"+z+";charset=utf-8,\ufeff"+x;v.download=(this.options.title||"table")+"."+w;document.body.appendChild(v);v.click();document.body.removeChild(v)}};p.prototype.printTable=function(){var w=this.getComponents();var z=w.$tHead.children("thead").html();if(!z){z=w.$tBody.children("thead").html()}var x=w.$tBody.children("tbody").html();var v=w.$tBody.children("colgroup").html();var u=g(['',"   ",v,"","   ",z,"","   ",x,"","
      "      ].join(""));u.find('col[data-type="checkbox"],col[data-type="radio"],col[data-type="tool"]').remove();u.find('td[data-type="checkbox"],td[data-type="radio"],td[data-type="tool"],.layui-hide').remove();function A(F){var C=F.data("parent"),D;if(!C){return}var E=u.children("thead").children("tr").children('[data-key="'+C+'"]');var G=parseInt(E.attr("colspan"))-1;E.attr("colspan",G);if(G===0){E.remove()}A(E)}u.find('th[data-type="checkbox"],th[data-type="radio"],th[data-type="tool"]').each(function(){A(g(this))}).remove();var t=[""].join("");var y=window.open("","_blank");y.focus();var B=y.document;B.open();B.write(u[0].outerHTML+t);B.close();y.print();y.close()};p.prototype.toggleCol=function(A,z,B){var w=this.getComponents();if(A===undefined){w.$toolbar.find(".layui-table-tool-panel").remove();var x=['
        '];this.eachCols(function(D,E){if(E.type!=="normal"){return}x.push('
      • );x.push(' lay-filter="'+w.colsToggleFilter+'"');x.push(' value="'+E.key+'" title="'+b.escape(E.title||"")+'"');x.push((E.hide?"":" checked")+">
        • "        )});w.$toolbar.find('[lay-event="LAYTABLE_COLS"]').append(x.join("")+"
      "      );c.render("checkbox",w.filter)}else{if(B){var u=w.$table.children("tbody").children("tr").children('[data-key="'+B+'"]');var C=w.$table.children("thead").children("tr").children('[data-key="'+B+'"]');if(A){u.removeClass("layui-hide");C.removeClass("layui-hide")}else{u.addClass("layui-hide");C.addClass("layui-hide")}var y=B.split("-");var v=this.options.cols[y[0]][y[1]];v.hide=!A;function t(G){var D=G.data("parent"),E;if(!D){return}var F=w.$table.children("thead").children("tr").children('[data-key="'+D+'"]');var H=F.attr("colspan");A?H++:H--;F.attr("colspan",H);if(H===0){F.addClass("layui-hide")}else{F.removeClass("layui-hide")}t(F)}t(C);this.eachCols(function(D,E){if(E.key===B){E.hide=v.hide}});this.resize()}}};p.prototype.filterData=function(y){var A=this.getComponents();A.$loading.show();if(this.options.data.length>0){A.$loading.addClass("ew-loading-float")}var x=A.$table.children("tbody").children("tr");var u=[];if(typeof y==="string"){x.each(function(){var B=g(this).data("index");g(this).children("td").each(function(){if(g(this).text().indexOf(y)!==-1){u.push(B);return false}})})}else{for(var w=0;wlength;w++){u.push(this.getIndexById(y[w]))}}x.addClass("ew-tree-table-filter-hide");for(var v=0;vlength;v++){var z=x.filter('[data-index="'+u[v]+'"]');z.removeClass("ew-tree-table-filter-hide");var t=parseInt(z.data("indent"));z.nextAll("tr").each(function(){if(parseInt(g(this).data("indent"))<=t){return false}g(this).removeClass("ew-tree-table-filter-hide")});if(z.hasClass("ew-tree-table-open")){i(z)}z.prevAll("tr").each(function(){var B=parseInt(g(this).data("indent"));if(Bg(this).removeClass("ew-tree-table-filter-hide");if(!g(this).hasClass("ew-tree-table-open")){i(g(this))}t=B}})}A.$loading.hide();A.$loading.removeClass("ew-loading-float");if(u.length===0){A.$empty.show()}f(A.$view)};p.prototype.clearFilter=function(){var t=this.getComponents();t.$table.children("tbody").children("tr").removeClass("ew-tree-table-filter-hide");if(this.options.data.length>0){t.$empty.hide()}f(t.$view)};p.prototype.refresh=function(x,v){if(l(x)==="Array"){v=x;x=undefined}var u=this.getComponents();var w,t;if(x!==undefined){t=u.$table.children("tbody").children('tr[data-index="'+this.getIndexById(x)+'"]');w=this.getDataByTr(t)}if(v){if(this.data.length>0){u.$loading.addClass("ew-loading-float")}u.$loading.show();if(v.length>0&&this.options.tree.isPidData){this.renderBodyData(a.pidToChildren(v,this.options.tree.idName,this.options.tree.pidName,this.options.tree.childName),w,t)}else{this.renderBodyData(v,w,t)}}else{this.renderBodyAsync(w,t)}};p.prototype.del=function(x,u){if(u===undefined){u=this.getIndexById(x)}var t=(typeof u==="number"?[u]:u.split("-"));var w=this.options.data;if(t.length>1){for(var v=0;vlength-1;v++){w=w[parseInt(t[v])][this.options.tree.childName]}}w.splice(t[t.length-1],1)};p.prototype.update=function(u,t){g.extend(true,this.getDataByTr(this.getIndexById(u)),t)};function i(v){var t=parseInt(v.data("indent"));var u=v.hasClass("ew-tree-table-open");if(u){v.removeClass("ew-tree-table-open");v.nextAll("tr").each(function(){if(parseInt(g(this).data("indent"))<=t){return false}g(this).addClass("ew-tree-tb-hide")})}else{v.addClass("ew-tree-table-open");var w;v.nextAll("tr").each(function(){var x=parseInt(g(this).data("indent"));if(x<=t){return false}if(w!==undefined&&x>w){return true}g(this).removeClass("ew-tree-tb-hide");if(!g(this).hasClass("ew-tree-table-open")){w=parseInt(g(this).data("indent"))}else{w=undefined}})}f(v.parentsUntil(".ew-tree-table").last().parent());return u}function f(w){var t=w.children(".ew-tree-table-head");var u=w.children(".ew-tree-table-box");var v=u.width()-u.prop("clientWidth");t.css("border-right",(v>0?v:0)+"px solid #f2f2f2")}g(window).resize(function(){g(".ew-tree-table").each(function(){f(g(this));var u=g(this).children(".ew-tree-table-box");var t=u.data("full");if(t&&o.ie&&o.ie<10){u.css("height",m()-t)}})});g(document).on("mouseenter",".ew-tree-table-cell.single-line",function(){var t=g(this).children(".ew-tree-table-cell-content");if(t.prop("scrollWidth")>t.outerWidth()){g(this).children(".layui-table-grid-down").show()}}).on("mouseleave",".ew-tree-table-cell.single-line",function(){g(this).children(".layui-table-grid-down").hide()});g(document).on("click",".ew-tree-table-cell>.layui-table-grid-down",function(w){w.stopPropagation();j();var u=g(this).parent();u.addClass("ew-tree-tips-open");u.children(".layui-table-grid-down").hide();var t=u.parent().outerWidth()+4;if(u.outerWidth()children(".ew-tree-table-cell-content").css({"width":t,"max-width":t})}var v=u.parents().filter(".ew-tree-table-box");if(v.length===0){v=u.parents().filter(".ew-tree-table-head")}if(v.length===0){return}if((u.outerWidth()+u.offset().left)+20>v.offset().left+v.outerWidth()){u.addClass("ew-show-left")}if((u.outerHeight()+u.offset().top+10)>v.offset().top+v.outerHeight()){u.addClass("ew-show-bottom")}});g(document).on("click",".ew-tree-table-cell>.ew-tree-tips-c",function(){j()});g(document).on("click",function(){j();g(".ew-tree-table .layui-table-tool-panel").remove()});g(document).on("click",".ew-tree-table-cell.ew-tree-tips-open",function(t){t.stopPropagation()});function j(){g(".ew-tree-table-cell").removeClass("ew-tree-tips-open ew-show-left ew-show-bottom");g(".ew-tree-table-cell>.ew-tree-table-cell-content").css({"width":"","max-width":""})}g(document).on("mousedown",".ew-tb-resize",function(x){layui.stope(x);var v=g(this);v.attr("move","true");var u=v.parent().data("key");v.data("x",x.clientX);var t=v.parent().parent().parent().parent().children("colgroup").children('col[data-key="'+u+'"]').attr("width");if(!t||t.toString().indexOf("%")!==-1){t=v.parent().outerWidth()}v.data("width",t);g("body").addClass("ew-tree-table-resizing")}).on("mousemove",function(B){var y=g('.ew-tree-table .ew-tb-resize[move="true"]');if(y.length===0){return}layui.stope(B);var t=y.data("x");var v=y.data("width");var u=parseFloat(v)+B.clientX-parseFloat(t);if(u<=0){u=1}var z=k[y.parentsUntil(".ew-tree-table").last().parent().attr("lay-filter")];var A=y.parent().data("key");var C=A.split("-");z.options.cols[C[0]][C[1]].width=u;z.eachCols(function(w,x){if(x.key===A){x.width=u}});z.resize()}).on("mouseup",function(t){g('.ew-tree-table .ew-tb-resize[move="true"]').attr("move","false");g("body").removeClass("ew-tree-table-resizing")}).on("mouseleave",function(t){g('.ew-tree-table .ew-tb-resize[move="true"]').attr("move","false");g("body").removeClass("ew-tree-table-resizing")});function q(x,u,z){var y=[];for(var w=0;wlength;w++){var t=false;for(var v=0;vlength;v++){if(x[w][z]==x[v][u]){t=true;break}}if(!t){y.push(x[w][z])}}return y}function n(u,v){if(l(v)==="Array"){for(var t=0;tlength;t++){if(u==v[t]){return true}}}return u==v}function l(t){if(t===null){return"Null"}if(t===undefined){return"Undefined"}return Object.prototype.toString.call(t).slice(8,-1)}function m(){return document.documentElement.clientHeight||document.body.clientHeight}var a={render:function(t){return new p(t)},reload:function(u,t){k[u].reload(t)},on:function(t,u){return layui.onevent.call(this,h,t,u)},pidToChildren:function(z,u,A,t,x){if(!t){t="children"}var y=[];for(var w=0;wlength;w++){if(z[w][u]==z[w][A]){return console.error("第"+w+"条数据的"+u+"与"+A+"相同",z[w])}if(x===undefined){x=q(z,u,A)}if(n(z[w][A],x)){var v=this.pidToChildren(z,u,A,t,z[w][u]);if(v.length>0){z[w][t]=v}y.push(z[w])}}return y}};g("head").append(['"].join(""));s("treeTable",a)});

    三、树结构展开（数据可懒加载）

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>设备上下线统计title>
    7.  
    8.     <script type="text/javascript" src="../../../language/language.js">script>
    9.     <script type="text/javascript" src="../../proto/protobuf.min.js">script>
    10.     <script type="text/javascript" src="../../component/js/common.js">script>
    11.     <script type="text/javascript" src="../../component/js/commonNew.js">script>
    12.  
    13.     <script type="text/javascript" src="../../layui/layui.js?r=3.0">script>
    14.     <link type="text/css" rel="stylesheet" href="../../layui/css/layui_base.css"/>
    15.     <script type="text/javascript" src="../../component/js/jquery-2.1.0.min.js">script>
    16.  
    17.     
    18.     <script src="../../component/js/xlsx.js">script>
    19.     <script src="../../component/xlsx/dom.js">script>
    20.     <script src="../../component/xlsx/xlsx.core.min.js">script>
    21.  
    22.     <script type="text/javascript" src="./error.js?r=1.3.3">script>
    23. head>
    24.  
    25. <body>
    26. <form class="layui-form">
    27.     
    28.     <div id="none">
    29.         <table class="layui-table" lay-filter="tabView" id="tabView">table>
    30.     div>
    31.  
    32. form>
    33. body>
    34.  
    35. <script>
    36.     var userPerson = getUser();
    37.     var httpUser = { userName: userPerson.name, userGuid: userPerson.sessionId };
    38.  
    39.     let IPS;
    40.     let str = document.domain;
    41.     if (document.domain == 'localhost' || document.domain == "192.168.100.50") {
    42.         IPS = 'https://xxc.chinamdvr.com:7050/v1/api/web/mgmt/deviceSetup/setupTicket/statistic';
    43.     } else {
    44.         IPS = 'https://www.chinamdvr.com:9201/v1/api/web/mgmt/deviceSetup/setupTicket/statistic';
    45.     }
    46.  
    47.     let $, element, form, laydate, layer, tableView, util, treeTable;
    48.  
    49.     let listData = [
    50.     {
    51.         "region": "系统管理",
    52.         "required": 1,
    53.         "installed": 2,
    54.         "checked": 3,
    55.         "installNo": 4,
    56.         "process": "60%",
    57.  
    58.         "parentId": -1,
    59.         id: 1,
    60.         "open": false,
    61.         "haveChild": true
    62.     }];
    63.  
    64.     layui.config({
    65.         base: './'
    66.     }).use(['element', 'form', 'laydate', 'layer', "util", "treeTable"], function(){
    67.         form = layui.form, laydate = layui.laydate, layer = layui.layer;
    68.         util = layui.util;
    69.         element = layui.element;
    70.         $ = layui.$;
    71.         treeTable = layui.treeTable;
    72.  
    73.         // 渲染
    74.         var inst = treeTable.render({
    75.             elem: '#tabView',
    76.             tree: {
    77.                 iconIndex: 0,
    78.                 isPidData: true,
    79.                 idName: 'id', // 父ID
    80.                 pidName: 'parentId', // 子ID
    81.                 // openName: 'open',// 是否默认展开的字段名
    82.             },
    83.             maxHeight: '501px',
    84.             cols: [[
    85.                 { field: 'region', title: "网点所在区", align: 'center' },
    86.                 { field: 'required', title: "总数", align: 'center' },
    87.                 { field: 'installed', title: "已安装", align: 'center' },
    88.                 // { field: 'checked', title: "已验收", align: 'center' },
    89.                 // { field: 'installNo', title: "未验收", align: 'center' },
    90.                 { field: 'process', title: "安装进度", align: 'center', templet: schedule },
    91.             ]],
    92.             reqData: function (data, callback) {  // 懒加载也可以用url方式，这里用reqData方式演示
    93.                 console.log(data)
    94.                 if (data == undefined) {
    95.                     callback([{
    96.                         "region": "系统管理",
    97.                         "required": 1,
    98.                         "installed": 2,
    99.                         "checked": 3,
    100.                         "installNo": 4,
    101.                         "process": "60%",
    102.  
    103.                         "parentId": -1,
    104.                         id: 1,
    105.                         "open": false,
    106.                         "haveChild": true
    107.                     }]);
    108.                 } else if (data.id == 1) {
    109.                     callback([{
    110.                         "region": "用户管理",
    111.                         "required": 11,
    112.                         "installed": 22,
    113.                         "checked": 33,
    114.                         "installNo": 44,
    115.                         "process": "61%",
    116.  
    117.                         "parentId": 1,
    118.                         id: 2,
    119.                         "open": false,
    120.                         "haveChild": true
    121.                     }]);
    122.                 } else if (data.id == 2) {
    123.                     callback([{
    124.                         "region": "查询用户",
    125.                         "required": 111,
    126.                         "installed": 222,
    127.                         "checked": 333,
    128.                         "installNo": 444,
    129.                         "process": "63%",
    130.  
    131.                         "parentId": 2,
    132.                         id: 3,
    133.                         "open": false,
    134.                         "haveChild": false
    135.                     },
    136.                         {
    137.                             "region": "添加用户",
    138.                             "required": 1111,
    139.                             "installed": 2222,
    140.                             "checked": 3333,
    141.                             "installNo": 4444,
    142.                             "process": "64%",
    143.  
    144.                             "parentId": 2,
    145.                             id: 4,
    146.                             "open": false,
    147.                             "haveChild": false
    148.                         },
    149.                         {
    150.                             "region": "修改用户",
    151.                             "required": 11111,
    152.                             "installed": 22222,
    153.                             "checked": 33333,
    154.                             "installNo": 44444,
    155.                             "parentId": 2,
    156.                             "process": "67%",
    157.  
    158.                             "parentId": 2,
    159.                             id: 5,
    160.                             "open": false,
    161.                             "haveChild": false
    162.                         },
    163.                         {
    164.                             "region": "删除用户",
    165.                             "required": 111111,
    166.                             "installed": 222222,
    167.                             "checked": 333333,
    168.                             "installNo": 444444,
    169.                             "process": "69%",
    170.  
    171.                             "parentId": 2,
    172.                             id: 6,
    173.                             "open": false,
    174.                             "haveChild": false
    175.                         }]);
    176.                 }
    177.             },
    178.             toolbar: true,
    179.             defaultToolbar: ['exports'],
    180.             page: true,
    181.             done: function (res, curr, count) {
    182.                 element.render();
    183.                 // element.progress('rate', '75%');
    184.             }
    185.         });
    186.  
    187.         interfaceParam();
    188.     });
    189.  
    190.     /** 进度条 */
    191.     function schedule(d) {
    192.         //设置页面进度条
    193.         return '
      ' +
    194.             '
      'layui-bg-green' + '" lay-percent="' + d.process + '">' +
    195.             '
      '
    196.     }
    197.  
    198.     // 调用接口
    199.     function interfaceParam() {
    200.         let url = IPS + "/progress";
    201.  
    202.         let timerTimeOut, loadingTimeOut;
    203.         layui.use('layer', function () {
    204.             layer = layui.layer;
    205.             loadingTimeOut = layer.load(2, { shade: false });
    206.             timerTimeOut = setTimeout(function () {
    207.                 layer.open({
    208.                     title: languageTL.common.promptTitle,
    209.                     content: languageTL.count.btns2[5],
    210.                     btn: [languageTL.confirm]
    211.                 });
    212.                 layer.close(loadingTimeOut);
    213.             }, 1000 * 10);
    214.         });
    215.         proPostNew(url, "FtpManage.EpibolyTicketProgressReq", "FtpManage.EpibolyTicketProgressResp", { userInfo: httpUser }, function (code, result) {
    216.             clearTimeout(timerTimeOut); // 关闭定时器
    217.             layer.close(loadingTimeOut);
    218.             if (code == 200) {
    219.                 console.log(result)
    220.  
    221.                 result.epibolyTicketProgressList.map(item => {
    222.                     item.installNo = item.installed - item.checked;
    223.                     item.process = percentNum(item.installed , item.required);
    224.                 })
    225.  
    226.                 listData = result.epibolyTicketProgressList;
    227.  
    228.             } else {
    229.                 layer.msg(errLayer(result.code));
    230.             }
    231.         }, 'ftpManage', 'FtpManage.Error');
    232.     }
    233.  
    234.     //小数点后两位百分比
    235.     function percentNum(num,num2) {
    236.         return (Math.round(num / num2 * 10000) / 100.00 + "%");
    237.     }
    238.  
    239.  
    240. script>
    241.  
    242. html>

    四、树结构展开（添加分页）

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>设备上下线统计title>
    7.  
    8.     <script type="text/javascript" src="../../../language/language.js">script>
    9.     <script type="text/javascript" src="../../proto/protobuf.min.js">script>
    10.     <script type="text/javascript" src="../../component/js/common.js">script>
    11.     <script type="text/javascript" src="../../component/js/commonNew.js">script>
    12.  
    13.     <script type="text/javascript" src="../../layui/layui.js?r=3.0">script>
    14.     <link type="text/css" rel="stylesheet" href="../../layui/css/layui_base.css"/>
    15.     <script type="text/javascript" src="../../component/js/jquery-2.1.0.min.js">script>
    16.  
    17.     
    18.     <script src="../../component/js/xlsx.js">script>
    19.     <script src="../../component/xlsx/dom.js">script>
    20.     <script src="../../component/xlsx/xlsx.core.min.js">script>
    21.  
    22.     <script type="text/javascript" src="./error.js?r=1.3.3">script>
    23.  
    24. head>
    25.  
    26. <body>
    27. <form class="layui-form">
    28.  
    29.     <div class="layui-form-item" id="dateInput">
    30.         <div class="layui-inline">
    31.             <label class="layui-form-label"><script>document.write(languageTL.count.startTime)script>label>
    32.             <div class="layui-input-inline">
    33.                 <input type="text" name="startDate" class="layui-input" id="startDate" lay-verify="required">
    34.             div>
    35.         div>
    36.         <div class="layui-inline">
    37.             <label class="layui-form-label"><script>document.write(languageTL.count.endTime)script>label>
    38.             <div class="layui-input-inline">
    39.                 <input type="text" name="endDate" class="layui-input" id="endDate" lay-verify="required">
    40.             div>
    41.         div>
    42.     div>
    43.  
    44.     
    45.     <div class="layui-form-item" style="margin-left: 8px;">
    46.         <div class="layui-inline" style="margin-left: 90px;" id="queryBtn">
    47.             <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo">
    48.                 <script>document.write(languageTL.count.query)script>
    49.             button>
    50.         div>
    51.  
    52.         <div class="layui-inline" style="margin-left: 220px;">
    53.             <button type="button" class="layui-btn" id="totalAll" onclick="selectType(0)">已安装(0)button>
    54.             <button type="button" class="layui-btn layui-bg-green" id="yiYanShou" onclick="selectType(1)">已验收(0)button>
    55.             <button type="button" class="layui-btn layui-bg-red" id="weiYanShou" onclick="selectType(2)">未验收(0)button>
    56.         div>
    57.     div>
    58.  
    59.     
    60.     <div id="none">
    61.         <table class="layui-table" lay-filter="tabView" id="tabView">table>
    62.         <div id="demo-laypage-limits">div>
    63.     div>
    64.  
    65.     
    66.     <table class="layui-table" lay-filter="tabViewDetail" id="tabViewDetail">table>
    67.  
    68. form>
    69. body>
    70.  
    71. <script>
    72.     var userPerson = getUser();
    73.     var httpUser = { userName: userPerson.name, userGuid: userPerson.sessionId };
    74.  
    75.     let IPS, IPSDetail;
    76.     let str = document.domain;
    77.     if (document.domain == 'localhost' || document.domain == "192.168.100.50") {
    78.         IPS = 'https://xxc.chinamdvr.com:7050/v1/api/web/mgmt/deviceSetup/setupTicket/statistic';
    79.         IPSDetail = 'https://xxc.chinamdvr.com:7050/v1/api/web/mgmt/deviceSetup/setupTicket/detail';
    80.     } else {
    81.         IPS = 'https://www.chinamdvr.com:9201/v1/api/web/mgmt/deviceSetup/setupTicket/statistic';
    82.         IPSDetail = 'https://www.chinamdvr.com:9201/v1/api/web/mgmt/deviceSetup/setupTicket/detail';
    83.     }
    84.  
    85.     let $, element, form, laydate, layer, tableView, treeTable;
    86.  
    87.     let pageSize = 10, pageNum = 1, pageTotal = 0, pageData = [], laypage;
    88.  
    89.     let listData = [], listDataDetail = [], objData = {};
    90.     let number;
    91.  
    92.     let colsList = [
    93.         { field: 'region', title: "网点所在区", align: 'center' },
    94.         { field: 'totalInstalled', title: "已安装", align: 'center' },
    95.         // { field: 'newInstalled', title: "新安装设备", align: 'center' },
    96.         { field: 'checkFinished', title: "已验收", align: 'center' },
    97.         { field: 'totalUnchecked', title: "未验收", align: 'center' },
    98.     ];
    99.  
    100.     let colsListDetail = [
    101.         {field: 'plateNumber', title: languageTL.common.VehicleID, align: 'center'},
    102.         {field: 'sn', title: "SN", align: 'center'},
    103.         {field: 'stateS', title: languageTL.person.table_title_1[5], align: 'center'},
    104.         {field: 'creator', title: "安装人", align: 'center'},
    105.         {field: 'createAt', title: "安装时间", align: 'center'},
    106.         {field: 'companyName', title: "安装公司", align: 'center'},
    107.  
    108.         {field: 'auditTor', title: "审批人", align: 'center'},
    109.         {field: 'auditAt', title: "审批时间", align: 'center'},
    110.         {field: 'auditMemo', title: "审批备注", align: 'center'},
    111.  
    112.         {field: 'yanTor', title: "验收人", align: 'center'},
    113.         {field: 'yanAt', title: "验收时间", align: 'center'},
    114.         {field: 'yanMemo', title: "验收备注", align: 'center'},
    115.     ];
    116.  
    117.     layui.use(['element', 'form', 'laydate', 'layer'], function(){
    118.         $ = layui.jquery ,element = layui.element, form = layui.form, laydate = layui.laydate, layer = layui.layer;
    119.  
    120.         tableDetail();
    121.         tableRender();
    122.  
    123.         const LANGAll = getQueryLanguage("la");
    124.  
    125.         // 开始时间
    126.         laydate.render({
    127.             elem: '#startDate',
    128.             format: 'yyyy-MM-dd',
    129.             trigger: 'click',
    130.             type: 'date',
    131.             lang: LANGAll,
    132.             done: function (value, date) {
    133.                 $('#startDate').val(value);
    134.  
    135.                 let start = new Date(value).getTime();
    136.                 let end;
    137.                 let e = $('#endDate').val();
    138.  
    139.                 if (e == '') {
    140.                     end = 0;
    141.                 } else {
    142.                     end = new Date(e).getTime();
    143.  
    144.                     if (end < start) {
    145.                         $('#endDate').click();
    146.                         layer.msg(languageTL.gpsCount.tabs[6])
    147.                     }
    148.                 }
    149.             }
    150.         });
    151.  
    152.         // 结束时间
    153.         laydate.render({
    154.             elem: '#endDate',
    155.             format: 'yyyy-MM-dd',
    156.             type: 'date',
    157.             trigger: 'click',
    158.             lang: LANGAll,
    159.             done: function (value, date) {
    160.                 $('#endDate').val(value);
    161.  
    162.                 let end = new Date(value).getTime();
    163.                 let start;
    164.                 let s = $('#startDate').val();
    165.  
    166.                 if (s == '') {
    167.                     start = 0;
    168.                 } else {
    169.                     start = new Date(s).getTime();
    170.                     if (end < start) {
    171.                         $('#startDate').click();
    172.                         layer.msg(languageTL.gpsCount.tabs[5])
    173.                     }
    174.                 }
    175.             }
    176.         });
    177.  
    178.         $('#startDate').val(getDateInfo(0)); // 开始时间默认值
    179.         $('#endDate').val(getDateInfo(0)); // 结束时间默认值
    180.  
    181.         number = parseInt(getQueryStringOld("number"));
    182.  
    183.         if (number == 4001) {
    184.             $('#endDate').attr('lay-verify', '');
    185.             $('#startDate').attr('lay-verify', '');
    186.  
    187.             $("#dateInput").css("display", "none");
    188.             $("#queryBtn").css("display", "none");
    189.  
    190.             let url, requestParam, returnParam;
    191.             objData.userInfo = {
    192.                 userName: httpUser.userName,
    193.                 userGuid: httpUser.userGuid
    194.             };
    195.             url = IPS + "/all";
    196.             requestParam = "FtpManage.TicketStatisticAllReq";
    197.             returnParam = "FtpManage.TicketStatisticResp";
    198.             interfaceParam(url, requestParam, returnParam, objData, 1);
    199.         }
    200.  
    201.         form.render();
    202.  
    203.         //监听提交
    204.         form.on('submit(demo)', function (data) {
    205.             data = data.field;
    206.             let url, requestParam, returnParam;
    207.  
    208.             objData = {
    209.                 userInfo :{
    210.                     userName: httpUser.userName,
    211.                     userGuid: httpUser.userGuid
    212.                 },
    213.                 startDate : data.startDate,
    214.                 endDate : data.endDate
    215.             };
    216.             let a = new Date(Date.parse(data.endDatetime)).getTime();
    217.             let b = new Date(Date.parse(data.startDatetime)).getTime();
    218.             if (b > a) {
    219.                 layer.open({
    220.                     title: languageTL.common.promptTitle
    221.                     ,content: languageTL.count.btns[14],
    222.                     time: 3000
    223.                 });
    224.                 listData = [];
    225.                 listDataDetail = [];
    226.                 tableDetail();
    227.             } else {
    228.                 url = IPS + "/date";
    229.                 requestParam = "FtpManage.TicketStatisticDateReq";
    230.                 returnParam = "FtpManage.TicketStatisticResp";
    231.                 interfaceParam(url, requestParam, returnParam, objData, 1);
    232.             }
    233.             return false;
    234.         });
    235.     });
    236.  
    237.     // 调用接口
    238.     function interfaceParam(url, requestParam, returnParam, obj, number) {
    239.         let timerTimeOut, loadingTimeOut;
    240.         layui.use('layer', function () {
    241.             layer = layui.layer;
    242.             loadingTimeOut = layer.load(2, { shade: false });
    243.             timerTimeOut = setTimeout(function () {
    244.                 layer.open({
    245.                     title: languageTL.common.promptTitle,
    246.                     content: languageTL.count.btns2[5],
    247.                     btn: [languageTL.confirm]
    248.                 });
    249.                 layer.close(loadingTimeOut);
    250.             }, 1000 * 10);
    251.         });
    252.         proPostNew(url, requestParam, returnParam, obj, function (code, result) {
    253.             clearTimeout(timerTimeOut); // 关闭定时器
    254.             layer.close(loadingTimeOut);
    255.             if (code == 200) {
    256.                 console.log(result)
    257.                 if (number === 1) {
    258.                     if (result.summation) {
    259.                         $("#totalAll").html("已安装(" + result.summation.totalInstalled + ")");
    260.                         $("#yiYanShou").html("已验收(" + result.summation.checkFinished + ")");
    261.                         $("#weiYanShou").html("未验收(" + result.summation.totalUnchecked + ")");
    262.                     }
    263.                     result.ticketStatisticList.map((item, index) => {
    264.                         item.id = index;
    265.                         item.open = false;
    266.                         item.haveChild = false;
    267.                     })
    268.  
    269.                     pageData = result.ticketStatisticList;
    270.                     pageTotal = result.ticketStatisticList.length;
    271.  
    272.                     listData = pageData.slice((pageNum - 1) * pageSize, pageNum * pageSize);
    273.                     listDataDetail = [];
    274.                     tableRender();
    275.                 } else if (number === 2) {
    276.                     result.tickets.map(item => {
    277.                         if (item.result == 1 && item.stage == 2) {
    278.                             item.stateS = "待审批";
    279.                         } else if (item.result == 3 && item.stage == 2) {
    280.                             item.stateS = "审批未通过";
    281.                         } else if (item.result == 1 && item.stage == 3) {
    282.                             item.stateS = "审批通过";
    283.                         } else if (item.result == 2 && item.stage == 3) {
    284.                             item.stateS = "验收通过";
    285.                         } else if (item.result == 3 && item.stage == 3) {
    286.                             item.stateS = "验收未通过";
    287.                         }
    288.                     })
    289.                     listDataDetail = result.tickets;
    290.                 }
    291.                 tableDetail();
    292.             } else {
    293.                 layer.msg(errLayer(result.code));
    294.             }
    295.         }, 'ftpManage', 'FtpManage.Error');
    296.     }
    297.  
    298.     function tableRender () {
    299.         layui.config({
    300.             base: './'
    301.         }).use(['treeTable', "laypage"], function () {
    302.             treeTable = layui.treeTable;
    303.             laypage = layui.laypage;
    304.  
    305.             // 渲染
    306.             var inst = treeTable.render({
    307.                 elem: '#tabView',
    308.                 height: "250",
    309.                 tree: {
    310.                     iconIndex: 0,
    311.                     isPidData: true,
    312.                     idName: 'id', // 父ID
    313.                     pidName: 'parentId', // 子ID
    314.                     // openName: 'open',// 是否默认展开的字段名
    315.                 },
    316.                 maxHeight: '501px',
    317.                 cols: [colsList],
    318.                 reqData: function (data, callback) {  // 懒加载也可以用url方式，这里用reqData方式演示
    319.                     console.log(data)
    320.                     console.log("无敌是多么及名片")
    321.                     if (data == undefined) {
    322.                         callback(listData);
    323.                     } else if (data.id == 1) {
    324.  
    325.                     }
    326.                 },
    327.                 toolbar: true,
    328.                 defaultToolbar: [
    329.                     {
    330.                         title: "排列",
    331.                         layEvent: 'LAYTABLE_COLS',
    332.                         icon: 'layui-icon-cols'
    333.                     },
    334.                     {
    335.                         title: languageTL.historyMap.exportXls,
    336.                         layEvent: 'export',
    337.                         icon: 'layui-icon-export'
    338.                     }],
    339.                 page: true,
    340.             });
    341.  
    342.             treeTable.on('row(tabView)', function (obj) {
    343.                 let url, requestParam, returnParam;
    344.                 if (number == 4001) {
    345.                     let objEv = {
    346.                         userInfo: {
    347.                             userName: httpUser.userName,
    348.                             userGuid: httpUser.userGuid
    349.                         },
    350.                         region: obj.data.region
    351.                     }
    352.                     url = IPSDetail + "/all";
    353.                     requestParam = "FtpManage.TicketDetailAllReq";
    354.                     returnParam = "FtpManage.TicketDetailResp";
    355.                     interfaceParam(url, requestParam, returnParam, objEv, 2);
    356.                 } else {
    357.                     let objEv = {
    358.                         userInfo: {
    359.                             userName: httpUser.userName,
    360.                             userGuid: httpUser.userGuid
    361.                         },
    362.                         region: obj.data.region,
    363.                         startDate: objData.startDate,
    364.                         endDate: objData.endDate,
    365.                     }
    366.                     url = IPSDetail + "/date";
    367.                     requestParam = "FtpManage.TicketDetailDateReq";
    368.                     returnParam = "FtpManage.TicketDetailResp";
    369.                     interfaceParam(url, requestParam, returnParam, objEv, 2);
    370.                 }
    371.             });
    372.  
    373.             treeTable.on('toolbar(tabView)', function (obj) {
    374.                 switch (obj.event) {
    375.                     case 'export':
    376.                         if (listData.length == 0) {
    377.                             layer.msg(languageTL.deviceVideo.loss[3]);
    378.                             return;
    379.                         }
    380.  
    381.                         let tHeader = [], filterVal = [];
    382.                         colsList.map((item, index) => {
    383.                             tHeader.push(item.title);
    384.                             filterVal.push(item.field);
    385.                         });
    386.                         // 导出的数据
    387.                         const data = PlExportExcel.formatJson(filterVal, listData);
    388.                         // 导出表格
    389.                         PlExportExcel.exportJsonToExcel({
    390.                             header: tHeader,
    391.                             data: data,
    392.                             filename: "Device",
    393.                             autoWidth: true,
    394.                             bookType: 'xlsx'
    395.                         });
    396.                         break;
    397.                 };
    398.             });
    399.  
    400.             // 自定义每页条数的选择项
    401.             laypage.render({
    402.                 elem: 'demo-laypage-limits',
    403.                 count: pageTotal,
    404.                 limit: pageSize,
    405.                 curr: pageNum,
    406.                 limits: [10, 20, 50, 100],
    407.                 layout: ['count', 'prev', 'page', 'next', 'limit'],
    408.                 jump: function (obj, first) {
    409.                     //obj包含了当前分页的所有参数，比如：
    410.                     //obj.curr; //得到当前页，以便向服务端请求对应页的数据。
    411.                     //obj.limit; //得到每页显示的条数
    412.                     //首次不执行
    413.                     if (!first) {
    414.                         //do something
    415.                         pageSize = obj.limit;
    416.                         pageNum = obj.curr;
    417.  
    418.                         let from = (pageNum - 1) * pageSize;
    419.                         let to = pageNum * pageSize;
    420.                         listData = pageData.slice(from, to);
    421.                         tableRender();
    422.                     }
    423.                 }
    424.             });
    425.         });
    426.     }
    427.  
    428.     function tableDetail() {
    429.         layui.use('table', function () {
    430.             tableView = layui.table;
    431.             // 详细信息渲染表格
    432.             tableView.render({
    433.                 elem: '#tabViewDetail',
    434.                 data: listDataDetail,
    435.                 height: '320',
    436.                 toolbar: '#toolbarDemo',
    437.                 defaultToolbar: [{
    438.                     title: languageTL.historyMap.exportXls,
    439.                     layEvent: 'export',
    440.                     icon: 'layui-icon-export'
    441.                 }],
    442.                 cellMinWidth: 80,
    443.                 cols: [colsListDetail],
    444.                 page: true, //是否显示分页
    445.                 limits: [10, 20, 50, 100],
    446.                 page: {
    447.                     count: listDataDetail.length,
    448.                     prev: languageTL.common.previousStr,
    449.                     next: languageTL.common.nextStr,
    450.                     layout: ['prev', 'page', 'next', 'count', 'limit']
    451.                 }
    452.             });
    453.  
    454.             //头工具栏事件  详细信息导出
    455.             tableView.on('toolbar(tabViewDetail)', function (obj) {
    456.                 switch (obj.event) {
    457.                     //自定义头工具栏右侧图标 - 提示
    458.                     case 'export':
    459.                         if (listDataDetail.length == 0) {
    460.                             layer.msg(languageTL.deviceVideo.loss[3]);
    461.                             return;
    462.                         }
    463.  
    464.                         let tHeader = [], filterVal = [];
    465.                         colsListDetail.map((item, index) => {
    466.                             tHeader.push(item.title);
    467.                             filterVal.push(item.field);
    468.                         });
    469.                         // 导出的数据
    470.                         const data = PlExportExcel.formatJson(filterVal, listDataDetail);
    471.                         // 导出表格
    472.                         PlExportExcel.exportJsonToExcel({
    473.                             header: tHeader,
    474.                             data: data,
    475.                             filename: "Detail",
    476.                             autoWidth: true,
    477.                             bookType: 'xlsx'
    478.                         });
    479.                         break;
    480.                 };
    481.             });
    482.         });
    483.     }
    484.  
    485.     // 时间默认值
    486.     function getDateInfo(type) {
    487.         let date = new Date();
    488.         let year = date.getFullYear();
    489.         let month = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
    490.         let day = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate();
    491.         let hour = date.getHours() >= 10 ? date.getHours() : '0' + date.getHours();
    492.         let minute = date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()
    493.         let second = date.getSeconds() >= 10 ? date.getSeconds() : '0' + date.getSeconds()
    494.  
    495.         let month_1 = Number(month - 1) >= 10 ? Number(month - 1) : '0' + Number(month - 1);
    496.  
    497.         let arr = [
    498.             year + '-' + month + '-' + day
    499.         ];
    500.         return arr[type];
    501.     }
    502.  
    503. script>
    504.  
    505. html>

     

  • 相关阅读:
    乐鑫 ESP32-H2 SoC 与 Thread SDK 通过 Thread 1.3.0 认证
    开源酒店管理系统（C/S模式）
    计算机毕业设计Python+Django的银行取号管理系统
    【Python】 Python 使用 Pillow 处理图像：几何变换
    SpringCloud Alibaba——精读Nacos+CMDB+核心源码阅读（7w字长篇）
    模板多多的BI系统，绝不在可视化大屏制作上多花一秒
    Spring Boot面试必问：启动流程
    SpringMVC接收数据
    Failed to start sshd.service: Unit sshd.service not found
    Leetcode—34.在排序数组中查找元素的第一个和最后一个位置【中等】
  • 原文地址：https://blog.csdn.net/Benxiaohai_311/article/details/133898687