注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

和申的个人主页

专注于java开发,1985wanggang

 
 
 

日志

 
 

html tree表格树状数据呈现,父级别不单独占一行,json数据自动聚合算成表格colspan等  

2014-01-12 20:47:39|  分类: Html/Js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

因为工作需要需要如下的表格,
左半部分,是级联的父子级联方式,
右侧部分是叶子级别有的数据。

效果图:

html tree表格树状数据呈现,父级别不单独占一行,json数据自动聚合算成表格colspan等 - 和申 - 和申的个人主页

数据结构:
sub是子类目,
data是星期数据。

var a = [{
cat_id:1,
sub:[
{cat_id:11,
data :[110001,110002,110003,110004,110005,110006,110007],
},
{cat_id:12,
},
{
cat_id:13,
sub:[
{cat_id:131,
data :[1,2,3,4,5,6,7],
},
{cat_id:134,
},
{
cat_id:135,
sub:[
{cat_id:1351,
data :[1351001,1351002,1351003,1351004,1351005,1351006,1351007],
},
{cat_id:1354,
},
]
},
]
},
],
},
{
cat_id:2,
sub:[
{cat_id:21,
},
{
cat_id:23,
sub:[
{cat_id:231,
},
],
}
];


html代码:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<style type="text/css">


body {
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
background: #E6EAE9;
}

a {
color: #c75f3e;
}

#mytable {
width: 700px;
padding: 0;
margin: 0;
}

caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}

th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA no-repeat;
}

th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}

td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size:11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}


td.alt {
background: #F5FAFA;
color: #797268;
}

th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}

html>body td{ font-size:11px;}
body,td,th {
font-family: 宋体, Arial;
font-size: 12px;
}
</style>
</head>

<body>
<script>

var a = [{
cat_id:1,
sub:[
{cat_id:11,
data :[110001,110002,110003,110004,110005,110006,110007],
},
{cat_id:12,
},
{cat_id:14,
},
{cat_id:15,
},
{
cat_id:13,
sub:[
{cat_id:131,
data :[1,2,3,4,5,6,7],
},
{cat_id:132,
},
{cat_id:133,
},
{cat_id:134,
},
{
cat_id:135,
sub:[
{cat_id:1351,
data :[1351001,1351002,1351003,1351004,1351005,1351006,1351007],
},
{cat_id:1352,
data :[1,2,3,4,5,6,7],
},
{cat_id:1353,
},
{cat_id:1354,
},
]
},
]
},
],
},
{
cat_id:2,
sub:[
{cat_id:21,
},
{cat_id:24,
},
{cat_id:25,
},
{cat_id:26,
},
{
cat_id:23,
sub:[
{cat_id:231,
},
{cat_id:232,
},
{cat_id:233,
},
]
},
],
}
,
{
cat_id:3,
sub:[
{cat_id:31,
},
{cat_id:32,
},
{cat_id:34,
},
{cat_id:35,
},
{
cat_id:33,
sub:[
{cat_id:331,
},
{cat_id:332,
},
{cat_id:333,
},
]
},
],
}
];
</script>
<div >
<table id="myTable" border="1">
<thead>
<tr>
<th>cat1</th>
<th>cat2</th>
<th>cat3</th>
<th>cat4</th>
<th>cat5</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
<th>周日</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script>
$(function(){

var treeData = function(param){
var colList = new Array();
var childNodeColArray = new Array();
var totalSize = 0;
if(!param || !param["table"] || !param["data"]){
alert('参数错误{data:a,colMax:5,table:$("#myTable")}');
return ;
}
var data = param["data"];

var colMax = 5;
if(param && param["colMax"] > 0){
colMax = param["colMax"];
}
var table = param["table"];
$.each( data,function(n, value){
totalSize += visitSubNode(value,0,colList,colMax);
});

for(var rowIdx =0;rowIdx < totalSize; rowIdx++){

var str = "<tr>";
str += getTd(colList,rowIdx);
str += getDataTd(colList,childNodeColArray,rowIdx, 7);
str +="</tr>";
$(str).appendTo(table);
}

function getDataTd(colList,childNodeColArray,rowIdx, dataLen){
var str = '';
var node = childNodeColArray[rowIdx];
if(node){
var dataArray = node.data;
var colIndex = node.colIndex;
var colNode = colList[colIndex][rowIdx];
for(var k =0 ; k< dataLen; k++){
var data = '';
if(dataArray && dataArray[k]){
data = dataArray[k];
}


str += '<td rowidx="'+colNode.rowIdx+'" prowidx="'+ colNode.pRowIdx +'">'+data+'</td>';
}
}else{
for(var k =0 ; k< dataLen; k++){
var data = '';
str += '<td rowidx="'+node.rowIdx +'" prowidx="'+ node.pRowIdx +'">'+data+'</td>';
}
}


return str;
}

function getTd(colList,rowIdx){
var str = '';
for(var i =0;i<colList.length;i++){
var colArray = colList[i];
if(colArray != null && colList[i][rowIdx]!= null){
str += '<td rowidx="'+colList[i][rowIdx].rowIdx
var rowspan = colList[i][rowIdx].size;
if(rowspan >1){
str += '" rowspan="'+rowspan;
}

str += '" prowidx="'+ colList[i][rowIdx].pRowIdx +'">'+colList[i][rowIdx].value+'</td>';
}
}

return str;
}

addNewNode:function addNewNode(colList,colIdx,size,value,childCount){
var colArray = colList[colIdx];
if(colArray == null){
colArray = new Array();
colList[colIdx] = colArray;
}
var newData = {
rowIdx: 0,
pRowIdx: 0,
colIdx: colIdx,
size:size,
value: value,
toString:function(){
return "{rowIdx:"+ this.rowIdx+",pRowIdx:"+ this.pRowIdx+ ",colIdx:"+ this.colIdx+ ",size:"+ this.size +",value:"+ this.value + "}";
}
};
var old = colArray.pop();
if(old != null){
//
newData.rowIdx = (old.rowIdx + old.size);
colArray[old.rowIdx] = old;
}

colArray[newData.rowIdx] = newData;


if(childCount >0){
var childColList = colList[colIdx +1];
var tempArray = new Array();
for(var i=0;i< childCount;i++){
var temp = childColList.pop();
temp.pRowIdx = newData.rowIdx;
//alert(temp);
tempArray.push(temp);
}
for(var i=0;i< childCount;i++){
var temp = tempArray.pop();
childColList[temp.rowIdx] = temp;
}
}
return newData.rowIdx;
}

function visitSubNode(node,colIndex,colList,colMax){
if(colIndex < colMax -1 && node.sub){

var sub = node.sub;
var total = 0;
var childCount = 0;
$.each( sub, function(n, value){
var i = visitSubNode(value, colIndex+1,colList,colMax);
total += i;
childCount++;
});

addNewNode(colList,colIndex,total,node.cat_id,childCount)
return total;
}else{

var value = "";
if(!node.isNull){
value = node.cat_id;
}


if(colIndex < colMax -1){
node.isNull = true;
var count = visitSubNode(node, colIndex+1,colList,colMax);
addNewNode(colList,colIndex,1,value,1);
return count;
}
addNewNode(colList,colIndex,1,value,0);
node.colIndex = colIndex;
childNodeColArray.push(node);
return 1;
}
}
return this;
}
treeData({data:a,colMax:5,table:$("#myTable")});
});

</script>
</body>
</html>


 
统计信息唧唧歪歪唧唧网ggyygg.net
  评论这张
 
阅读(698)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016