`

js 固定表头

阅读更多
/*********************************
** 名称:JQeury实现表格行列冻结
**
** 作者:杨积江
**
** 时间:2114年4月16日
**
** 联系:yangjijiang@sina.cn
**
** 描述:类似Excel中的冻结窗格功能.建议给出表头固定宽度,所有单元格的高度,指定表格宽度;
**********************************/
$.fn.mergeAttributes = function(src){
if($.browser.msie) {
$(this).get(0).mergeAttributes(src.get(0));
}else{
attrs = src.get(0).attributes;//保存所有属性
i = attrs.length - 1;
for(;i>=0;i--){
var name = attrs[i].name;//取出属性名
if(name.toLowerCase() === 'id' || attrs[i].value=="" || attrs[i].value==null ||attrs[i].value=="null"){
continue;
}//忽略id属性 和 值为空的属性的标签元素的合并
try{
$(this).attr(name,attrs[i].value);
}catch(e){
}
}
}
}


$.fn.FrozenTable = function(iRowHead,iRowFoot,iColLeft){
var oTable = $(this);
var oTableId = oTable.attr("id");
var oDiv = $(this).parent();
if(oDiv.get(0).tagName != "DIV") return;
oTable.find("td").attr("noWrap","nowrap");
//oTable.css("table-layout","fixed");

    //表格宽高大于div宽高
if(oTable.width()>oDiv.width() && oTable.height()>oDiv.height()){
if(iRowHead>0 && iColLeft>0){
var oCloneTable = $("<table id='oTableLH_"+oTableId+"'></table>");
oDiv.parent().append(oCloneTable);
oCloneTable.CloneTable(oTable,0,iRowHead,iColLeft);
oCloneTable.css("position","absolute");
oCloneTable.css("z-index","1004");
oCloneTable.css("left",oDiv.offset().left);
oCloneTable.css("top",oDiv.offset().top);
}
if(iRowFoot>0 && iColLeft>0){
var oCloneTable = $("<table id='oTableLF_"+oTableId+"'></table>");
oDiv.parent().append(oCloneTable);
oCloneTable.CloneTable(oTable,oTable.find("tr").length-iRowFoot,oTable.find("tr").length,iColLeft);
oCloneTable.css("position","absolute");
oCloneTable.css("z-index","1003");
oCloneTable.css("left",oDiv.offset().left);
oCloneTable.css("top",(oDiv.offset().top+oDiv.outerHeight(true)-oCloneTable.outerHeight(true)-17));
}
}


    //固定了表头 表格高度大于div容器高度
if(iRowHead>0 && oTable.height()>oDiv.height()){
var oCloneDiv = $("<div id='oDivH_"+oTableId+"'><table></table></div>");
oDiv.parent().append(oCloneDiv);
oCloneDiv.find("table").CloneTable(oTable,0,iRowHead,-1);
oCloneDiv.css("overflow","hidden");
oCloneDiv.css("width",oDiv.outerWidth(true)-21);
oCloneDiv.css("position","absolute");
oCloneDiv.css("z-index","1002");
oCloneDiv.css("left",oDiv.offset().left);
oCloneDiv.css("top",oDiv.offset().top);
}

    //固定了表底部 表格高度大于div容器高度
if(iRowFoot>0 && oTable.height()>oDiv.height()){
var oCloneDiv = $("<div id='oDivF_"+oTableId+"'><table></table></div>");
oDiv.parent().append(oCloneDiv);
oCloneDiv.find("table").CloneTable(oTable,oTable.find("tr").length-iRowFoot,oTable.find("tr").length,-1);
oCloneDiv.css("overflow","hidden");
oCloneDiv.css("width",oDiv.outerWidth(true)-21);
oCloneDiv.css("position","absolute");
oCloneDiv.css("z-index","1001");
oCloneDiv.css("left",oDiv.offset().left);
oCloneDiv.css("top",oDiv.offset().top+oDiv.outerHeight(true)-oCloneTable.outerHeight(true)-17);
}

    //固定了表左侧 表格宽度大于div容器宽度
if(iColLeft>0 && oTable.width()>oDiv.width()){
var oCloneDiv = $("<div id='oDivL_"+oTableId+"'><table></table></div>");
oDiv.parent().append(oCloneDiv);
oCloneDiv.find("table").CloneTable(oTable,0,oTable.find("tr").length,iColLeft);
oCloneDiv.css("overflow","hidden");
oCloneDiv.css("height",oDiv.outerHeight(false)-17);
//TODO
oCloneDiv.css("position","absolute");
oCloneDiv.css("z-index","1000");
oCloneDiv.css("left",oDiv.offset().left);
oCloneDiv.css("top",oDiv.offset().top);
}



oDiv.scroll(function(){
if(typeof($("#oDivH_"+oTableId).get(0))!='undefined'){
$("#oDivH_"+oTableId).scrollLeft($(this).scrollLeft());
}
if(typeof($("#oDivF_"+oTableId).get(0))!='undefined'){ //TODO
$("#oDivF_"+oTableId).scrollLeft($(this).scrollLeft());
}
if(typeof($("#oDivL_"+oTableId).get(0))!='undefined'){
$("#oDivL_"+oTableId).scrollTop($(this).scrollTop());
}
});
};
/**
*
* @param oSrcTable 原始表格(需要克隆的表格)
* @param iRowStart 行号开始处
* @param iRowEnd 行号完结处
* @param iColumnEnd 列完结处
* @constructor
*/
$.fn.CloneTable = function(oSrcTable,iRowStart,iRowEnd,iColumnEnd){
var iWidth = 0,iHeight = 0;
$(this).mergeAttributes(oSrcTable);
var Log="";
var rowspanValue = 0;
var rowNumber = 0;
var rowIndex;
for(var i=iRowStart;i<iRowEnd;i++){//遍历每一行
var oldTr = oSrcTable.find("tr").eq(i);//找出第i个tr元素
var isSingleRowspan = false;
var rowspanCount = 0;
var colCount = 0;
var colNumber = 0;
for(var j=0; j<(iColumnEnd==-1?oldTr.find("td").length:iColumnEnd); j++){
var oldTd = oldTr.find("td").eq(j);//遍历td元素
colNumber++;
var colspan = oldTd.attr("colspan");//得到colspan的数目
if (typeof(colspan)=="undefined" || colspan==1) {
   colCount += 1;
}else{
   colCount += colspan;//统计列数目
}
            //统计行数目
var rowspan = oldTd.attr("rowspan");
            //TODO
if(typeof(rowspan)!="undefined" && rowspan!=1){
rowspanCount++;
rowIndex = i;
rowspanValue = rowspan;
rowNumber = rowspanCount;
}
if(colCount>=iColumnEnd && iColumnEnd!=-1){
break;
}
}


Log +=i+"=="+rowIndex+"="+rowspanCount+"="+rowNumber+"="+rowspanValue+"<br>";
        //TODO


if(i>rowIndex && i<=(rowIndex+rowspanValue-1) && iColumnEnd!=-1){
if(rowNumber!=0 && iColumnEnd==rowNumber){
isSingleRowspan = true;
}else{
colNumber -= 1;
if(rowspanCount==0){
colNumber -= (rowNumber-1);
}
}
}
if(colNumber!=0){
var newTr = $("<tr></tr>");
newTr.mergeAttributes(oldTr);
var jWidth = 0;
iHeight += oldTr.outerHeight(false);
for(var j=0; j<colNumber;j++){
if(isSingleRowspan){
continue;
}
var oldTd = oldTr.find("td").eq(j);
var newTd = oldTd.clone(true,true);

/*IE 一行多列合并时
if(iColumnEnd==-1 && iRowStart!=0 && $.browser.msie){
if (typeof(newTd.attr("colspan"))!="undefined" && newTd.attr("colspan")!=1) {
alert(newTd.text()+"==2=="+newTd.attr("colspan")+"---"+colCount);

}
if(iColumnEnd==-1 && iRowStart!=0 && j==1){
    newTd.width(oidTd.outerWidth(true)-1);
jWidth += (oidTd.outerWidth(true)-1);
}else{
newTd.width(oidTd.outerWidth(true));
jWidth += oidTd.outerWidth(true);
}*/


newTd.height(oldTd.height()+1);//TODO
newTd.width(oldTd.outerWidth(true));
jWidth += oldTd.outerWidth(true);
iWidth = Math.max(iWidth,jWidth);
newTr.append(newTd);
}
$(this).append(newTr);
}
}
$(this).width(iWidth);
$(this).height(iHeight);
}
分享到:
评论

相关推荐

    JS固定表头和左边列V2.0(源码)

    锁定表头及固定左边列,原生JS原创代码 需要注意的问题: 1.表格的宽度以及表格每一列的宽度需要固定(特殊情况除外:当表格列数少并且表格总宽度明显小于表格父容器的宽度时,也就是表格列不存在自动换行的问题) 2...

    JS锁定表头锁定列1.4

    "JS锁定表头锁定列1.4"是一个针对这种情况的解决方案,它允许用户在滚动表格内容时保持表头和左侧列固定,提供更好的用户体验。这个库是用原生JS编写的,因此无需依赖任何第三方库,如jQuery,这有助于减小页面加载...

    js固定表头和第一列固定

    js固定表头和第一列固定,内容变化

    Html纯js固定表头、左侧首列

    Html纯js固定表头、左侧首列,无须使用第三方插件

    纯JS固定表头列头已经可变单元格

    总的来说,纯JS实现固定表头和可变单元格的插件是一种挑战,需要掌握JavaScript的DOM操作、事件处理以及CSS布局知识。虽然这个插件的灵活性可能有限,但它提供了一个基础框架,开发者可以根据自己的需求进行扩展和...

    JS固定表头和左边列

    原生JS写的表头固定及左边列固定功能,原创代码,代码比较简单,兼容IE8+、谷歌、火狐等主流浏览器,当前版本为1.7,此版本修正了性能问题,支持合并后的表格单元格,表格单元格可以不用设置宽度了。当表格总宽度...

    JS固定表头和左边列(最新源码)1.9

    锁定表头及固定左边列,原生JS原创代码 需要注意的问题: 1.表格的宽度以及表格每一列的宽度需要固定(特殊情况除外:当表格列数少并且表格总宽度明显小于表格父容器的宽度时,也就是表格列不存在自动换行的问题...

    JS固定表头及左边列

    为了解决这个问题,"JS固定表头及左边列"的技术应运而生。这个技术主要是通过JavaScript实现,确保在页面滚动时,表头和左侧列始终保持可见,提高用户的浏览体验。 首先,我们来看"固定表头"这一概念。在网页中,...

    js实现固定表头表列和表格翻页

    功能特色: 1. 实现表格的列排序功能(点击表头,切换该列升降序),也可以指定哪一列不排序; 2. 实现当前排序列高亮显示;...7. 所需要引用的js文件非常小巧,压缩版仅2.5k 8. 使用非常简单,可进行参数配置

    JS固定表头和左边列(支持合并单元格)v1.6

    "JS固定表头和左边列(支持合并单元格)v1.6"是一个专门为解决这个问题而设计的JavaScript库。这个库由原生JavaScript编写,意味着它无需依赖其他大型框架,如jQuery,使得它更轻量级且易于集成到项目中。 表头固定...

    js table 固定表头

    js table 固定表头

    Table 固定表头插件

    - `fixed-header-table.js`:插件的JavaScript源代码,包含了实现固定表头功能的核心逻辑。 - `fixed-header-table.css`:插件的CSS样式文件,用于调整表头的视觉效果和定位。 - `demo.html`:示例文件,展示了如何...

    固定table表头的插件

    总的来说,固定table表头的插件是提高数据展示用户体验的有效工具,它结合了HTML、CSS和JavaScript的技术,通过合理的结构设计和动态定位,实现了在页面滚动时保持表头可见的效果。对于前端开发者来说,理解和掌握...

    锁定表头和固定列(Fixed table head and columns)

    在提供的压缩包文件中,"锁定表头和固定列(Fixed table head and columns) _files"很可能包含了实现此功能所需的CSS和JavaScript文件,而".htm"文件则是一个示例HTML页面,展示了如何将这些技术应用到实际的表格中。...

    js控制锁定表头表列

    总结来说,"js控制锁定表头表列"是一个提高网页表格可读性的技术,利用JavaScript监听滚动事件,结合CSS固定定位,保持表头和指定列在滚动时始终可见。这一技术对于数据展示和用户交互有显著的提升,尤其适用于数据...

    ASP.NET固定GridView表头_SuperTables

    接着,`superTables.js`和`jquery.superTable.js`是JavaScript库,它们提供了实现固定表头的逻辑。其中,`jquery.superTable.js`可能是基于jQuery的一个扩展插件,因为jQuery是一个广泛使用的JavaScript库,可以简化...

    html 表头固定,基于ext的

    本主题关注的是如何在EXT框架下实现HTML表格的表头固定效果,EXT是一个强大的JavaScript库,常用于构建富客户端应用。 EXT提供了丰富的组件和布局管理,对于创建复杂的用户界面非常有帮助。在处理固定表头的问题上...

    JavaScript:固定table的表头

    为了解决这个问题,"JavaScript:固定table的表头"这一技术应运而生,它的目标是确保当用户滚动页面时,表头始终固定在页面顶部,提供清晰的列标识。 实现固定表头的方法多种多样,其中JavaScript是一种常见的解决...

    h5 固定表头及列头demo

    总的来说,"h5 固定表头及列头demo"是一个实用的示例,它结合了H5、CSS和JavaScript的技术,以实现对长表格的优化显示。通过学习和理解这个示例,开发者能够提升在网页开发中的用户体验设计能力,特别是在处理数据...

Global site tag (gtag.js) - Google Analytics