冻结表格(tablefix)

/*
* jQuery TableFix plugin ver 1.0.0
* Copyright (c) 2010 Otchy
* This source file is subject to the MIT license.
* http://www.otchy.net
*/
(function($){
$.fn.tablefix = function(options) {
  return this.each(function(index){
   // 処理継続の判定
   var baseTable = $(this);
   var withWidth = (options.width > 0);
   var withHeight = (options.height > 0);
   if (withWidth) {
    withWidth = (options.width < baseTable.width());
   } else {
    options.width = baseTable.width();
   }
   if (withHeight) {
    withHeight = (options.height < baseTable.height());
   } else {
    options.height = baseTable.height();
   }
   if (withWidth || withHeight) {
    if (withWidth && withHeight) {
     options.width -= 40;
     options.height -= 40;
    } else if (withWidth) {
     options.width -= 20;
    } else {
     options.height -= 20;
    }
   } else {
    return;
   }
   // 外部 div の設定
   baseTable.wrap("<div></div>");
   var div = baseTable.parent();
   div.css({position: "relative"});
   // スクロール部オフセットの取得
   var fixRows = (options.fixRows > 0) ? options.fixRows : 0;
   var fixCols = (options.fixCols > 0) ? options.fixCols : 0;
   var offsetX = 0;
   var offsetY = 0;
   baseTable.find('tr').each(function(indexY) {
    $(this).find('td,th').each(function(indexX){
     if (indexY == fixRows && indexX == fixCols) {
      var cell = $(this);
      offsetX = cell.position().left;
      offsetY = cell.parent('tr').position().top;
      return false;
     }
    });
    if (indexY == fixRows) {
     return false;
    }
   });
   // テーブルの分割と初期化
   var crossTable = baseTable.wrap('<div></div>');
   var rowTable = baseTable.clone().wrap('<div></div>');
   var colTable = baseTable.clone().wrap('<div></div>');
   var bodyTable = baseTable.clone().wrap('<div></div>');
   var crossDiv = crossTable.parent().css({position: "absolute", overflow: "hidden"});
   var rowDiv = rowTable.parent().css({position: "absolute", overflow: "hidden"});
   var colDiv = colTable.parent().css({position: "absolute", overflow: "hidden"});
   var bodyDiv = bodyTable.parent().css({position: "absolute", overflow: "auto"});
   div.append(rowDiv).append(colDiv).append(bodyDiv);
   // クリップ領域の設定
   var bodyWidth = options.width - offsetX;
   var bodyHeight = options.height - offsetY;
   crossDiv.width(offsetX).height(offsetY);
   rowDiv
    .width(bodyWidth + (withWidth ? 20 : 0) + (withHeight ? 20 : 0))
    .height(offsetY)
    .css({left: offsetX + 'px'});
   rowTable.css({
    marginLeft: -offsetX + 'px',
    marginRight: (withWidth ? 20 : 0) + (withHeight ? 20 : 0) + 'px'
   });
   colDiv
    .width(offsetX)
    .height(bodyHeight + (withWidth ? 20 : 0) + (withHeight ? 20 : 0))
    .css({top: offsetY + 'px'});
   colTable.css({
    marginTop: -offsetY + 'px',
    marginBottom: (withWidth ? 20 : 0) + (withHeight ? 20 : 0) + 'px'
   });
   bodyDiv
    .width(bodyWidth + (withWidth ? 20 : 0) + (withHeight ? 20 : 0))
    .height(bodyHeight + (withWidth ? 20 : 0) + (withHeight ? 20 : 0))
    .css({left: offsetX + 'px', top: offsetY + 'px'});
   bodyTable.css({
    marginLeft: -offsetX + 'px',
    marginTop: -offsetY + 'px',
    marginRight: (withWidth ? 20 : 0) + 'px',
    marginBottom: (withHeight ? 20 : 0) + 'px'
   });
   if (withHeight) {
    rowTable.width(bodyTable.width());
   }
   // スクロール連動
   bodyDiv.scroll(function() {
    rowDiv.scrollLeft(bodyDiv.scrollLeft());
    colDiv.scrollTop(bodyDiv.scrollTop());
   });
   // 外部 div の設定
   div
    .width(options.width + (withWidth ? 20 : 0) + (withHeight ? 20 : 0))
    .height(options.height + (withWidth ? 20 : 0) + (withHeight ? 20 : 0));
  });
}
})(jQuery);

冻结表格(tablefix)相关推荐

php表格怎么让某一行不显示,怎么冻结表格某一行
冻结表格某一行的方法:1.依次在菜单栏依次点击"视图"→"冻结窗格"→"冻结拆分窗格":2.在菜单栏点击"视图",并选择 ...
html冻结表格——类似excel功能
这是一个html,无论怎么拖,横向标题和竖向标题都被固定这是html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...
mysql冻结某一列_jQuery 实现冻结表格行和列
1.创建多个div,div之间通过css实现层叠,每个div放置当前表格的克隆.例如:需要行冻结时,创建存放冻结行表格的div,通过设置z-index属性和position属性,让冻结行表格在数据表格 ...
bootstrap 冻结表格，冻结表头
需要的文件下载: bootstrap-table:https://github.com/wenzhixin/bootstrap-table bootstrap-table-fiex-column:ht ...
php模拟表格冻结,PHPExcel冻结（锁定）表头的简单实现方法
本文实例讲述了PHPExcel冻结(锁定)表头的简单实现方法.分享给大家供大家参考,具体如下: PHPExcel是一款功能比较强大的操作微软excel的PHP插件,在导出数据时为了方便查看,有时需要锁 ...
html如何冻结字段,利用jQuery实现HTML 表格行列冻结
摘要:行列冻结是处理表格非常常见的应用,我们都知道用excel可以很轻松的实现这一功能.但html编写的web网页表格中并没有冻结表格这一功能,那又要如何才能实现表格的行列冻结呢? 行列冻结是处 ...
关于bootstrap-table冻结列生成多个冻结表头和表格主体的问题
Write By Monkeyfly 以下内容均为原创,如需转载请注明出处. 前提项目中有3个页面的表格使用到了 bootstrap-table 冻结列的功能其中,某个表格要实现如下图所示的功能: ...
Qt高仿Excel表格组件-支持冻结列、冻结行、内容自适应和合并单元格
目录一.概述二.效果展示三.实现思路 1.冻结行.冻结列 2.行高自适应 3.蚂蚁线四.测试代码 1.添加表格数据 2.设置冻结行.列 3.行高.列宽 4.单元格背景色 5.单元格文字 6.其 ...
html表格行列变化插件,利用jQuery实现HTML 表格行列冻结
摘要:行列冻结是处理表格非常常见的应用,我们都知道用excel可以很轻松的实现这一功能.但html编写的web网页表格中并没有冻结表格这一功能,那又要如何才能实现表格的行列冻结呢? 行列冻结是处 ...

冻结表格(tablefix)

冻结表格(tablefix)相关推荐

最新文章

热门文章