树形表格treeTable插件实现固定列功能

因为要做树形表格使用treeTable插件，但目前插件作者还没有更新表格固定列的功能，恰巧项目又需要实现表格固定列这一需求，所以自己写了能实现固定列的函数。

<script>//固定列function fixColumn() {var tList = $("thead tr");//thead$.each(tList, function (index, item) {$(item).find("th").eq(0).children().eq(0).css({ "border-right": "1px solid #e6e6e6","border-bottom": "1px solid #e6e6e6" });$(item).find("th").eq(0).css({ position: "-webkit-sticky", position: "sticky", left: "0px", width: "202px", "background-color": " #f2f2f2", "z-index": "999" })})//tbodyvar bodyList = $("tbody tr");$.each(bodyList, function (index, item) {$(item).find("td").eq(0).children().eq(0).css({ "border-right": "1px solid #e6e6e6","border-bottom": "1px solid #e6e6e6" });$(item).find("td").eq(0).css({ position: "-webkit-sticky", position: "sticky", left: "0px", width: "202px", "background-color": " white", "z-index": "999" })})}
</script>

这个函数只需要放在表格数据渲染完成的done回调里面就可以实现，如下

实现前，无法固定第一列

实现后，可以固定第一列

提示：position 属性sticky存在浏览器兼容问题，部分浏览器不支持，目前我只测试了chrome、firefox、360浏览器，都可以实现该功能。

树形表格treeTable插件实现固定列功能相关推荐

实现layui的树形表格treeTable
实现layui的树形表格treeTable,layui中有可以使用 'tree','table' , 进而使用layui.treeGird实现 layui.treeGird({elem: '#dem ...
el-table 全屏时，控制台从右边设为独立出来时，表格最右侧的固定列的行会对不齐解决
vue项目,使用el-table ,最右侧是操作,固定列,有宽度.浏览器全屏时,控制台从右边设为独立出来时,表格最右侧的固定列的行会对不齐. 百度了挺长时间,得有两天.试了网友的代码.能解决我其他情形 ...
layui表格换行，有固定列的情况
一般的写入样式直接换行,如果所有表格都要改成换行,建议放到admin.css全局 .layui-table-cell {/*全局*/height:auto;min-height: 20px;overf ...
java 表格树_00030-layui+java 树形表格treeTable
下载后,treeTable.js.treeTable.css 的放置目录分别为: layuiadmin/modules/treeTable.js layuiadmin/modules/treeTabl ...
java tree 表格_00030-layui+java 树形表格treeTable
下载后,treeTable.js.treeTable.css 的放置目录分别为: layuiadmin/modules/treeTable.js layuiadmin/modules/treeTabl ...
基于el-table的树形表格及js-xlsx实现下载excel功能（二）
目录一.安装xlsx 二.下载的表出现科学计数法三.代码设置excel样式写成工具函数模拟a标签,点击下载函数下载使用这篇主要是利用xlsx下载表格,网上参考的资料挺多的一.安装xls ...
[Layui]JS实现Layui树形表格treetable演示下载
地址: 添加链接描述后面写一篇完整的前后端处理DEMO
bootstrap 树形表格渲染慢_layUI之树状表格异步加载组件treetableAsync.js（基于treetable.js）...
概述后台框架中使用树状表格是非常常用的操作,layUI本身并没有这种组件. 第三方的treetable.js做到了完美的实现,但是不能实现在双击时异步加载数据,本文就是站在了巨人的肩膀上实现的异步加 ...
iview table组件里的固定列表格不自适应问题
当在使用iview Table组件里固定列功能时出现表格不自适应宽度问题具体如下解决这个bug 很简单把组件里的 width 改为 minWidth 即可 columns: [{title: ...

树形表格treeTable插件实现固定列功能

树形表格treeTable插件实现固定列功能相关推荐

最新文章

热门文章