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

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);

});

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

Java导出Excel提示文件损坏_导出Gridview到Excel成功但文件已损坏？
我需要以编程方式创建一个包含3个工作表的Excel电子表格 . 对于Sheet1,我正在尝试导出一个Gridview ...及其所有格式...而不使用Http.Response这样做,因为该技术强制文 ...
dart 获取手机信息_flutter+dart仿微信App界面聊天实例
Flutter 是谷歌开源的 UI 框架,旨在帮助开发者通过一套代码库高效构建多平台精美应用,支持移动.Web.桌面和嵌入式平台.相比较目前的混合开发方案,Flutter 提供了大量的文档,能非常 ...
php鼠标经过显示文本,CSS_HTML和CSS做网页实例教程:鼠标滑过文字改变，关于HTML+CSS的实例效果很多， - phpStudy...
关于HTML+CSS的实例效果很多,下面举出常用的几列,供新手们学习参考. html+CSS实例效果(1):鼠标滑过改变文字鼠标经过变换文字 #Menu{ width:500px; margin:5 ...
CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
文章转自:http://www.cnblogs.com/honoka/p/5161836.html 今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽 ...
CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼...
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
HTML5期末大作业：仿苏宁易购商城网站设计——仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业
HTML5期末大作业:仿苏宁易购商城网站设计--仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电 ...
网页设计作业仿苏宁易购商城网站设计——仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业
HTML5期末大作业:仿苏宁易购商城网站设计--仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电 ...
php如何将文档转成flas,PHP_PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)，本文实例讲述了PHP实现仿百度 - phpStudy...
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash) 本文实例讲述了PHP实现仿百度文库,豆丁在线文档效果.分享给大家供大家参考,具体如下: 由于项目要实现类似百度文库的 ...
css代码价格,CSS三种价格表样式-CSS应用实例
CSS三种价格表样式-CSS应用实例搞代码-CSS三种价格表样式-CSS应用实例(gaodaima.com) * { box-sizing: border-box; } .columns { flo ...
vue动态获取css样式,Vue 框架之动态绑定 css 样式实例分析
今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分首先说一下动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=""就可以了,使 ...

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

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

最新文章

热门文章