JS遞迴拼裝樹形結構的表格
阿新 • • 發佈:2019-02-14
資料格式: [{"id":2, "pid":1, "children":[{...},{...}]},{"id":3, "pid":1, "children":[{...},{...}]},.......]
注意: 下面的樣例資料沒有children屬性,children屬性是在程式程式碼生成的,下面的樣例資料只是簡單的從資料庫查,未做任何處理,如果實際中資料庫查出來的就是樹形結構的資料,js程式碼中的拼裝樹形結構資料的程式碼就不用了
樣例圖片:
大概意思就是父節點合子樹的行
樣例:var data = [{
"id": "24e1dab0615b4a37a1fe3eb4ad2cbddd","zbmc": "11111",
"sm": "teeetafsaffassafsa",
"zbjb": "1",
"parentId": "b294946f88554fc9bf89ee9ea9683feb",
"ckyj": "teeetafsaffassafsa"
}, {
"id": "2730a43d7e584b089542fa20c2323ac1",
"zbmc": "22222",
"sm": "",
"zbjb": "1",
"parentId": "b294946f88554fc9bf89ee9ea9683feb",
"ckyj": "212"
}, {
"id": "1bb0cc2080f44789aeece4c03b4cd56b",
"zbmc": "33333",
"sm": "",
"zbjb": "2",
"parentId": "2730a43d7e584b089542fa20c2323ac1",
"ckyj": "gds"
}, {
"id": "1bb0cc2080f44789aeece4c03b4cd56b6111",
"zbmc": "44444",
"sm": "",
"zbjb": "3",
"parentId": "1bb0cc2080f44789aeece4c03b4cd56b",
"ckyj": "gds"
}, {
"id": "1bb0cc2080f44789aeece4c03b4cd56b6222",
"zbmc": "444442",
"sm": "",
"zbjb": "4",
"parentId": "1bb0cc2080f44789aeece4c03b4cd56b6111",
"ckyj": "gds"
}, {
"id": "1bb0cc2080f44789aeece4c03b4cd56b6333",
"zbmc": "444443",
"sm": "",
"zbjb": "4",
"parentId": "1bb0cc2080f44789aeece4c03b4cd56b6111",
"ckyj": "gds"
}, {
"id": "1bb0cc2080f44789aeece4c03b4cd56b6444",
"zbmc": "444444",
"sm": "",
"zbjb": "4",
"parentId": "1bb0cc2080f44789aeece4c03b4cd56b6111",
"ckyj": "gds"
}, {
"id": "1bb0cc2080f44789aeece4c03b4cd56b6555",
"zbmc": "4444446",
"sm": "",
"zbjb": "5",
"parentId": "1bb0cc2080f44789aeece4c03b4cd56b6444",
"ckyj": "gds"
}, {
"id": "1bb0cc2080f44789aeece4c03b4cd56b2",
"zbmc": "55555",
"sm": "",
"zbjb": "2",
"parentId": "2730a43d7e584b089542fa20c2323ac1",
"ckyj": "gds"
}, {
"id": "1bb0cc2080f44789aeece4c03b4cd56b2",
"zbmc": "555552",
"sm": "",
"zbjb": "3",
"parentId": "1bb0cc2080f44789aeece4c03b4cd56b2",
"ckyj": "gds"
}, {
"id": "1bb0cc2080f44789aeece4c03b4cd56b2333",
"zbmc": "555553",
"sm": "",
"zbjb": "3",
"parentId": "1bb0cc2080f44789aeece4c03b4cd56b2",
"ckyj": "gds"
}, {
"id": "1bb0cc2080f44789aeece4c03b4cd56b3",
"zbmc": "66666",
"sm": "",
"zbjb": "2",
"parentId": "2730a43d7e584b089542fa20c2323ac1",
"ckyj": "gds"
},{
"id": "94ec09d815cf4ab3a7593c294afa1ba1",
"zbmc": "77777",
"sm": "",
"zbjb": "1",
"parentId": "b294946f88554fc9bf89ee9ea9683feb",
"ckyj": "gds"
}, {
"id": "992802474d9648de8abf1961c84e8ef5",
"zbmc": "88888",
"sm": "",
"zbjb": "2",
"parentId": "94ec09d815cf4ab3a7593c294afa1ba1",
"ckyj": "gds"
}, {
"id": "d547bc7816d848bd82a17179ed1799a9",
"zbmc": "99999",
"sm": "",
"zbjb": "1",
"parentId": "b294946f88554fc9bf89ee9ea9683feb",
"ckyj": "2121"
}];
/** * 業務不同, key的名稱不同, 呼叫之前可以賦值,傳null則用下面預設 */ var keyNames = { "zbmc": "zbmc", //描述 "sm": "sm", //說明 "zbjb": "zbjb", //級別 "ckyj": "ckyj" //依據 } var maxLevel=0; /** * 初始化表格 */ function initTable(parentId, data, keyNames) { maxLevel = getMaxLeve(data); $("#jcsxTd").attr('colspan', maxLevel+1) var _ = {"id":parentId, "childrens":[]}; $.each(data, function(i, n) { n['childrens']=[]; _ = initTreeData(_, n); }); createTable(_, keyNames); } /** * 組裝改資料成一棵樹 */ function initTreeData(_, d) { if(_.id == d.parentId) { _['childrens'].push(d); return _; } if(0 == _['childrens'].length) { return _; } $.each(_['childrens'], function(i, n) { _['childrens'][i]= initTreeData(_['childrens'][i], d); }); return _; } function createTable(_, keyNames) { $.each(_['childrens'], function(i, n) { var htmls = ''; if(n['childrens'].length > 0) { htmls = '<tr>'+getChildrenHtml(htmls, n, maxLevel); } else { htmls += '<tr><td>'+n.zbmc+'</td>'; for(var j = 1; j < maxLevel; j++) { htmls += '<td></td>'; } htmls += '<td>'+n.ckyj+'</td><td>'+n.sm+'</td><td style = "text-align:center;"><input name = "zbxName" type="checkbox" value="'+n.id+'"></td></tr>'; } $("#rootTable").append(htmls); }); $("#rootTable").find('tr:eq(1)').find('td:eq(0)').before('<td rowspan="'+getTotleRowCount(_['childrens'], 0)+'">'+$("#hiddenSpan1").text()+'</td>'); } function getChildrenHtml(htmls, data, ml) { htmls += '<td rowspan="'+getTotleRowCount(data['childrens'], 0)+'">'+data.zbmc+'</td>'; if(data['childrens'].length > 0) { $.each(data['childrens'], function(i, n) { if(i > 0) { htmls += '<tr>'; } htmls = getChildrenHtml(htmls, n, ml); }); } else { var v = ml - data[keyNames['zbjb']]; for(var i = 0; i < v; i++) { htmls += '<td></td>'; } htmls += '<td>'+data.ckyj+'</td><td>'+data.sm+'</td><td style = "text-align:center;"><input name = "zbxName" type="checkbox" value="'+data.id+'"></td></tr>'; } return htmls; } /** * 最大合併行數 */ function getTotleRowCount(data, count) { if(0 == data.length) { return count+1; } $.each(data, function(i, n) { if(n['childrens'].length > 0) { count = getTotleRowCount(n['childrens'], count)-1; } count += 1; }); return count; } /** * 獲取最大深度 */ function getMaxLeve(_data) { var v = 0; $.each(_data, function(i, n) { if(parseInt(n.zbjb) > v) v = parseInt(n.zbjb); }); return v; }