• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    锁定行头和列头的表格组件
    1、在页面中引入风格单定义
    style>
    .LockHeadTable {behavior:url(/oblog312/LockHeadTable.htc)}
    /style>


    2、在需要锁定行列头的表格定义中添加语句“class="LockHeadTable"”就OK了,其他参数有
    ROWHEADNUM="锁定行数"
    COLHEADNUM="锁定列数"
    ROWHEADSTYLE="行表头风格"
    COLHEADSTYLE="列表头风格"
    ROWSTYLE="行风格1|行风格2|……|行风格n"
    FOCUSSTYLE="获得鼠标焦点时的风格"

    3、点击行标题时可以对数据进行排序

    注意:
      使用本组件时,行表头中的单元格不允许跨行

    例:
    table class="LockHeadTable" ROWHEADNUM=3 COLHEADNUM=1 ROWHEADSTYLE="background:#F7F7F7; color:black;" COLHEADSTYLE="background:#F7F7F7; color:black;" ROWSTYLE="background:#FFFFFF; color:black;|background:#F7F7F7; color:black;"  FOCUSSTYLE="background:green; color:white;" width="1500" border="1" cellpadding="3" cellspacing="0" align="center">

    源代码:

    LockHeadTable.htc(组件程序)





    PUBLIC:COMPONENT>

     PUBLIC:PROPERTY NAME="ROWHEADNUM" />
     PUBLIC:PROPERTY NAME="COLHEADNUM" />
     PUBLIC:PROPERTY NAME="ROWHEADSTYLE" />
     PUBLIC:PROPERTY NAME="COLHEADSTYLE" />
     PUBLIC:PROPERTY NAME="ROWSTYLE" />
     PUBLIC:PROPERTY NAME="FOCUSSTYLE" />

     script>
     //初始化
     ROWHEADNUM = (ROWHEADNUM==null?0:parseInt(ROWHEADNUM, 10));
     COLHEADNUM = (COLHEADNUM==null?0:parseInt(COLHEADNUM, 10));
     ROWHEADSTYLE = (ROWHEADSTYLE==null?"":ROWHEADSTYLE);
     COLHEADSTYLE = (COLHEADSTYLE==null?"":COLHEADSTYLE);

     arrRowStyle = (ROWSTYLE==null?new Array(""):ROWSTYLE.split("|")); 

     //设置行表头
     var i, j, rowItem, cellItem;
     rowHead = element.cloneNode(true);
     for (i=0; iROWHEADNUM; i++) {
      rowItem = element.rows(i);
      rowItem.style.cssText = 'z-index:10; position:relative; top:expression(this.offsetParent.scrollTop);' + ROWHEADSTYLE;
     }

     //设置列表头
     for (i=0; ielement.rows.length; i++) {
      rowItem = element.rows(i);
      if (i>=ROWHEADNUM) {
       rowItem.style.cssText = "position:relative;" + arrRowStyle[(i - ROWHEADNUM) % arrRowStyle.length];
       if (FOCUSSTYLE!=null) {
        rowItem.onmouseover = function () { this.style.cssText = "position:relative;" + FOCUSSTYLE;}
        rowItem.onmouseout = function () { this.style.cssText = "position:relative;" + arrRowStyle[(this.rowIndex - ROWHEADNUM) % arrRowStyle.length];}
       }
      }

      for (j=0; jCOLHEADNUM; j+=cellItem.colSpan) {
       cellItem = rowItem.cells(j);
       cellItem.style.cssText = 'position:relative; left:expression(this.parentElement.offsetParent.scrollLeft);'
        + (iROWHEADNUM?'':COLHEADSTYLE);
      }
     }

     //设置行标题排序
     for (i=0; iROWHEADNUM; i++) {
      rowItem = element.rows(i);
      for (j=0; jrowItem.cells.length; j++) {
       cellItem = rowItem.cells(j);
       if (cellItem.rowSpan==ROWHEADNUM-i) {
        cellItem.style.cursor = "hand";
        cellItem.sortAsc = true;
        cellItem.onclick = sortTable;
       }
      }
     }

     //排序
     function sortTable() {
      var objCol = event.srcElement;
      if (objCol.tagName == "TD") {
       var intCol = objCol.cellIndex;
       objCol.sortAsc = !objCol.sortAsc;

       sort_type = 'Num';
       if (isNaN(parseInt(element.rows(ROWHEADNUM).cells(intCol).innerText, 10)))
        sort_type = 'Asc';

       var i,j,boltmp;
       for (i = ROWHEADNUM; i  element.rows.length; i++)
        for (j = i + 1; j  element.rows.length; j++) {
         switch (sort_type) {
         case 'Num':
          boltmp = (parseInt(element.rows(i).cells(intCol).innerText, 10) >= parseInt(element.rows(j).cells(intCol).innerText, 10));
          break;
         case 'Asc':
         default:
          boltmp = (element.rows(i).cells(intCol).innerText >= element.rows(j).cells(intCol).innerText);
         }
         if ((objCol.sortAsc  !boltmp) || (!objCol.sortAsc  boltmp)) {
          element.moveRow(j, i);
         }
        }
      }
     }
     /script>
    /PUBLIC:COMPONENT> 

    上一篇:Web上功能强大的DbGrid表格HTC组件[只需在Table中指定样式就可以完成多种功能可扩展]
    下一篇:用htc实现CHECKBOX控件
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    锁定行头和列头的表格组件 锁定,行头,和,列头,的,表格,