首页
学习
活动
专区
圈层
工具
发布

如何锁定表头和表行同时锁定_jquery表头固定列

前段时间需要这个功能,但是找了很多都不能完美的实现,不是只能锁定表头,就是浏览器兼容问题什么的,在此就自己做了一个锁定表头和列的js方法,依赖于JQuery。...如使用jQuery1.9.x及以上版本,需要引用jQuery Migrate Plugin库,在jQuery官网即可下载到! 因为方法很简单,就未封装成插件的形式,仅仅以代码方式发布。...4、在左上角覆盖固定不动的table,命名为tableFix。...四、代码如下 完整代码如下: function FixTable(TableID, FixColumnNumber, width, height) { /// /// 锁定表头和列...ps2:代码中使用了jquery的msie方法,此方法在1.9.x中删除,需要添加jQuery Migrate Plugin引用,在jQuery官网即可下载到。

3.6K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    SaaS平台:数据列表设计

    不同地方在于,例如图中所示,增加了序号的排序方式。序号上可以输入数字,客户可基于序号的大小进行排序。 除此之外,还可以对商品进行分组排序、热门排序(根据浏览量、销量等字段设置)。...【设置-显示字段】的非锁定状态字段挪动到锁定字段前面,排序方案遵循第二点。即:先展示全部的锁定字段,再按照非锁定字段的先后顺序排序即可。 观察销售易列表,我们发现许多设计亮点。...这样的模式优点是: 1)没有了筛选区,给列表区腾出了更多的展示空间。(我们知道,如果存在了筛选区,并且筛选区基本上是固定的,在PC端上也是把许多区域占据了。...例如:锁定模式和excel的冻结窗格、双击编辑某个列数据和excel双击编辑单元格、列的筛选和excel的筛选模式,以上的这些基本上是异曲同工。...SaaS筛选及列表的抽象模型 图中可以知道,数据的处理和管理,最终的目标是为了能提高客户使用及决策的效率。 我们可描述为:用户通过筛选和列表的展示,可以高效获取到他们所要的内容。

    2.5K10

    jQuery 表格插件汇总

    本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等。...Chromatable JQuery Plugin - 固定表头,可滚动内容区,内容区滚动的时候表头位置保持不变。 ? ?...DataTables - 非常强大的 jQuery 表格插件,可变宽页码浏览,现场过滤。多列排序,自动探测数据类型,智能列宽,可从几乎任何数据源获取数据。 ? ?...Fixed Header Table - 固定表头可滚动表格 ? 表格搜索,筛选 ? tableFilter - 给表格添加简单的筛选功能。 ? ?...Tablesorter 2.0 - 将普通的,拥有 THEAD 和 TBODY 标签的表格转换为可排序表格,可以分析多种数据,支持多列排序。 ? ?

    9.7K10

    动图展示 60+ 个前端常用插件库合集

    iCheck 官网:iCheck Github:icheck 专为jQuery和Zepto做的高弹性定制化checkbox和radio按钮的插件。...Muuri.js 官网:Muuri Muuri是一个JavaScript Layout引擎,让你可以构建多样化的Layout,并具有响应式、可排序、可过滤、拖拽移动或动画效果。...Headroom.js 官网:Headroom.js 把网站空间发挥到极限,不需要导航列表是隐藏,需要时出现。搭配Animation.css可以让画面更活泼,另外也支持jQuery或Angular。...除了导航和表头,也可以固定其他内容,比如广告、返回顶部等。...List.js-资料排序 官网:List.js Github:list.js List.js对表格、清单、各式各样的对象,增加搜索、排序、过滤和灵活性,无形地建立在HTML内,极简易也易于使用。

    8.1K40

    计算机二级Python考点解析11

    集合类型 集合类型中的元素存在无序性,无法通过下标索引锁定集合类型中的每一个数值,且相同元素在集合中唯一存在。集合中的元素类型只能是固定的数据类型,即其中不能存在可变数据类型。...固定数据类型诸如整数、浮点数、字符串、元组等可以作为集合中的存储元素;而由于列表、字典以及集合类型的可变性,它们不可作为集合中的数据元素。...列表的数据项不需要具有相同的类型,创建一个列表,只要把逗号分隔的不同的数据项使用方括号括起来即可。...在列表末尾一次性追加另一个序列中的多个值(用新列表扩展原来的列表) 4 list.index(obj)从列表中找出某个值第一个匹配项的索引位置 5 list.insert(index, obj)将对象插入列表...()反向列表中元素 9 list.sort(cmp=None, key=None, reverse=False)对原列表进行排序 10 list.clear()清空列表 11 list.copy()

    1.5K10

    dataTable参数说明

    Boolean true ordering 全局控制列表的所有排序功能....Boolean true serverSide 当设为true时,列表的过滤,搜索和排序信息会传递到Server端进行处理,实现真翻页方案的必需属性.反之,所有的列表功能都在客户端计算并执行...ajax 函数对应参数 ajax.data 和标准JQuery.ajax的data参数作用类似,但效果有所不同.仅当 serverSide参数为true的时候,参数属性才有意义,当serverSide...无 dom 比较复杂的配置项,简言之就是通过一个自定义的字符串来定义DataTables里面所有组件的显示,位置和显隐....Boolean true orderFixed 自定义固定的排序策略,该策略在任何排序操作中总是起效.可以通过对一个列的固定排序(可以是隐藏的列)来定义列表默认的排序策略.

    6K20

    Docker 稳定性保障:Ubuntu 环境版本锁定方案

    本文将介绍如何有效地管理和固定 Docker 的版本。写在前面不知不觉,Docker 已经诞生十二年了。作为容器化技术的先驱,它早已成为了众多开发者和企业的必备工具。...正是基于这些原因,我决定写这篇文章,详细介绍如何在 Ubuntu 环境中有效地管理和固定 Docker 版本,帮助你避免版本更新带来的各种意外问题。...temp_file"done# 显示所有依赖(带包名标题)cat "$temp_file"echo -e "\n=== Unique dependencies (sorted) ==="# 提取唯一的依赖项并排序...(Depends\|Recommends\): //' >> "$temp_file" echo >> "$temp_file"donetemp_file2=$(mktemp)# 提取唯一的依赖项并排序...-docker从结果可以看到,系统中被锁定的软件包和我们之前获取的依赖列表一致。

    46210

    Docker 稳定性保障:Ubuntu 环境版本锁定方案

    本文将介绍如何有效地管理和固定 Docker 的版本。 写在前面 不知不觉,Docker 已经诞生十二年了。作为容器化技术的先驱,它早已成为了众多开发者和企业的必备工具。...正是基于这些原因,我决定写这篇文章,详细介绍如何在 Ubuntu 环境中有效地管理和固定 Docker 版本,帮助你避免版本更新带来的各种意外问题。..." done # 显示所有依赖(带包名标题) cat "$temp_file" echo -e "\n=== Unique dependencies (sorted) ===" # 提取唯一的依赖项并排序...Depends\|Recommends\): //' >> "$temp_file" echo >> "$temp_file" done temp_file2=$(mktemp) # 提取唯一的依赖项并排序...进行软件包版本锁定 为了让系统能够自动对列表中的程序进行版本锁定,我们可以用下面这个命令: # echo $(bash docker-deps.sh) | tr ' ' '\n' | xargs -I

    50410

    「沙里淘金」精选浏览器端JavaScript库资源推荐

    ESLint - 一种完全可插入的工具,用于识别和报告JavaScript中的模式。 JSLint - 高标准,严格和固定的代码质量工具,旨在保持语言的优秀部分。...这是基于jQuery的,它具有自动完成和本机感键盘导航;对标记,联系人列表等有用 select2 - 基于jQuery的选择框替换。它支持搜索,远程数据集和无限滚动结果。...可用于可拖动布局。 Isotope- 可过滤,可排序的网格布局库。可以实现Masonry,Packery和其他布局。 flexboxgrid - 基于CSS3 flexbox的网格。...jquery.vibrate.js - Vibration API Wrappers list.js - 为表,列表和各种HTML元素添加搜索,排序,过滤器和灵活性。构建为不可见并处理现有HTML。...http://www.listjs.com mixitup - MixItUp - 过滤和排序插件。 grid - 拖放库,用于二维,可调整大小和响应式列表。

    8.2K20

    「首席架构师推荐」一系列很棒的的浏览器端JavaScript库资源

    ESLint - 一种完全可插入的工具,用于识别和报告JavaScript中的模式。 JSLint - 高标准,严格和固定的代码质量工具,旨在保持语言的优秀部分。...这是基于jQuery的,它具有自动完成和本机感键盘导航;对标记,联系人列表等有用 select2 - 基于jQuery的选择框替换。它支持搜索,远程数据集和无限滚动结果。...可用于可拖动布局。 Isotope- 可过滤,可排序的网格布局库。可以实现Masonry,Packery和其他布局。 flexboxgrid - 基于CSS3 flexbox的网格。...jquery.vibrate.js - Vibration API Wrappers list.js - 为表,列表和各种HTML元素添加搜索,排序,过滤器和灵活性。构建为不可见并处理现有HTML。...http://www.listjs.com mixitup - MixItUp - 过滤和排序插件。 grid - 拖放库,用于二维,可调整大小和响应式列表。

    9K21

    移动端下拉刷新、上拉加载更多 Jquery插件 dropload

    DEMO5,tab加载数据 依赖 (dependence) Zepto 或者 jQuery 1.7以上版本,推荐jQuery 2.x版本(二者不要同时引用) Zepto or jQuery...1.7+,recommend to use jQuery 2.x(not use them at the same time) 使用方法 (usage) 引用css和js (basic)...参数列表 (options) 参数 说明 默认值 可填值 scrollArea 滑动区域 绑定元素自身 window domUp 上方DOM { domClass : 'dropload-up', domRefresh...dropload 参数 说明 lock() 智能锁定,锁定上一次加载的方向 lock('up') 锁定上方 lock('down') 锁定下方 unlock()解锁dropload noData...每次数据加载完,必须重置 dropReload()手动加载 已知问题 由于部分Android中UC和QQ浏览器头部有地址栏,并且一开始滑动页面隐藏地址栏时,无法触发scroll和resize

    6.7K20

    JQuery 表格插件介绍:Flexigrid 和 DataTables

    JQuery 的表格插件有很多。Flexigrid 和 DataTables 是我最近使用的,并且功能比较强大,在这里介绍一下。如果你在寻找前端绘制表格的插件,可以考虑它们。...Flexigrid 官方 Flexigrid 的特性展示: 列宽度可拖拽调整 高度和宽度可拖拽调整 列头可排序 主题支持 支持 XML/JSON 格式的 Ajax 数据源 支持分页 可以显示/隐藏列 表格搜索功能...比较遗憾的地方在于,它只提供了这种基于 row 的行表(即表头在第一行),而不支持基于 column 的列表(即表头在第一列)的列定义和数据集合表示。...DataTables DataTables 相较而言,功能上要多得多了,官方的特性展示: 可定制分页 即时数据过滤 多列排序 列宽自动调整 支持各种数据源 国际化支持 插件支持 表格当前状态保持 ……...我比较喜欢它的一个插件——FixColumns,使用这个插件就可以做出 x 轴可滚动,但锁定列表头的效果: 代码也很简单: $(document).ready( function () { var

    3.8K20

    Vue.Draggable 文档总结

    特性 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操作 当需要完全控制时,可以抛出所有变化 可以和现有的...和v-model不能共用 从表现上没有看出不同 element String,默认div 就是标签在渲染后展现出来的标签类型 也是包含拖动列表和插槽的外部标签 可以用来兼容UI...ghostClass: selector 格式为简单css选择器的字符串,当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况,此配置项就是来给这个影子单元添加一个class,我们可以通过这种方式来给影子元素进行编辑样式...fallbackClass: string 当forceFallback设置为true时,拖放过程中鼠标附着单元的样式 dataIdAttr: data-id scroll:boolean当排序的容器是个可滚动的区域...== 'b') } } componentData Object,默认值:null 用来结合UI组件的,可以理解为代理了UI组件的定制信息 包含两项:props和on props

    13K20

    当你写出User user = new User()时,JVM 都做了些什么

    各状态下的存储内容如下表所示: 标志位状态存储内容01未锁定对象HashCode、分代年龄00轻量级锁定指向锁记录的指针10重量级锁定指向锁记录的指针11GC标记空01可偏向偏向线程ID、偏向时间戳、对象分代年龄...句柄法:Java堆中划分出一部分作为句柄池,引用存储的是对象的句柄地址,而句柄中包括了对象实例和类型的具体位置信息。好处是对象移动只会改变句柄中的实例数据指针,缺点是两次定位。 ?...,分配内存时从列表中找到一个足够大的内存空间划分给对象并更新可用内存列表。...四、创建对象指令重排序问题 A a = new A(); new一个对象的简单分解动作: 分配对象的内存空间 初始化对象 设置引用指向分配的内存地址 其中2、3两步间会发生指令重排序,导致多线程时如果在初始化之前访问对象则会出现问题...可以使用volatile来禁止指令重排序解决问题; ?

    1.5K10

    6款卸载软件,geek,HiBit uninstaller,SoftCnkiller,UninstallTool,RevoUnistaller,阿香婆卸载

    它可移除系统自带程序功能所不能删除的程序,使用强制删除可卸载注册表相关项,支持显示隐藏的安装程序,按名称过滤已安装程序列表,强行卸载程序,浏览注册表项目,保存安装程序列表,软件小巧,操作简便。...阿香婆菜单栏中的“巨大”选项,可以针对各应用的磁盘占用大小进行排序。什么软件占用空间大,一目了然!我滴乖乖,一看吓一跳。光是千牛就占用了31GB?排名第二的是夜神模拟器,16GB。...大应用排序功能,牛!以Steam为例,选中需要卸载的软件,阿香婆会进行两次操作,第一次调用Steam自带的卸载程序,进行原生卸载。第二次会深度扫描注册表以及残余文件,将其全选勾上执行深度清理。...此外,你安装的浏览器插件也可检测出来,并进行管理。此外,它自带的一些小工具也让我大为震撼。...11个简单却又很实用的功能:磁盘清理、启动项管理、反删除、文件粉碎、备份、文件关联、注册表整理、解除锁定等等启动项管理:管理开机自启动程序反删除:意思就是数据恢复解除锁定:解放软件的后台占用,删除流氓程序

    10.4K40
    领券