html仿excel冻结 css,css实例:实现gridview仿excel冻结列

妖狐艹你老母 2022-10-07 15:59 219阅读 0赞

css实例:实现gridview仿excel冻结列

看代码之前,先说一说思路,关键点有三:

1. 表格外要套两层div，内层的用于设置滚动条，外层的要相对定位，以便于新的子表位置设定；

2. 子表与母表的样式要完全一致，因此，需要实现设定好GridView的样式，运行后，查看浏览器源文件，以完全复制表格的样式(提醒新手，GridView经IIS解析后，就是普通的

)

3. 复制后的子表位置要绝对定位，并设置z-index属性 以下为Gridview嵌套两层div的代码：

然后是CSS样式表：

.datagrid td \{padding:4px; height:20px; text-align:center\}

.fixed\{ background:\#fcc; z-index:2; \}

.gridWidth\{ width:4000px;\}

.unfixed\{ border:none;\}

\#grid \{position:relative;display:block; width:90%; margin:30px auto; background:\#fff; overflow:hidden;\}

\#gridview\{position:relative;display:block;width:100%; background:\#fff; overflow-y: hidden;overflow-x: scroll;\}

再是JS代码(用Jquery框架)：

$(document).ready(function()\{

var d=$("

var height=0;

var width=0;

d.css(\{position:"absolute",left:"0",top:"0",background:"\#fff"\});

$("\#grid").append(d);

var view=$(".datagrid");

var t=$('

');

var trlist=view.find("tr");

for(var i=0;i

var tr=trlist\[i\];

var newTr=$('

');

newTr.append($(tr).children(".fixed").clone());

t.append(newTr);

\}

d.append(t);

\});

发表评论取消回复

表情：

评论列表（有 0 条评论，219人围观）

还没有评论，来说两句吧...

相关阅读

相关 C# 冻结Excel窗口以锁定行/列、或解除冻结

文本介绍如何使用免费.NET库通过C#代码实现冻结Excel窗口以锁定行和列（包括冻结首行、首列、多行多列等），以及如何解除冻结。

雨点打透心脏的1/2处/ 2024年05月01日 03:32/ 0 赞/ 87 阅读

相关 Excel无法响应，挂起，冻结或停止工作

Excel无法响应，挂起，冻结或停止工作 Office 365的 Excel Excel 2019 Excel 2016 Excel 2016 Excel 2013Exc

﹏ヽ暗。殇╰゛Y/ 2023年10月07日 11:41/ 0 赞/ 2 阅读

相关 table-首列冻结

首先，table外层套两层div，outerDiv和 innerDiv <div class="outerDiv"> <div class

秒速五厘米/ 2023年10月07日 09:56/ 0 赞/ 48 阅读

相关 java实现冻结/锁定excel表头

解决使用 createFreezePane(a,b,c,d) 方法即可实现使用 //1 创建工作薄 HSSFWorkbook

╰半夏微凉°/ 2023年09月29日 18:44/ 0 赞/ 27 阅读

相关 jqGrid 设置冻结列

1 实现步骤：（1）设置需要冻结的列属性加上frozen: ture。（2）将设置了冻结的列放置在字段集合的前面部分。（3）调用jqgrid的 setFroze

一时失言乱红尘/ 2023年01月03日 06:12/ 0 赞/ 264 阅读

相关 EasyExcel 实现冻结行和列

1 Maven依赖 <dependency> <groupId>com.alibaba</groupId>

矫情吗；*/ 2022年10月15日 04:50/ 0 赞/ 268 阅读

相关 html仿excel冻结 css,css实例:实现gridview仿excel冻结列

css实例:实现gridview仿excel冻结列看代码之前,先说一说思路,关键点有三: 1. 表格外要套两层div，内层的用于设置滚动条，外层的要相对定位，以便于新的子

妖狐艹你老母/ 2022年10月07日 15:59/ 0 赞/ 220 阅读

相关 html gridview excel,将GridView数据导出Excel表格

\[c\\]代码库protected void btnExport\_Click(object sender, EventArgs e) \{ gridView.DataS

淡淡的烟草味﹌/ 2022年10月07日 05:45/ 0 赞/ 234 阅读

相关 easyUI表头冻结和左侧列冻结（frozenColumns columns）

一、表头冻结（关键fit:true，使用columns） <script type="text/javascript"> dataGrid = $('da

怼烎@/ 2022年05月16日 07:06/ 0 赞/ 491 阅读

相关 Excel：EXCEL中冻结窗口时，为什么老是会多冻结几行？

EXCEL中冻结窗口时，为什么老是会多冻结几行？ [https://zhidao.baidu.com/question/580269366.html][https_zhi

淩亂°似流年/ 2022年01月23日 02:57/ 6 赞/ 3227 阅读