datagrid 滚动条的设计

关注

转载最新推荐文章于 2026-10-09 09:34:50 发布 3.1k 阅读 AI 写同款· GEO 优化 ›

miniui中datagrid表格当前行根据下拉框的值去改变当前行某一列的编辑状态及配置相对应的值例如这个需求（下图）：注：因为这个问题困扰了我一个星期，现在已经解决掉，我把它记录一下，因为我自己也在网上找了，当作是我自己的总结吧。（1)上图，‘产品名称’关联OA存货档案,当【产品属性】为【主机】、【板材】、【LED灯】时，必须选择，当【产品属性】是【配件】时可编辑配件名称。（2)上图，‘防伪码’删除，改为‘产品属性’，并设为选择器(产品主机、配件、板材、LED灯)，数据联动：当产品属性=配件或板材或LED灯时，数量默认空，必填。当产品属性=产品主机时，数量默认1，不可编辑前台HTML界面 &l 阅读详情

为DataGrid加上滚动条，众所周知可以通过嵌套在<div></div>里来实现。我先总结一下这些方法：

1. 利用div的overflow的特性，我们可以设计出表格的滚动条。但是我们通常需要一个固定不动的表头，因为整个datagrid放在div中，无法使表头固定不动。（方法二，可以利用css固定)，我们设计需要另一个<table>来作为表头，同时，将由div包含着的datagrid的表明细行对齐表头，形成完整的表格。格式如下：

现在是如何能保证表头和DataGrid中的Cell的宽度对齐。可以看到，将“表头”和 “明细行”放在一个<td>里能保证他们的边缘对齐。现在，如何保证他们中间线对齐呢？

当DataGrid不用表头之后，无法利用表头的Style控制DataGrid中的Cell宽度，为了保证中间的单元格对齐，我们在ItemDataBound里为每个单元格设置宽度。

private void DataGrid1_ItemDataBound(object sender, DataGridItemEventArgs e)

{

e.Item.Cells[0].Style.Add("width", "30%");

e.Item.Cells[1].Style.Add("width", "30%");

e.Item.Cells[2].Style.Add("width", "30%");

}

同样，表头里的单元格也设置同样的宽度。效果如下：

2. 上面的方法，比较简单。就是需要添加HTML，而且对于横向的滚动条并没有控制。这里接着说明另一种办法，从codeproject上看来的。主要是通过CSS来控制。原贴地址：http://www.codeproject.com/aspnet/FreezePaneDatagrid.asp

关键是这句：

TH { BORDER-RIGHT: silver 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 14px; Z-INDEX: 10; CURSOR: default; COLOR: white; POSITION: relative; TOP: expression(document.getElementById("div-datagrid").scrollTop-2); BACKGROUND-COLOR: navy; TEXT-ALIGN: center }

我们知道DataGrid被转换成标准HTML标签在客户端显示，表头都将被转换成<TH>标签。首先是位置成为相对,而不是绝对位置显示。顶端位置则是滚动条顶部位置之下2px。

其所用CSS:

效果如下：