更换表格冻结列插件

dep_wangsr
RuoYi 4 years ago committed by Limy
parent 3d8cd18a66
commit 6d66b07aeb

@ -867,47 +867,33 @@ label {
}
/** 表格冻结列样式 **/
.left-fixed-table-columns, .left-fixed-body-columns {
position: absolute;
background-color: #fff;
display: none;
box-sizing: border-box;
overflow: hidden;
}
.left-fixed-table-columns .table, .left-fixed-body-columns .table {
border-right: 1px solid #ddd;
.fixed-columns, .fixed-columns-right {
position: absolute;
top: 0;
height: 100%;
background-color: #fff;
box-sizing: border-box;
z-index: 1;
}
.left-fixed-table-columns .table.table-no-bordered, .left-fixed-body-columns .table.table-no-bordered {
border-right: 1px solid transparent;
.fixed-columns {
left: 0;
}
.left-fixed-body-columns table {
position: absolute;
animation: none;
.fixed-columns .fixed-table-body {
overflow: hidden !important;
}
.bootstrap-table .table-hover > tbody > tr.hover > td {
background-color: #f5f5f5;
.fixed-columns-right {
right: 0;
}
.right-fixed-table-columns{
position: absolute;
right:63px;
border-left:1px solid #ddd;
display: none;
z-index:100;
.fixed-columns-right .fixed-table-body {
overflow-x: hidden !important;
}
/** 表格全屏样式 **/
.bootstrap-table.fullscreen {
position: fixed;
top: 0;
left: 0;
z-index: 1050;
width: 100%!important;
background: #FFF;
.bootstrap-table .table-hover > tbody > tr.hover > td {
background-color: #f5f5f5;
}
/** 表格树样式 **/
@ -1070,14 +1056,20 @@ label {
/* 设置滚动条样式 */
::-webkit-scrollbar {
width: 6px;
height: 10px;
background-color: #F5F5F5;
width:10px!important;
height:10px!important;
-webkit-appearance:none;
background:#f1f1f1
}
::-webkit-scrollbar-thumb {
border-radius: 6px;
background-color: #999;
height:5px;
border:1px solid transparent;
border-top:0;
border-bottom:0;
border-radius:6px;
background-color:#ccc;
background-clip:padding-box
}
/* 设置placeholder样式 */

@ -66,8 +66,7 @@ var table = {
rememberSelected: false,
fixedColumns: false,
fixedNumber: 0,
rightFixedColumns: false,
rightFixedNumber: 0,
fixedRightNumber: 0,
queryParams: $.table.queryParams,
rowStyle: {},
};
@ -124,8 +123,7 @@ var table = {
rememberSelected: options.rememberSelected, // 启用翻页记住前面的选择
fixedColumns: options.fixedColumns, // 是否启用冻结列(左侧)
fixedNumber: options.fixedNumber, // 列冻结的个数(左侧)
rightFixedColumns: options.rightFixedColumns, // 是否启用冻结列(右侧)
rightFixedNumber: options.rightFixedNumber, // 列冻结的个数(右侧)
fixedRightNumber: options.fixedRightNumber, // 列冻结的个数(右侧)
onReorderRow: options.onReorderRow, // 当拖拽结束后处理函数
queryParams: options.queryParams, // 传递参数(*
rowStyle: options.rowStyle, // 通过自定义函数设置行样式

@ -37,8 +37,7 @@
showColumns: false,
fixedColumns: true,
fixedNumber: 3,
rightFixedColumns: true,
rightFixedNumber: 3,
fixedRightNumber: 3,
columns: [{
checkbox: true
},

@ -10,10 +10,10 @@
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
<link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
<!-- bootstrap-table 表格插件样式 -->
<link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css?v=20200727}" rel="stylesheet"/>
<link th:href="@{/css/animate.css}" rel="stylesheet"/>
<link th:href="@{/css/style.css?v=20200318}" rel="stylesheet"/>
<link th:href="@{/ruoyi/css/ry-ui.css}" rel="stylesheet"/>
<link th:href="@{/css/style.css?v=20200727}" rel="stylesheet"/>
<link th:href="@{/ruoyi/css/ry-ui.css?v=4.3.1}" rel="stylesheet"/>
</head>
<!-- 通用JS -->
@ -22,9 +22,9 @@
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- bootstrap-table 表格插件 -->
<script th:src="@{/ajax/libs/bootstrap-table/bootstrap-table.min.js?v=20200529}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/bootstrap-table.min.js?v=20200727}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=20200727}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js?v=20200727}"></script>
<!-- jquery-validate 表单验证插件 -->
<script th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
@ -182,7 +182,7 @@
</div>
<div th:fragment="bootstrap-table-editable-js">
<script th:src="@{/ajax/libs/bootstrap-table/extensions/editable/bootstrap-editable.min.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/editable/bootstrap-table-editable.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js?v=20200727}"></script>
</div>
<!-- 表格导出插件 -->
@ -193,5 +193,5 @@
<!-- 表格冻结列插件 -->
<div th:fragment="bootstrap-table-fixed-columns-js">
<script th:src="@{/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.min.js?v=20200727}"></script>
</div>

Loading…
Cancel
Save