遇到需求固定表格尾列,尾列是操作(查看,删除)这些
尝试了css,js,jquery,插件,layui,elementui各种都没用
freeze-table(一个固定表格插件)
npm install -g bower
bower -v
有版本显示就成功
①在用bower install /update xxx 时出现 “EINVALID Name must be lowercase, can contain digits, dots, dashes, "@" or spaces”问题。
这个是说目录的名字有问题,我起的名字目录名html&css,中间&触发了这个报错,删掉就没了
②
卡这两行不动了
ctrl+c强制停止运行,再运行一遍试试
使用
别忘了先导jQuery的js
具体使用
yidas/jquery-freeze-table Demo
Options
Options could be passed via JavaScript with object.
Name | Type | Default | Description |
---|---|---|---|
freezeHead | boolean | true | Enable to freeze <thead> |
freezeColumn | boolean | true | Enable to freeze column(s) |
freezeColumnHead | boolean | true | Enable to freeze column(s) head (Entire column) |
scrollBar | boolean | false | Enable fixed scrollBar for X axis |
fixedNavbar | string|jQuery|Element | '.navbar-fixed-top' | Fixed navbar deviation consideration. Example: '#navbar' |
scrollable | boolean | false | Enable Scrollable mode for inner scroll Y axis |
fastMode | boolean | false | Enable Fast mode for better performance but less accuracy |
namespace | string | 'freeze-table' | Table namespace for unbind |
container | string|jQuery|Element | false | Specify a document role element that contains the table. Default container is window . This option is particularly useful in that it allows you to position the table in the flow of the document near the triggering element - which will make the freeze table support in containers such as Bootstrap Modal. Example: '#myModal' |
columnNum | integer | 1 | The number of column(s) for freeze |
columnKeep | boolean | false | Freeze column(s) will always be displayed to support interactive table |
columnBorderWidth | interger | 1 | The addon border width for freeze column(s) |
columnWrapStyles | object | null | Customized CSS styles for freeze column(s) wrap. {'style': 'value'} |
headWrapStyles | object | null | Customized CSS styles for freeze head(s) wrap. {'style': 'value'} |
columnHeadWrapStyles | object | null | Customized CSS styles for freeze column-head wrap. {'style': 'value'} |
callback | function | null | Plugin after initialization callback function |
shadow | boolean | false | Enable default box-shadow UI |
backgroundColor | string|boolean | 'white' | Default table background color for Boostrap transparent UI. white , #FFFFFF , rgb(255,255,255,1) , or false to skip. |
上面这玩意不太行,下面这个厉害,
FrozenTable(上,下,左,右)可以填数字固定任意地方
(题外话,要是有插件还能在此基础固定任意行任意列就好了)0。0
TableFreeze.js(基于JQuery的表格冻结插件)
这个好用
看效果
TableFreeze表格冻结 (christopherkeith.github.io)
源代码
GitHub - CHristopherkeith/TableFreeze
结局 :还是没用,但是上面这个插件功能确实强大,原因是表格的内容是对接后端动态生成的,
而且渲染优先级高,也就是是相当于在原来表格上面贴图了,加载有问题时页面只有表格第一行表头,过长滑动时第一行也定死不动,只能从js动态加载的代码处想办法了。