table 滚动条设置

table 滚动条设置

开发工具与关键技术：Visual Studio 前端

作者：盘子

撰写时间：2019年 6月 16日

在做项目过程中，遇到表格带有滚动条的页面。可以通过滚动条把过多的表格数据通过滚动方式进行显示查看。下面就如何设置和使用表格滚动条进行简单讲解与总结一下。

首先，这次设置使用表格滚动条，我是使用了layui table数据表格文档-layui.table。layui插件是最近学习与做项目需要长用到的一个插件。Table模块是layui最核心的组成之一，它用于对表格进行一些列功能和动态化数据操作。它支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多表头，支持单元的自定义模板，支持对表格重载，如搜索、条件筛选。支持复选框，支持分页，支持单元格编辑等一些列的功能。

然而，创建一个table实例最简单的方式是，在页面放置一个元素 <table id="demo"></table>，然后通过 table.render() 方法指定该容器，这样一个简单的表格就可以被创建起来了。一般顺序都是绑定容器、设置数据接口、在表头设定对应的字段，其余的就由layui进行表格渲染。

下面是使用方法的代码截图，见代码截图如下：

如图中所示，使用table模块，引用layui插件是必不可少的，但要实现table表格带有滚动条，就得给它设置一个相应的高度，设置有一定的高度，滚动条就会自动出现了。实现的效果可参考最后所展示的效果图图一。

上面代码展示的是table模块的一种见得的使用方式，它还有方法渲染、自动渲染、转静态表格这三种初始化的支持，以便于其满足各种情况的需求。这三种初始化也有各自的使用方法，对表格数据进行渲染。而上面代码所展示的只是clos表头的基本设置，clos表头的一些参数如下：

Field是一个string类型，用于设定字段名

Title是一个string类型，设定标题名

Width是一个number或string类型，设定列宽，不设定时将自动分配

Type是一个string类型，设定列类型。它的可选值有：normal（常规列，无需设定）、

checkbox（复选框列）、radio（单选框列）、numbers（序号列）、space（空列）。

Sort是一个boolean类型，是否允许排序（false/true）

这几个参数都是上面代码所用到的。更多参数类型的详细解释可去layui.table模块查询。

除了table表格可以设置高度使其出现滚动条，在常用的select下拉框中也可以使用滚动条。当select选择下拉框中的选择数据过多时，我们可以给它设置一个上下滚动条，较便于数据选择。其实设置的方法也很简单，就是设置一个select-size，也就可以说是选择下拉框尺寸吧。这样选择下拉框滚动条就会出现了，实现的效果请参考最后的效果图图二。

下面是select选择下拉框设置滚动条的代码截图，见代码截图如下：

两种滚动条的设置都很简单，而且都可以查阅页面所隐藏起来的数据。

最后是实现的效果图，见截图如下：

table 滚动条设置相关推荐

extjs给panel添加滚动条_ExtJs Panel 滚动条设置
设置autoscroll:true同时出现横向和纵向滚动条. 不要设置autoscroll属性,或者autoscroll:false,然后设置bodyStyle : 'overflow-x:hidde ...
tbody 滚动条设置
文章介绍了如何将滚动条设置在tbody标签上,并且表格整体和未设置滚动条一致:此外补充了一些table的冷门姿势. How to set tbody height with overflow scro ...
在PHP中给表格加上css样式,表格CSS样式设置给table表格设置CSS样式表
表格table tr td CSS花色设置给table表格设置CSS花式表在一个网页中多处运用了表格table标签,这个时候给指定的表格对象设置装备摆设款式仿照照旧概略经由CSS发展管束配置. 着 ...
表格Table宽度设置无效的解决方法
表格Table宽度设置无效的解决方法参考文章: (1)表格Table宽度设置无效的解决方法 (2)https://www.cnblogs.com/sherryweb/p/11659848.html ...
html表格怎么改圆角边框,Table元素设置圆角border
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? Table元素设置圆角border-radius 首先,我们先对border-collapse属性进行简单的了解. 有以 ...
ant design table column 设置width不生效解决方案
ant design table column 设置width不生效解决方案参考文章: (1)ant design table column 设置width不生效解决方案 (2)https://ww ...
Visual Studio滚动条设置
@vs滚动条滚动条(Scroll Bar)设置在滚动条上点击右键,在弹出的右键菜单上选择选项-,弹出设置窗口如下: 选择文本编辑器->所有语言->滚动条设置完成之后的效果如下图:
layui table 表格设置透明
layui table 表格设置透明通过css来控制,直接上代码通过css来控制,直接上代码首先需要将table标签放入div中,div增加class名称 transparentDataTabl ...
textarea滚动条设置和初始时内容多空格解决
textarea{resize:none;font-size: 22px;font-weight: bold;overflow: auto;overflow-wrap: normal;/*滚动条设置必 ...

table 滚动条设置

table 滚动条设置相关推荐

最新文章

热门文章