jQuery制作树状表格

最新推荐文章于 2024-08-10 08:45:22 发布

nayi_224

最新推荐文章于 2024-08-10 08:45:22 发布

阅读量2.1k

点赞数

分类专栏：前端文章标签： jQuery 前端树状表格

本文链接：https://blog.csdn.net/nayi_224/article/details/80089599

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

使用jQuery制作树状表格。若需要改为动态页面，所需要修改的js以标注。
采用递归的方法对已展现的部分进行缓存。
表格内容采用html拼接，方便修改。
代码基本最简。没有做封装。

<!DOCTYPE>
<html>
<head>
    <title></title>
    <meta http-equiv="X-UA-Compatible" charset="utf-8"/>
	<!--<script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script>-->
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">

table {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
	width: 600px;
}
table th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
}
table td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
	width:33%;
}

a {
	color: #99D;
}

</style>
<script> 

	jQuery(function(){
		autoFirstClick();
	})
	
	function autoFirstClick(){
		jQuery(jQuery("#drillTable").find("a")[0]).click();
	}

	cot = 1;
	function getTestDate(){
		var data = [{"deptId":"root"+ ++cot,"areaNo":"091","deptDesc":"desc"+ ++cot,"isLeaf":"yes"}, 
					{"deptId":"root"+ ++cot,"areaNo":"091","deptDesc":"desc"+ ++cot,"isLeaf":"no"},
					{"deptId":"root"+ ++cot,"areaNo":"091","deptDesc":"desc"+ ++cot,"isLeaf":"no"}];
		return data;
	}

	//当前层的开闭
	function showClose(deptId){
		jQuery("tr[parent_id='" + deptId + "']").each(function(i){
			var obj = jQuery(this);
			var temp_rank = obj.attr("d_orgrank");
			var temp_flag = obj.attr("isShow");
			
			if("yes" == temp_flag){
				obj.attr("isShow", temp_flag == 'yes' ? 'no' : 'yes');
				jQuery("tr[d_orgrank^='" + temp_rank + "/" + "']").hide();
				obj.hide();
			}else if("no" == temp_flag){
				obj.attr("isShow", temp_flag == 'yes' ? 'no' : 'yes');
				obj.show();
				showCloseChild(jQuery(this));
				return;
			}
			
		});
	}
	//子集递归
	function showCloseChild(obj){
		var temp_flag = obj.attr("isShow");
		var temp_rank = obj.attr("d_orgrank");
		var temp_dept_id = obj.attr("d_dept_id");
		if("yes" == temp_flag){
			obj.show();
			jQuery("tr[parent_id='" + temp_dept_id + "']").each(function(i){
				showCloseChild(jQuery(this));
			});
		}else {
			return;
		}
	}
	//下钻
	//@auth nayi_224
	function drillDept(td){
		jQuery(td).find("#img").html(jQuery(td).find("#img").html() == "+" ? "-" : "+");
	
		var objTr = jQuery(td).parent().parent();
		var d_orgrank_all = objTr.attr("d_orgrank");
		var d_level= objTr.attr("d_level");
		var level = parseInt(d_level.substring("d_level_".length));
		var deptId = objTr.attr("d_dept_id");
		
		var isExists = jQuery("tr[parent_id='" + deptId + "']");
		if(isExists.html()){
			showClose(deptId);
			return;
		}
		
		//动态页面使用ajax
		//var url = "<%=contextPath%>/NayiTest!drillTable.action?aa="+Math.random();
    	//jQuery.ajax({
    	//	url:url,
    	//	type:'post',
    	//	data:{
    	//		sDept:deptId
    	//	},
    	//	success:function(result) {
				var result = getTestDate();		//获取测试数据
		
    			var tJson = eval(result);
    			var tHtml = "";
    			var space = "";
    			for(var i = 0; i < level; i++){
    				space += "&nbsp&nbsp";
    			}
	        	for(var i = 0; i < tJson.length; i++){
					var tempDeptId = tJson[i].deptId;	//需要改的地方
	        		tHtml += "<tr d_dept_id='" + tempDeptId + "'";
	        		tHtml += " isShow='yes' ";
	        		tHtml += " parent_id='" + deptId + "' ";
	        		tHtml += " d_orgrank='" + d_orgrank_all + "/" + tempDeptId;
	        		tHtml += "' d_level='d_level_" + (level + 1) + "' >"
	        		
	        		if("no" == tJson[i].isLeaf){
	        			tHtml += "<td style='text-align:left;'>" + space + "<a  " + "o" + "nclick='drillDept(this)'><span id='img'>+</span>" + tJson[i].deptDesc + "</a></td>";	//需要改的地方
	        		}else {
	        			tHtml += "<td style='text-align:left;'>" + space + tJson[i].deptDesc + "</td>";	//需要改的地方
	        		}
	        		
	        		tHtml += "<td>" + tJson[i].areaNo + "</td>";	//需要改的地方
	        		tHtml += "<td>" + tJson[i].deptId + "</td>";	//需要改的地方
	        		
	        		tHtml += "</tr>";
	        	}
	        	objTr.after(tHtml);
        //	}
    	//});
	}

 </script>
</head>
<body id="myBody">
	
<div id="aDiv" >

	<table id="drillTable">  
		<thead>
			<tr>
				<th style="text-align:center;">部门</th>
				<th align="center">列1</th>
				<th align="center">列2</th>
			</tr>
		</thead>
		<tbody>
		<!--
			<s:iterator value="pageData" var="v" status="s">		
				<tr d_dept_id="${deptId}" d_orgrank="d_orgrank_${deptId}" d_level="d_level_1" isShow="yes">
					<td style="text-align:left;">
						<s:if test="#v.isleaf == 'no'">
							<a οnclick="drillDept(this);">${v.deptDesc }</a>
						</s:if><s:else>
							${v.deptDesc }
						</s:else>
						
					</td>	
					<td  align="center">
						${v.areaNo }	
					</td>
					<td  align="center">
						${v.deptId }
					</td>
				</tr>					
			</s:iterator>
		-->
				
			<tr d_dept_id="root" d_orgrank="d_orgrank_root" d_level="d_level_1" isShow="yes">
				<td>
					<a onclick="drillDept(this);"><span id="img">+</span>dept</a>
				</td>	
				<td>
					name
				</td>
				<td>
					dept
				</td>
			</tr>					
			
		</tbody>
	</table>

</div>

 
</body>
</html>