1. 程式人生 > >JS遞迴拼裝樹形結構的表格

JS遞迴拼裝樹形結構的表格

資料格式: [{"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;
}