WebGrid固定列（Fixed-Coloum）的设定

有时候WebGrid表格中列的数目比较多，若表格的宽度不足以显示所有列，当我们拉动左右滚动条就有可能看不见关键列。我们希望关键列不随着滚动条的移动而移动。

比如我们创建如下Table用来描述每个学生各个科目的成绩：

DataTable dt = new DataTable();

dt.Columns.Add( " 姓名 " , typeof ( string ));

dt.Columns.Add( " 科目1 " , typeof ( double ));

dt.Columns.Add( " 科目2 " , typeof ( double ));

dt.Columns.Add( " 科目3 " , typeof ( double ));

dt.Columns.Add( " 科目4 " , typeof ( double ));

dt.Columns.Add( " 科目5 " , typeof ( double ));

dt.Columns.Add( " 科目6 " , typeof ( double ));

dt.Columns.Add( " 科目7 " , typeof ( double ));

绑定WebGrid并设定宽度：

// 绑定表格

this .UltraWebGrid1.DataSource = dt;

this .UltraWebGrid1.DataBind();

// 设置表格宽度，明显小于各个列的总和

this .UltraWebGrid1.Width = new Unit( " 300px " );

this .UltraWebGrid1.Height = new Unit( " 300px " );

//“ 姓名”列应当为我们的关键列，我们希望始终看见它

this .UltraWebGrid1.Columns.FromKey( " 姓名 " ).Width = new Unit( " 100px " );

this .UltraWebGrid1.Columns.FromKey( " 科目1 " ).Width = new Unit( " 50px " );

this .UltraWebGrid1.Columns.FromKey( " 科目2 " ).Width = new Unit( " 50px " );

this .UltraWebGrid1.Columns.FromKey( " 科目3 " ).Width = new Unit( " 50px " );

this .UltraWebGrid1.Columns.FromKey( " 科目4 " ).Width = new Unit( " 50px " );

this .UltraWebGrid1.Columns.FromKey( " 科目5 " ).Width = new Unit( " 50px " );

this .UltraWebGrid1.Columns.FromKey( " 科目6 " ).Width = new Unit( " 50px " );

this .UltraWebGrid1.Columns.FromKey( " 科目7 " ).Width = new Unit( " 50px " );

这时我们运行程序，会看到它长的是这样的（老道我选择了一个样式，现在没有添加数据）

若想看到后面科目4~科目7就必须拉动滚动条，可这样我们就看不见姓名列，“这个得了100分的强人是谁啊？”，得，滚动条向左拉再慢慢找。

设置WebGrid的属性如下问题就解决了：

// 必须设定此属性为true.下面的Fixed的属性设定才有效

this .UltraWebGrid1.DisplayLayout.UseFixedHeaders = true ;

// 如果你不是在代码中设定此属性，而是在设计器的属性窗口中设定，那么你必须先将上面的UseFixedHeaders设置为true,否则此属性的true值是无法选定的

this .UltraWebGrid1.Columns.FromKey( " 姓名 " ).Header.Fixed = true ;

这样再向右拉动滚动条，“姓名”列也不会随着移动了。

WebGrid固定列（Fixed-Coloum）的设定相关推荐

锁定表头和固定列(Fixed table head and columns)
前段时间需要这个功能,但是找了很多都不能完美的实现,不是只能锁定表头,就是浏览器兼容问题什么的,在此就自己做了一个锁定表头和列的js方法,依赖于JQuery. 因为方法很简单,就未封装成插件的形式,仅 ...
锁定表头和固定列(Fixed table head and columns)(转载)
前段时间需要这个功能,但是找了很多都不能完美的实现,不是只能锁定表头,就是浏览器兼容问题什么的,在此就自己做了一个锁定表头和列的js方法,依赖于JQuery. 因为方法很简单,就未封装成插件的形式,仅 ...
elementui中 el-table表格表头以及内容渲染(横向纵向渲染)以及固定列fixed定位位置错乱表格偏移问题
el-table横向纵向渲染横向纵向渲染需要两类数组,一类渲染表头,另外一类需要渲染内容,表头数组每一个对象需要塞入两个值一个为表头渲染的内容即绑定label 另外一个为该纵列值所在字段名即绑定p ...
Element - table固定列页面数据过多滚动时显示问题
背景:使用el-tabe设置右侧固定列 fixed="right",没有设置表格固定高,数据过多时滚动table会出现如下情况: 代码如下: <el-table :data= ...
vue element 表格使用fixed固定列后切换菜单时错位问题
开发时由于列表数据项过多需要固定操作列,于是在操作列上加了fixed="right". 一开始没什么问题,但是在切换菜单时出现了错位现象后来找到问题,由于vue element- ...
el-table中设置fixed固定列之后错位的奇葩原因
场景 ElementUI中el-table设置指定列固定不动,不受滚动条影响: ElementUI中el-table设置指定列固定不动,不受滚动条影响_BADAO_LIUMANG_QIZHI的博客-C ...
el-table fixed多级表头固定列问题
个人踩过的坑,记录一下.多级表头固定列问题,先记录三点吧可以复制对应的代码去饿了么官网运行,粘贴到html将<template>替换,注意不要替换了<div> 一. 当我们需 ...
html 点击一行变色,elementui点击table每一行会变色，当有固定列的时候，
1. html代码 @row-click="rowClick" :row-class-name="tableRowClassName" :row-style=& ...
iview table 自定义列_案例 | iview中Table：拖拽适配列、自定义固定列、合并行
文 / 景朝霞来源公号 / 朝霞的光影笔记 ID / zhaoxiajingjing ❥❥❥❥点个赞,让我知道你来过~❥❥❥❥ 0 / 更新Table "iview": &quo ...

WebGrid固定列（Fixed-Coloum）的设定

WebGrid固定列（Fixed-Coloum）的设定相关推荐

最新文章

热门文章