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

妖狐艹你老母 2022-10-07 15:59 153阅读 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 条评论，153人围观）

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

相关阅读

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

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

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

相关 Excel VBA教程：如何冻结窗口中的特定行？

在Excel中，冻结窗口是一个非常有用的功能，它可以使某些行或列始终可见，即使滚动表格时也能保持在屏幕顶部或左侧。这对于大型数据表格或需要对比和查看不同部分的数据时非常方便。在

Love The Way You Lie/ 2024年02月28日 04:05/ 0 赞/ 16 阅读

相关 js通过transform实现固定（冻结）表格列

![20191208182205343.png][] <div id='table-cont' style="max-height: 150px;width: 540

左手的ㄟ右手/ 2023年06月20日 06:21/ 0 赞/ 4 阅读

相关 jqGrid 设置冻结列

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

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

相关 EasyExcel 实现冻结行和列

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

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

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

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

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

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

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

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

相关 html表格excel样式,仿Excel样式的jquery表格排序插件

这是一款仿Excel样式的jquery表格排序插件。该jquery表格排序插件基于bootstrap表格，它表格列支持按英文字母或数字的升序和降序排列，支持在表格列中按关键字进

逃离我推掉我的手/ 2022年10月07日 04:42/ 0 赞/ 192 阅读

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

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

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

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

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

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