实现GridView冻结表头和列

2024-08-30

扩展gridview轻松实现冻结行和列

在实际的项目中,由于项目的需要,数据量比较大,同时显示栏位也比较多,要做gridview里显示完整,并做到用户体验比较好,这就需要冻结表头和关键列.由于用到的地方比较多,我们可以护展一个gridview,使其简单设置就能达到目的. 下面是我写的一个扩展gridview的一个工程和简单例子.主要的设置属性是红色框框内的. 下面,我们再看一下前台的文件设置, 这里要注意删掉<DOCTYPE type> 这一行,否则不起作用. 运行得到以下结果.红色线是冻结分界线,对照以下两张图片,可以看到效果.

【jQuery 冻结任意行列】冻结任意行和列的jQuery插件

实现原理: 创建多个div,div之间通过css实现层叠,每个div放置当前表格的克隆.例如:需要行冻结时,创建存放冻结行表格的div,通过设置z-index属性和position属性,让冻结行表格在数据表格的上层.同理,需要列冻结时,创建存放冻结列表格的div,并放置在数据表格的上层.如果需要行列都冻结时,则除了创建冻结行.冻结列表格的div,还需要创建左上角的固定行列表格的div,并放置在所有div的最上层. 处理表格的滚动事件,在表格横向或者纵向滚动时,同时让相应的冻结行和冻结列也同步滚动

GRIDVIEW多行多列合并单元格（合并列）

GitHub项目地址:https://github.com/mingceng/merge-gridviewcell 去年的时候,我写了两篇文章: GridView多行多列合并单元格(完整代码和例子)和 GridView多行多列合并单元格(指定列合并).今天继续再添加一些功能,首先看下图: 左边是原始数据的显示,右边是应用合并列之后的效果. 从图中可以看到,二级指标有两列,有的行中两列的内容一样,有的则不一样,如果实现如右图所示,看起来效果会更好一些.下面就着手实现这个功能,我的实现原理很简单,

GridView控件隐藏列

GridView隐藏列visible="false" 后你就无法取得这列的值了下面是迄今为止最简洁的解决方法了. protected void GVList_RowDataBound(object sender, GridViewRowEventArgs e) { //隐藏不必要的列 if ((e.Row.RowType == DataControlRowType.DataRow) || (e.Row.RowType == DataControlRowType.Header)

js Table冻结表头示例代码

Table冻结表头的js实现代码. Table冻结表头: <script type="text/javascript"> //冻结table的表头 function fixupFirstRow(tab) { var div=tab.parentNode; if(div.className.toLowerCase()=="freezediv"){ tab.rows[0].style.zIndex="1"; tab.rows[0

C# GridView点击某列打开新浏览器窗口

C# GridView点击某列打开新窗口的方式: (1)打开浏览器新窗口:蓝色部分通过超链接. (2)打开模式化窗口:通过OnRowCommand事件,弹出模式化窗口. 具体如下: <asp:GridView ID="gvAssess" runat="server" AutoGenerateColumns="False" SkinID="gridview"

关于table 冻结标头及列---js控制方法

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><

浅谈js中如何动态添加表头/表列/表格内容

我想很多童鞋用js动态向表格中添加数据很熟悉,而且也觉得非常简单!是的,对于写页面的童鞋来说,最喜欢写查询的页面了,动态向表格绑定数据.用for循环就可以轻松搞定. 如果我们的业务需求有所变化,可能我们要的数据就不是这样一条一条的中规中矩的.如果你还是新手,又没有人教你,在网上又搜不到方法,可以告诉你一个简便的方法,那就是让后台写服务的同事在后台把数据拼接好返回给你,当然了,这种无理的要求一般大部分会遭到拒绝的,那怎么办呢?动脑子了... 下面列举一下我经常遇到的一些表格格式: 1. 固定的表头

vue表格实现固定表头首列

前言最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问题欢迎评论交流. 效果思路要实现固定首行首列除了使用各种UI框架插件外,那就是自己用原生写啦首先我们理一下思路如何固定首行首列呢? 可能每个人有不同的想法我这里当然介绍的是我自己的想法那就是把首列表头和表格主内容分割开来,如下图不过这样虽然固定了表头首列但还是不能实现我们想要的效果

jquery固定表头和列头

1.对网上的开源方法稍作了些修改 <script type="text/javascript">// <![CDATA[ function FixTable(TableID, FixColumnNumber, width, height) { /// <summary> /// 锁定表头和列 /// <para> sorex.cnblogs.com </para> /// </summary> /// <param

bootstrap-table固定表头固定列

1.引入 bootstrap依赖于jquery bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-table有两种方式,html.js <table id="table" class="table table-bordered table-hover" data-toggle="table" //启用bootstrap表格 data-classes="table table-hove

asp.net table表格表头及列固定实现

http://blog.csdn.net/zdw_wym/article/details/48630337 在开发中常会遇到table表格中列特别多,下拉后,表头就看不见了,水平滚动后,第1.2列就看不见了,于是需求就出来了,就是需要固定table的表头和列. demo结构如下图所示: demo下载地址:http://download.csdn.net/detail/taomanman/9124949 示例运行效果如下图所示:

vue中获取滚动table的可视页面宽度，调整表头与列对齐(每列宽度不都相同)

mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.adjustTable(event); }); }, ...... // target中的属性很多,可以通过控制台查看—-clientWidth可以获取除滚动条外的可视区域宽度 adjustTable(event) { this.clientWidth = event.target.cli

在EXCEL中如何同时冻结行与列？

鼠标所在的单元格的位置 ,决定了你冻结的行和列.如: 冻结第一行与第一列, 只需要将鼠标置于单元格在第二列,第二行. 点击冻结

CSS样式实现表头和列固定

效果图:第一行和第一列固定 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>CSS实现表头与列固定</tit

bootstrap 冻结表格，冻结表头

需要的文件下载: bootstrap-table:https://github.com/wenzhixin/bootstrap-table bootstrap-table-fiex-column:https://github.com/wenzhixin/bootstrap-table-fixed-columns 参考来源:https://www.cnblogs.com/Kyaya/p/9004237.html 1.引入文件 2. bootstrap-table有两种方式,html.js <tab

JaveScript-解决表格使用滚动条时冻结表头栏问题

解决方法: //设置表格表头里的th==表格内容里的td function ThEqualTd(thId, tdId) { var tdNum = document.getElementById(tdId).rows[0].cells.length;//获取tdId表格中的第一行的列数 var tdW = "";//清空tdW的宽度 for (i = 0; i < tdNum; i++) { tdW = document.getElementById(tdId).rows[0].

asp.net GridView控件的列属性

BoundField 默认的数据绑定类型,通常用于显示普通文本 CheckBoxField 显示布尔类型的数据.绑定数据为TRUE时,复选框数据绑定列为选中状态:绑定数据为FALSE时,则显示未选中状态.在正常情况下,CheckBoxField显示在表格中的复选框控件处于只读状态.只有GridView控件的某一行进入编辑状态后,复选框才恢复为可修改状态. CommandField 显示用来执行选择,编辑或删除操作的预定义命令按钮,这些按钮可以呈现为普通按钮,超链接,图片等外观. 通过字段的But

gridview自定义表头

gridview为我们提供了丰富的接口,用于满足自定义需求. 通常asp:gridview会根据绑定的列Columns自动生成表头,展现在前台元素. 序号类别有时候需要复杂一些的表头. 序号类别数学物理化学此时需要实现RowCreated事件 RowCreated提供了两个参数,重写表头. protected void RowCreated(object sender, GridViewRowEventArgs e) if (e.Row.RowType == DataControl

Gridview 多重表头 (二)

多重表头之排序这是个有点忧桑的故事...Cynthia告诉我,研究一个问题,我们不可能有超过一天的时间... 结果好好几天过去鸟~~还没有完成... 由于不再使用Gridview自带的表头行,于是无法绑定gridview自带排序方法.只能根据点击列名做不同处理. 我的思路是酱滴,将点击的列名存在一个hiddenfield里,排序时候根据hiddenfield里存储的值作为升/降序的依据. 好丢人的说,第一次的时候存在了label里,每次回传都被label默认值覆盖,后来才发现,不是所有控件都叫

Gridview 多重表头 (一)

今天看到一个人每个月更新博客,结果七年后改行去卖土特产...感慨良多... 虽然我也想去开餐厅~~ 今天需求里有一个多重表头,感觉比较奇特,特意留下记录,以防我的大脑被艾滋海默攻占~~没有女主的命,不能得女主的病~ 先看效果本小主脑残写个dropdownlist,忽略之.下图的方法是在不隐藏gridview本身的列标题情况下加一行. 1 protected void GridView2_RowCreated(object sender, GridViewRowEventArgs e) 2 {

实现GridView冻结表头和列

热门专题