我要投稿
  • 您当前的位置:57365.com -> 技术教程 -> 服务器网络 -> 服务器教程 -> Web服务器教程 -> 教程内容
  • [ 收藏本页教程 ]
  • 锁定行头和列头的表格组件Web服务器教程

    教程作者:佚名    教程来源:不详   教程栏目:Web服务器教程    收藏本页
                  摘要:锁定行头和列头的表格组件

    当报表比较大时,在Web上查看内容会很不方便,如果可以象Excel那样锁定报表的行头和列头就好了……

    最近闲着没事,写了个锁定报表行头和列头的组件,用法也挺简单:
    1、在页面中引入风格单定义
    <style>
    .LockHeadTable {behavior:url(LockHeadTable.htc)}
    </style>
    2、在需要锁定行列头的表格定义中添加语句“class="LockHeadTable" ROWNUM="锁定行数" COLNUM="锁定列数"”就OK了。例:
    <table class="LockHeadTable" ROWNUM=2 COLNUM=3 Border='1' width='1510' style={border-collapse:collapse;table-layout:fixed}>

    忘说了,在点击行标题时可以对数据进行排序的。

    源代码:

    LockHeadTable.htc(组件程序)

    <!--//
    锁定行头和列头的表格组件 Version 1.0
    2005年01月19日 By Stone (http://blog.csdn.net/hstone)


    这段脚本可以免费使用于任何非商业用途,引用时请保留本段说明。
    //-->
    <PUBLIC:COMPONENT>
     <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="DoInit()" />
     
     <PUBLIC:PROPERTY NAME="ROWNUM" />
     <PUBLIC:PROPERTY NAME="COLNUM" />
     
     <script>
     var rowHead = null, colHead = null;

     function DoInit() {
      ROWNUM = (ROWNUM==null?0:parseInt(ROWNUM, 10));
      COLNUM = (COLNUM==null?0:parseInt(COLNUM, 10));


      var i, j;
      
      //复制行表头
      rowHead = element.cloneNode(true);
      for (i=ROWNUM; i<rowHead.rows.length;)
       rowHead.deleteRow(ROWNUM);
      //alert(rowHead.outerHTML);
      
      //复制列表头
      colHead = element.cloneNode(true);
      for (i=0; i<ROWNUM; i++)
       colHead.deleteRow(0);
      for (i=0; i<colHead.rows.length; i++) {
       rowItem = colHead.rows(i);
       for (j=COLNUM; j<rowItem.cells.length;)
        rowItem.deleteCell(rowItem.cells.length - 1);
      }
      //alert(colHead.outerHTML);
      
      //设置行表头属性
      rowHead.id += rowHead.uniqueID;
      rowHead.className = "";
      rowHead.style.position = "absolute";
      rowHead.style.top = getPosTop(element);
      rowHead.style.left = getPosLeft(element);
      
      //设置行标题排序
      for (i=0; i<ROWNUM; i++) {
       rowItem = rowHead.rows(i);
       for (j=0; j<rowItem.cells.length; j++) {
        cellItem = rowItem.cells(j);
        if (cellItem.rowSpan==ROWNUM-i) {
         cellItem.style.cursor = "hand";
         cellItem.sortAsc = true;
         cellItem.onclick = sortTable;
        }
       }
      }


      //计算、设置列表头属性
      var colHeadWidth = 0;
      var rowItem = element.rows(ROWNUM);
      for (i=0; i<colHead.rows.length; i++) {
       colHeadWidth = 0;
       for (j=0; j<COLNUM; j++) {
        colHeadWidth += parseInt(rowItem.cells(j).offsetWidth, 10);
        colHead.rows(i).cells(j).style.width = rowItem.cells(j).offsetWidth;
       }
      } 
      
      colHead.id += colHead.uniqueID;
      colHead.className = "";
      colHead.style.width = colHeadWidth;
      colHead.style.position = "absolute";
      colHead.style.top = getPosTop(element.rows(ROWNUM));
      colHead.style.left = getPosLeft(element);
      
      //添加表头对象
      parent.document.body.appendChild(colHead);
      parent.document.body.appendChild(rowHead);
      
      //增加body滚动事件处理
      parent.document.body.onscroll = bodyonscroll;
     }
     //body滚动事件处理
     function bodyonscroll() {
      var bodyscrolltop = parseInt(parent.document.body.scrollTop, 10),
       bodyscrollleft = parseInt(parent.document.body.scrollLeft, 10),
       elementtop = getPosTop(element),
       elementleft = getPosLeft(element),
       elementwidth = parseInt(element.offsetWidth, 10),
       elementheight = parseInt(element.offsetHeight, 10);
      rowHead.style.top = elementtop + ((bodyscrolltop>elementtop && bodyscrolltop<elementtop + elementheight)?bodyscrolltop:0);
      colHead.style.left = elementleft + ((bodyscrollleft>elementleft && bodyscrollleft<elementleft + elementwidth)?bodyscrollleft:0);
     }
     
     //获取HTML对象在窗口中的位置,左边距(对象无offsetParent返回值是null)
     function getPosLeft(obj) {
      return ((obj==null)?0:parseInt(obj.offsetLeft) + getPosLeft(obj.offsetParent));
     }
     //获取HTML对象在窗口中的位置,顶距((对象无offsetParent返回值是null)
     function getPosTop(obj) {
      return (obj==null)?0:parseInt(obj.offsetTop) + getPosTop(obj.offsetParent);
     }
     //排序
     function sortTable() {
      var objCol = event.srcElement;
      if (objCol.tagName == "TD") {
       var intCol = objCol.cellIndex;
       objCol.sortAsc = !objCol.sortAsc;


       var i,j,boltmp;
       for (i = ROWNUM; i < element.rows.length; i++)
        for (j = i + 1; j < element.rows.length; j++) {
         boltmp = (element.rows(i).cells(intCol).innerText >= element.rows(j).cells(intCol).innerText);
         if ((objCol.sortAsc && !boltmp) || (!objCol.sortAsc && boltmp)) {
          element.moveRow(j, i);
          colHead.moveRow(j - ROWNUM, i - ROWNUM);
         }
        }
      }
     }
     </script>
    </PUBLIC:COMPONENT>


    LockHeadTable.html(演示页面)

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>LockHeadTableDemo</title>
    <style>
    TD  {
     font-family:宋体;
     font-size:13px;
     text-align:right
     }
    TD.tdrow {
     font-family:宋体;
     color:#993300;
     background-color:#FFF8DC;
     font-size:14px;
     text-align:center;
     vertical-align:bottom
     }
    TD.tdcol {
     font-family:宋体;
     color:blue;
     background-color:#FFF8DC;
     font-size:14px;
     text-align:left
     }


    .LockHeadTable {behavior:url(LockHeadTable.htc)}
    </style>
    </head>


    <body>
    <table class="LockHeadTable" ROWNUM=2 COLNUM=3 Border='1' width='1510' style={border-collapse:collapse;table-layout:fixed}>
    <tr height='20'>
     <td class='tdrow' rowspan='2' width='100'>字段01</td>
     <td class='tdrow' rowspan='2' width='60'>字段02</td>
     <td class='tdrow' rowspan='2' width='50'>字段03</td>
     <td class='tdrow' rowspan='2' width='100'>字段04</td>
     <td class='tdrow' colspan='5' width='500'>字段05</td>
     <td class='tdr

    我要投稿   -   广告合作   -   关于本站   -   友情连接   -   网站地图   -   联系我们   -   版权声明   -   设为首页   -   加入收藏   -   网站留言
    Copyright © 2009 - 20012 www.www.hxswjs.com All Rights Reserved.57365.com 版权所有