更换表格冻结列插件

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

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

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

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

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

Loading…
Cancel
Save