通过js,显示主从关系表

众所周知,显示有主从关系的表格,会出现如下图的形式
点击在新窗口查看全图
CTRL+鼠标滚轮放大或缩小
比如省市的关系,在数据库中的设计大多为主从表,少数情况是放在一张表中(会出现冗余数据),不管怎样,通过sql查询语句得出数据会是下图这种形式,当然,这里我直接将这些数据绑定到画面中看了
点击在新窗口查看全图
CTRL+鼠标滚轮放大或缩小
这样的数据形式,看上去当然不舒服,这里我就想办法把它变成前面那种形式。
处理要么在客户端要么在服务端,我是在客户端处理,为什么我要在客户端处理放在最后讲。
在客户端处理当然用脚本啦,下面是我写的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事件中处理,影响性能啊。
posted @ 2007-06-20 16:54  jason_lb  阅读(...)  评论(...编辑  收藏