通过js，显示主从关系表
众所周知，显示有主从关系的表格，会出现如下图的形式
比如省市的关系，在数据库中的设计大多为主从表，少数情况是放在一张表中（会出现冗余数据），不管怎样，通过sql查询语句得出数据会是下图这种形式，当然，这里我直接将这些数据绑定到画面中看了
这样的数据形式，看上去当然不舒服，这里我就想办法把它变成前面那种形式。
处理要么在客户端要么在服务端，我是在客户端处理，为什么我要在客户端处理放在最后讲。
在客户端处理当然用脚本啦，下面是我写的js脚本，已经页面调用方法：
×××××××××××××××××××××××××××××××××××××××
function MergeHeader(tableName)
{
var tbl = document.getElementById(tableName);
if(tbl.rows(0).cells.length<2)return;
var i,j,c;
c = tbl.rows(0).cells.length;
var last=tbl.rows(0).cells(0).innerHTML;
for(i=1;i<c;i++)
{
if(tbl.rows(0).cells(i).innerHTML==last)
{
tbl.rows[0].cells(i-1).colSpan += 1;
tbl.rows[0].cells(i).removeNode();
i--;
c--;
}
else
{
last=tbl.rows(0).cells(i).innerHTML;
}
}
}
function MergeCellsVertical(tableName,cellArray)
{
var tbl=document.getElementById(tableName);
if(tbl.rows.length<2)return;
cellArray.sort(SortNumber);
for(var num=0;num<cellArray.length;num++)
{
var i,j;
var last=tbl.rows(0).cells(cellArray[num]).innerHTML;
var lastIndex=0;
for(i=1;i<tbl.rows.length;i++)
{
if(tbl.rows(i).cells(cellArray[num]).innerHTML!=last)
{
if(i>lastIndex+1)
{
for(j=lastIndex+1;j<i;j++)
{
tbl.rows(j).cells(cellArray[num]).removeNode();
}
tbl.rows(lastIndex).cells(cellArray[num]).rowSpan=i-lastIndex;
}
last=tbl.rows(i).cells(cellArray[num]).innerHTML;
lastIndex=i;
}
}
if(lastIndex!=tbl.rows.length-1)
{
for(j=lastIndex+1;j<tbl.rows.length;j++)
{
tbl.rows(j).cells(cellArray[num]).removeNode();
}
tbl.rows(lastIndex).cells(cellArray[num]).rowSpan=tbl.rows.length-lastIndex+1;
}
}
}
function SortNumber(a,b)
{
return b-a;
}
×××××××××××××××××××××××××××××××××××××××
在页面中只需在<body>中加入onload事件，如下
<body onload="MergeCellsVertical('dgPolicy',[0,1]);MergeHeader('dgPolicy');>
这里的[0,1]是指你要合并的列的索引号，这里是指第一列和第二列要合并，这是数组，即使你只有第一列要合并也要写成数组形式为[0];'你的表格id'如果是用的.NET里的datagrid，则就是datagrid的id。
这样，你的表格就会按你想要的出来了，如果在.NET里面，你只需在数据层取出数据，在页面的后台代码绑定数据到datagrid或repeater，简单几句，就可以了。
下面说在客户端处理的原因，其实很简单，降低服务端的性能消耗，而且服务端写起来也并不简单，现在我这样做页面的后台代码只2句话就完成了，myDataGrid.DataSource = GetData(); myDataGrid.DataBind();
而且这段js，我写成一个js文件，同事也都直接调用了。
如果真的想在服务端处理，可以上网搜搜，例子很多，比如我做的.NET，大多是在DataGrid1_PreRender和DataGrid1_ItemDataBound事件中处理，影响性能啊。
比如省市的关系，在数据库中的设计大多为主从表，少数情况是放在一张表中（会出现冗余数据），不管怎样，通过sql查询语句得出数据会是下图这种形式，当然，这里我直接将这些数据绑定到画面中看了
这样的数据形式，看上去当然不舒服，这里我就想办法把它变成前面那种形式。
处理要么在客户端要么在服务端，我是在客户端处理，为什么我要在客户端处理放在最后讲。
在客户端处理当然用脚本啦，下面是我写的js脚本，已经页面调用方法：
×××××××××××××××××××××××××××××××××××××××
function MergeHeader(tableName)
{
var tbl = document.getElementById(tableName);
if(tbl.rows(0).cells.length<2)return;
var i,j,c;
c = tbl.rows(0).cells.length;
var last=tbl.rows(0).cells(0).innerHTML;
for(i=1;i<c;i++)
{
if(tbl.rows(0).cells(i).innerHTML==last)
{
tbl.rows[0].cells(i-1).colSpan += 1;
tbl.rows[0].cells(i).removeNode();
i--;
c--;
}
else
{
last=tbl.rows(0).cells(i).innerHTML;
}
}
}
function MergeCellsVertical(tableName,cellArray)
{
var tbl=document.getElementById(tableName);
if(tbl.rows.length<2)return;
cellArray.sort(SortNumber);
for(var num=0;num<cellArray.length;num++)
{
var i,j;
var last=tbl.rows(0).cells(cellArray[num]).innerHTML;
var lastIndex=0;
for(i=1;i<tbl.rows.length;i++)
{
if(tbl.rows(i).cells(cellArray[num]).innerHTML!=last)
{
if(i>lastIndex+1)
{
for(j=lastIndex+1;j<i;j++)
{
tbl.rows(j).cells(cellArray[num]).removeNode();
}
tbl.rows(lastIndex).cells(cellArray[num]).rowSpan=i-lastIndex;
}
last=tbl.rows(i).cells(cellArray[num]).innerHTML;
lastIndex=i;
}
}
if(lastIndex!=tbl.rows.length-1)
{
for(j=lastIndex+1;j<tbl.rows.length;j++)
{
tbl.rows(j).cells(cellArray[num]).removeNode();
}
tbl.rows(lastIndex).cells(cellArray[num]).rowSpan=tbl.rows.length-lastIndex+1;
}
}
}
function SortNumber(a,b)
{
return b-a;
}
×××××××××××××××××××××××××××××××××××××××
在页面中只需在<body>中加入onload事件，如下
<body onload="MergeCellsVertical('dgPolicy',[0,1]);MergeHeader('dgPolicy');>
这里的[0,1]是指你要合并的列的索引号，这里是指第一列和第二列要合并，这是数组，即使你只有第一列要合并也要写成数组形式为[0];'你的表格id'如果是用的.NET里的datagrid，则就是datagrid的id。
这样，你的表格就会按你想要的出来了，如果在.NET里面，你只需在数据层取出数据，在页面的后台代码绑定数据到datagrid或repeater，简单几句，就可以了。
下面说在客户端处理的原因，其实很简单，降低服务端的性能消耗，而且服务端写起来也并不简单，现在我这样做页面的后台代码只2句话就完成了，myDataGrid.DataSource = GetData(); myDataGrid.DataBind();
而且这段js，我写成一个js文件，同事也都直接调用了。
如果真的想在服务端处理，可以上网搜搜，例子很多，比如我做的.NET，大多是在DataGrid1_PreRender和DataGrid1_ItemDataBound事件中处理，影响性能啊。
