- 使用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 += " ";
}
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>
本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。