美文网首页
2018-02-22 重新分享有关表格的样式设定问题——固定头

2018-02-22 重新分享有关表格的样式设定问题——固定头

作者: 胡諾 | 来源:发表于2018-02-23 16:07 被阅读0次
第一组:杨昊 重新分享有关表格的样式设定问题——固定头、列

表单的头部、首列需要固定,不要随着滚动条的变化而移动,方法有很多。如下:

image

想实现类似的操作,逃不过下面两个属性:

position: relative;

z-index:99;

position属性:规定元素的定位类型,relative是指生成相对定位的元素,相对于其正常位置进行定位。比如"left:20" 会向元素的left 位置添加 20 像素。

z-index属性:设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。其中,元素可拥有负的 z-index 属性值。z-index 仅能在定位元素上奏效。

我在实现这个操作时使用的是jQuery的方式,将样式动态注入。代码如下:

image

附代码:


//首列固定
       $(".table-p").scroll(function() {
            if ($(".table-p").scrollTop() > 0) {
                var Htable_flinew2 = $(".table-p").scrollTop() + "px";
                $(".tdwid2").css("position", "relative");
                $(".tdwid2").css("background", "#fff");
                $(".tdwid2").css("top", Htable_flinew2);
            }else{
                $(".tdwid2").css("top", "0");
            }
            if ($(".table-p").scrollLeft() > 0) {
                var Htable_flinew = $(".table-p").scrollLeft() + "px";
                $(".table tbody tr td:first-child").css("left", Htable_flinew);
                $(".table thead tr th:first-child").css("left", Htable_flinew);
            }else{
                $(".table tbody tr td:first-child").css("left", "0");
                $(".table thead tr th:first-child").css("left", "0");
            }           
       })

第二组:暂缺

第三组:黄华英 JavaScript代码片段
  • 给定一个 key 和一个 set 作为参数,给定上下文时调用它们。主要用于函数组合。使用闭包以存储的参数调用存储的key。

const call = (key, ...args) => context => contextkey;

  • 将接受数组的函数改变为可变参数函数。给定一个函数,返回一个闭包,将所有输入收集到一个接受函数的数组中。

const collectInto = fn => (...args) => fn(args);

  • flip 接受一个函数参数,然后将该函数第一个参数作为最后一个参数。返回一个接受可变参数输入的闭包,并且在应用其余参数之前将最后一个参数作为第一个参数。

const flip = fn => (...args) => fn(args.pop(), ...args);

  • 执行从左到右的函数组合。使用Array.reduce()与展开操作符(...)来执行从左到右的函数组合。第一个(最左边的)函数可以接受一个或多个参数;其余的函数必须是一元函数。

const pipeFunctions = (...fns) => fns.reduce((f, g) => (...args) => g(f(...args)));

  • 转换一个异步函数,以返回一个promise。使用柯里化返回一个函数,这个函数返回一个调用原始函数的Promise。使用...rest运算符传入所有参数。

const promisify = func => (...args) =>new Promise((resolve, reject) =>func(...args, (err, result) => (err ? >reject(err) : resolve(result))));

  • 接受一个可变参数函数并返回一个闭包,该闭包接受一个参数数组映射到该函数的输入。使用闭包和展开运算符 (...) 将参数数组映射到函数的输入。

const spreadOver = fn => argsArr => fn(...argsArr);

  • 把一个数组分块成指定大小的小数组。使用Array.from()创建一个新的数组,它的长度就是生成 chunk(块) 的数量。 使用Array.slice()将新数组的每个元素映射到长度为size的 chunk 中。 如果原始数组不能均匀分割,最后的 chunk 将包含剩余的元素。

const chunk = (arr, size) =>
Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>arr.slice(i * size, i * size + size));

  • 从数组中移除 falsey 值元素。使用Array.filter()过滤掉数组中所有 假值元素(false,null,0,"",undefined, 和NaN)。

const compact = arr => arr.filter(Boolean);

  • 计算数组中值的出现次数。每次遇到数组中的某个特定值时,使用Array.reduce()来递增计数器。

const countOccurrences = (arr, value) => arr.reduce((a, v) => (v === value ? a + 1 : a + 0), 0);

  • 深度平铺一个数组使用递归。通过空数组([])使用Array.concat(),结合展开运算符(...)来平铺数组。递归平铺每个数组元素。

const deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)));


第四组:王芳 《海边的曼彻斯特》

遗憾大约占了真实人生的一半, 不是所有人都可以和过去和解,逃げるは恥だが役に立つ


第五组:王颢 WinForm
  1. 在WinForm中使多个控件共享一个事件的实现:
    方法:按住Ctrl键,一次选中多个控件,选择它们共有事件,双击即可。
    例如:选择多个Button,在事件中找到Button的单击事件,双击进去,在Click事件中编写代码,这样就实现了多个控件共享一个事件。

  2. 在WinForm中使用DataGridView与数据库绑定数据时,会出现中英文列名同时显示的麻烦,这时只需一行代码将英文列明显示屏蔽掉既可以只显示中文列名;
    示例代码:this.DataGridView1.AutoGenerateColumns=false;

  3. 在WinForm中如果是一个容器控件,比如说:GroupBox,Panel,若想它其中的所有控件的Enabled属性都为false,只需将改容器控件的Enabled属性设为false即可实现该效果。
    示例代码:
    this.Panel1.Enabled=false;

相关文章

  • 2018-02-22 重新分享有关表格的样式设定问题——固定头

    第一组:杨昊 重新分享有关表格的样式设定问题——固定头、列 表单的头部、首列需要固定,不要随着滚动条的变化而移动,...

  • 表格样式归纳

    固定表头 固定列 可伸缩列 基础表格 基础表格有三种样式:斑马纹表格、带边框表格、没有样式区分的表格 不同密度的表...

  • antd中表格组件的表头和表格体对齐

    antd的表格组件中,如果表格内内容比较多,容易出现表头和表格体不对齐的问题,解决方法很简单,需要直接把表格头固定...

  • HTML-06day

    1、按钮练习 2、固定定位 3、电驴导航 4、表格样式 5、表格布局 6、表格 7、表格属性简写 8、背景 9、新...

  • 表格 、背景

    1.按钮练习 2.背景 3.背景属性 4.表格 5.给表格添加样式 6.导航标 7.固定单位 8.给表格添加样式 ...

  • 固定列和表格头的表格实现

    前言 脱离element-ui又借鉴element-ui,实现类似el-table的固定列和表头的效果 1-1固定...

  • Datepicker组件

    要实现的表格样式 问题:为什么要每个月后面和前面要在加上上个月和下个月的日期?原因:为了表格的宽度固定,不会一会高...

  • element 表格修改

    表头样式 表格为空的时的样式 表格斑马线样式 鼠标悬浮样式 表格列样式 其他 滚动条修改

  • element的问题

    表格的横线取消问题样式加载可能也有问题,不行可以加!

  • iview table响应式问题

    问题 表格样式重叠如图所示: 研究过程 控制台调试发现,table宽度不能自适应如图: 解决办法: 更改表格样式

网友评论

      本文标题:2018-02-22 重新分享有关表格的样式设定问题——固定头

      本文链接:https://www.haomeiwen.com/subject/dsuxxftx.html