类递归循环实现表格目录

实现效果如下

后端数据结构

var res={
  "code": 200,
  "msg": "成功",
  "data": {
    "product": [
      {
        "id": "1",
        "fid": "0",
        "levelName": "产品第一级",
        "companyId": "1",
        "isLeaf": 0,
        "level": 1,
        "innerCategoryList": [
          {
            "id": "3",
            "fid": "1",
            "levelName": "产品第二级2",
            "companyId": "1",
            "isLeaf": 0,
            "level": 2,
            "innerCategoryList": [
              {
                "id": "7",
                "fid": "3",
                "levelName": "产品第三级2",
                "companyId": "1",
                "isLeaf": 0,
                "level": 3,
                "innerCategoryList": [],
                "robotVoList": []
              },
              {
                "id": "20180208141501100005",
                "fid": "3",
                "levelName": "测试添加产品第三级",
                "companyId": "1",
                "isLeaf": 0,
                "level": 2,
                "innerCategoryList": [],
                "robotVoList": [
                  {
                    "robotId": "2",
                    "robotName": "robot"
                  }
                ]
              }
            ],
            "robotVoList": []
          },
          {
            "id": "2",
            "fid": "1",
            "levelName": "产品第二级1",
            "companyId": "1",
            "isLeaf": 0,
            "level": 2,
            "innerCategoryList": [
              {
                "id": "6",
                "fid": "2",
                "levelName": "产品第三级1",
                "companyId": "1",
                "isLeaf": 0,
                "level": 3,
                "innerCategoryList": [],
                "robotVoList": [
                  {
                    "robotId": "5",
                    "robotName": "r-5000"
                  },
                  {
                    "robotId": "4",
                    "robotName": "r-4000"
                  }
                ]
              }
            ],
            "robotVoList": [
              {
                "robotId": "5",
                "robotName": "r-5000"
              },
              {
                "robotId": "4",
                "robotName": "r-4000"
              }
            ]
          },
          {
            "id": "20180209112124100006",
            "fid": "1",
            "levelName": "cccccc",
            "companyId": "1",
            "isLeaf": 0,
            "level": 1,
            "innerCategoryList": [
              {
                "id": "20180209112521100007",
                "fid": "20180209112124100006",
                "levelName": "ccccc3",
                "companyId": "1",
                "isLeaf": 0,
                "level": 2,
                "innerCategoryList": [],
                "robotVoList": []
              }
            ],
            "robotVoList": []
          },
          {
            "id": "5",
            "fid": "1",
            "levelName": "产品第二级4",
            "companyId": "1",
            "isLeaf": 0,
            "level": 2,
            "innerCategoryList": [],
            "robotVoList": []
          },
          {
            "id": "4",
            "fid": "1",
            "levelName": "产品第二级3",
            "companyId": "1",
            "isLeaf": 0,
            "level": 2,
            "innerCategoryList": [
              {
                "id": "8",
                "fid": "4",
                "levelName": "产品第三级3",
                "companyId": "1",
                "isLeaf": 0,
                "level": 3,
                "innerCategoryList": [],
                "robotVoList": []
              },
              {
                "id": "20180206142911100003",
                "fid": "4",
                "levelName": "ceshi004",
                "companyId": "1",
                "isLeaf": 0,
                "level": 2,
                "innerCategoryList": [],
                "robotVoList": []
              }
            ],
            "robotVoList": []
          }
        ],
        "robotVoList": [
          {
            "robotId": "3",
            "robotName": "r-3000"
          }
        ]
      }
    ]
  }

}

前端代码 类递归循环

//递归目录
function categoryDoLoop(firstCategoryData,secondCategoryData,levelOneId,firstCategoryCheck,secondCategoryCheck,thirdCategoryCheck){
    var trElement="";
    var firstRowspan=1;
    var secondRowspan=1;
    var firstCategoryHtml="";
    var secondCategoryHtml="";
    //判断二级目录是否存在
    if(secondCategoryData.length !=0 ){
        //二级目录存在
        for(var i=0;i<secondCategoryData.length;i++){
            //循环二级目录//判断第三级目录是否存在
            var thirdCategory=secondCategoryData[i].innerCategoryList.length;
            thirdCategory==0?thirdCategory=1:thirdCategory;
            firstRowspan+=thirdCategory;
            secondRowspan=thirdCategory;

            if(i==0){
                secondCategoryHtml+=`<td rowspan="${secondRowspan}"><input data-level="2" type="checkbox" class="${secondCategoryCheck}" val="${secondCategoryData[i].id}" data-id="${secondCategoryData[i].id}"/></td><td class="editStyle editBtn" data-level="2" data-levelOneId="${levelOneId}" data-toggle="modal" data-target="#myModal_edit" rowspan="${secondRowspan}" data-id="${secondCategoryData[i].id}">${secondCategoryData[i].levelName}</td>`;
            }else{
                secondCategoryHtml+=`<tr><td rowspan="${secondRowspan}"><input data-level="2" type="checkbox" class="${secondCategoryCheck}" val="${secondCategoryData[i].id}" data-id="${secondCategoryData[i].id}"/></td><td class="editStyle editBtn" data-level="2" data-levelOneId="${levelOneId}" data-toggle="modal" data-target="#myModal_edit" rowspan="${secondRowspan}" data-id="${secondCategoryData[i].id}">${secondCategoryData[i].levelName}</td>`;
            }

            if(secondCategoryData[i].innerCategoryList.length != 0){
                //三级目录存在
                var thirdCategoryData=secondCategoryData[i].innerCategoryList;
                //循环三级目录
                var thirdCategoryHtml="";
                for(var k=0;k<secondCategoryData[i].innerCategoryList.length;k++){
                    if(k==0){
                        thirdCategoryHtml+=`<td><input data-level="3" type="checkbox" class="${thirdCategoryCheck}" val="${thirdCategoryData[k].id}" data-id="${thirdCategoryData[k].id}" data-fid="${thirdCategoryData[k].fid}"/></td><td class="editStyle editBtn" data-level="3" data-levelOneId="${levelOneId}" data-toggle="modal" data-target="#myModal_edit" data-id="${thirdCategoryData[k].id}">${thirdCategoryData[k].levelName}</td>`;
                    }else{
                        thirdCategoryHtml+=`<tr><td><input data-level="3" type="checkbox" class="${thirdCategoryCheck}" val="${thirdCategoryData[k].id}" data-id="${thirdCategoryData[k].id}" data-fid="${thirdCategoryData[k].fid}"/></td><td class="editStyle editBtn" data-level="3" data-levelOneId="${levelOneId}" data-toggle="modal" data-target="#myModal_edit" data-id="${thirdCategoryData[k].id}">${thirdCategoryData[k].levelName}</td></tr>`;
                    }
                }
            }else{
                //三级目录不存在
                thirdCategoryHtml="<td></td><td></td>"
            }
            secondCategoryHtml=secondCategoryHtml+thirdCategoryHtml+"</tr>";
        }
        firstRowspan=Number(firstRowspan)-1;
        firstCategoryHtml=`<tr><td rowspan="${firstRowspan}"><input data-level   ="1" type="checkbox" class="${firstCategoryCheck}" val="${levelOneId}" data-id="${firstCategoryData.id}"/></td><td rowspan="${firstRowspan}" data-id="${levelOneId}">${firstCategoryData.levelName}</td>`;

        trElement=firstCategoryHtml+secondCategoryHtml;
        return trElement;
    }else{
        //二级目录不存在
        firstCategoryHtml=`<tr><td><input data-level="1" type="checkbox" class="${firstCategoryCheck}" val="${levelOneId}" data-id="${firstCategoryData.id}"/></td><td data-id="${levelOneId}">${firstCategoryData.levelName}</td>

<td></td><td></td><td></td><td></td></tr>`;

trElement= firstCategoryHtml; return trElement; }}

渲染到页面

if(res.data.product != undefined){
    //产品信息
    var productSecondCategoryData=res.data.product[0].innerCategoryList;
    var productFirstCategoryData=res.data.product[0];
    var productId=2;
    var firstCategoryCheck="product productFirstCategoryCheck";
    var secondCategoryCheck="product productSecondCategoryCheck";
    var thirdCategoryCheck="product productThirdCategoryCheck";
    var productTr=categoryDoLoop(productFirstCategoryData,productSecondCategoryData,productId,firstCategoryCheck,secondCategoryCheck,thirdCategoryCheck);
    $("#mainTbody").append(productTr);
}

总结：

一级目录固定,rowspan默认为1；

二级目录的合并rowspan是其下三级目录的数组长度+1；

一级目录的合并rowspan是其下所有二级目录的rowspan的和；