`
yjl49
  • 浏览: 113032 次
社区版块
存档分类
最新评论

Grid如何固定列宽?

 
阅读更多

二话不说先上图:

1.字段较少时:

条件1

效果如下:

字段较少时

各列的宽度正常,都是按设置显示的。

当字段较多时:

字段较多时挤在一块,左右滑动也不起作用

为了能在屏幕上全部显示出来各个字段都挤在了一块,设置的DIV的滑动不起作用。

后台绑定各字段的代码:

前台的代码为:

请问各位,你们又是如何处理的呢? 如何能设置列的固定宽度,即使在字段较多时任保持宽度(可左右滑动)。

-----------------------------------------------分割线--------------------------------------------------------------

问题解决方法如下:

1.设置DIV的列宽为固定值而不是百分比(当列多时百分比会被撑开)

2.设置GridView的各列宽

这段代码写在GridView绑定了某列(GridView1.Columns.Add(XXX))之后。

3.在GridView的DataBound事件中计算并设置GridView的总宽度:

到目前为止水平的滑动条已经可用了。为了让各列能在宽度设置较小情况下自动换行我们加入这段代码:

当然你也可以在Page_Load或其它需要的地方直接设置GridView.Attribute属性来达到这一效果。这里就不多写了。

各字段设置:

相应的字段设置

效果:

最终效果

在此感谢Csdner: wjq 和其他参与解答的网友。

分享到:
评论

相关推荐

    VB中Felx Grid控件设计时如何改变列宽

    然而,在设计阶段调整MSFlexGrid控件的列宽是许多开发者关注的重点之一,因为合适的列宽能够显著提升数据的可读性和界面的美观度。以下将详细介绍如何在VB中通过代码动态地改变MSFlexGrid控件的列宽。 ### 如何改变...

    PB数据Grod数据窗口列宽度自动适应

    为了实现数据窗口中 Grid 类型的列宽自动适应,我们需要编写一段代码来动态计算并设置每个列的宽度。以下为具体的实现步骤: 1. **获取数据窗口对象**:首先需要获取到数据窗口对象本身。 2. **遍历所有列**:接着...

    固定表头,点击表头排序,拖动表格的列宽

    "固定表头,点击表头排序,拖动表格的列宽"这三个特性是提高用户交互性和体验的重要功能,广泛应用于各种数据密集型的网页应用中。下面我们将详细探讨这三个知识点。 1. **固定表头(Fixed Header)**: 当表格...

    pb数据窗口美化(grid线条颜色/字体垂直居中)

    本主题聚焦于如何对PB数据窗口进行美化,特别是针对“grid线条颜色”和“字体垂直居中”这两个方面。 在PB中,数据窗口的网格线(grid lines)通常是默认的颜色,可能不符合某些设计要求。为了个性化和提升用户体验...

    C# GridView自动列宽

    C# GridView自动列宽 C# GridView自动列宽 C# GridView自动列宽

    agGrid示例源码.zip

    2. **列定义**:agGrid允许自定义列的显示方式,包括列宽、头部标签、对齐方式等。源码中可能会展示如何定义列配置,并添加自定义的渲染器和编辑器。 3. **排序**:agGrid支持单列或多列排序,可以按升序或降序排列...

    postcss-grid-system:一个基于固定列宽创建网格的 PostCSS 插件

    一个基于固定列宽创建网格的插件。 安装 安装: npm install postcss postcss-grid-system --save-dev 要求与PostCSS: postcss ( [ require ( 'postcss-grid-system' ) ] ) ; 请参阅以使用 Gulp、Grunt、...

    C#设置WinForm中DataGrid列的方法(列宽/列标题等)

    DataGrid控件允许用户以表格形式查看和编辑数据,它提供了丰富的功能,包括自定义列宽、列标题等。本篇文章将深入探讨如何在C#的WinForm中设置DataGrid的列属性,特别是列宽和列标题,以及一个关键的注意事项。 ...

    streamlit-aggrid examples

    Streamlit网页中功能强大的表格显示与处理组件:streamlit-aggrid 中样例源代码,版本为streamlit-aggrid==0.2.3-2。 文件列表如下: custom_css.py example.py example_highlight_change.py fixed_key_example.py ...

    用于设置ant-design-vue中table组件的列宽可拖拽

    vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽

    Sigma Grid ajax动态表格(支持分页、列宽拖动、数据排序).

    3. **列宽拖动**:此功能允许用户通过鼠标拖动调整列宽,以适应不同长度的文本或个人的查看偏好。这提高了用户的交互性,使得数据视图更加个性化。 4. **数据排序**: Sigma Grid 支持数据排序,用户可以通过点击列...

    grid嵌套grid

    4. 调整样式和交互:根据需求调整`Grid`的样式,如行高、列宽等,以及添加必要的交互效果,如展开/折叠图标,点击事件等。 5. 整合到项目:将以上代码整合到你的项目中,确保所有依赖项正确引入,并进行必要的测试...

    JS可调整列宽表格

    这可能需要用到媒体查询(media queries)或者 Flexbox 或 Grid 布局。 6. **性能优化**:频繁的DOM操作可能会影响页面性能。为了避免不必要的重绘或回流,可以使用 `requestAnimationFrame` 或 `setTimeout` 来...

    Sigma Grid实现ajax动态表格(支持分页、列宽拖动、数据排序).zip

    这个压缩包包含的资源是关于如何使用Sigma Grid实现一个通过Ajax动态加载数据、支持分页、列宽可拖动以及数据排序的功能。以下是这些知识点的详细说明: 1. Ajax动态加载: Ajax(Asynchronous JavaScript and XML...

    GridLengthAnimationClass

    然而,WPF内置的动画类并不直接支持`GridLength`类型,这意味着开发者无法直接通过动画来改变`Grid`控件的列宽或行高。在这种情况下,开发自定义的`GridLengthAnimationClass`就显得尤为重要。 `...

    LabVIEW改变列宽86.rar

    在这里,你可以设置固定的列宽,或者选择自动调整列宽以适应内容,也可以设置最小和最大列宽,确保数据始终可见。 3. **编程接口(API)**:除了图形化界面操作,LabVIEW提供了丰富的函数库,允许通过编程方式动态...

    最新的GT-Grid vs EXT-Grid例子(超级经典)

    GT-Grid允许开发者通过API或配置文件深度定制表格的外观和行为,包括列宽调整、行选中、单元格编辑等。此外,GT-Grid还支持动态加载数据,以优化页面性能,特别是处理大数据时。 EXT-Grid则是EXT JS框架的一部分,...

    PB自动美化grid风格的dw(grid自动转成tabular)

    总结,通过PB的自定义脚本或插件,我们可以实现grid风格数据窗口的自动美化和转换,包括自动画线、支持列宽拖动、多表头等功能,提升用户体验。同时,理解并掌握PB的美化技巧和性能优化方法,对于创建高效、美观的...

    mfc_grid.zip_excel界面_grid_grid Visual c_mfc excel界面_mfc grid

    标题中的“mfc_grid.zip_excel界面_grid_grid Visual c_mfc excel界面_mfc grid”表明这是一个关于使用MFC(Microsoft Foundation Class)库创建类似Excel界面的项目。MFC是微软提供的一种C++类库,用于构建Windows...

    基于ElementUI二次封装的支持自适应列宽的tablecolumn列组件

    Element-UI的table组件在默认情况下,列宽通常是固定的,这在数据量较大或者列内容差异明显时可能导致显示效果不佳。因此,这个二次封装的组件AFTableColumn-master旨在实现列宽自适应,使得表格能根据内容动态调整...

Global site tag (gtag.js) - Google Analytics