github
/
RuoYi
mirror of https://gitee.com/y_project/RuoYi.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

新增示例（表格列拖拽）

pull/287/head
RuoYi 2021-04-27 17:12:31 +08:00
parent 0f17e5c433
commit 0a6e493f95
9 changed files with 181 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ruoyi-admin/src/main/java/com/ruoyi/web/controller/demo/controller/DemoTableController.java
View File

@ -259,12 +259,21 @@ public class DemoTableController extends BaseController
}
/**
* 表格拖拽操作
* 表格行拖拽操作
*/
@GetMapping("/reorder")
public String reorder()
@GetMapping("/reorderRows")
public String reorderRows()
{
return prefix + "/reorder";
return prefix + "/reorderRows";
}
/**
* 表格列拖拽操作
*/
@GetMapping("/reorderColumns")
public String reorderColumns()
{
return prefix + "/reorderColumns";
}
/**

11
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/reorder-columns/bootstrap-table-reorder.js Normal file
View File

File diff suppressed because one or more lines are too long

23
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/reorder-columns/jquery.dragtable.js Normal file
View File

File diff suppressed because one or more lines are too long

38
ruoyi-admin/src/main/resources/static/ruoyi/css/ry-ui.css
View File

@ -1025,7 +1025,7 @@ table.rc-table-resizing thead > th > a {
float:left;
}
/** 表格拖拽样式 **/
/** 表格行拖拽样式 **/
.reorder_rows_onDragClass td {
color:yellow!important;
background-color:#999!important;
@ -1033,6 +1033,42 @@ table.rc-table-resizing thead > th > a {
box-shadow:0 12px 14px -12px #111 inset,0 -2px 2px -1px #333 inset
}
/** 表格列拖拽样式 **/
.dragtable-sortable {
list-style-type: none; margin: 0; padding: 0; -moz-user-select: none;
}
.dragtable-sortable li {
margin: 0; padding: 0; float: left; font-size: 1em; background: white;
}
.dragtable-sortable th, .dragtable-sortable td{
border-left: 0px;
}
.dragtable-sortable li:first-child th, .dragtable-sortable li:first-child td {
border-left: 1px solid #CCC;
}
.ui-sortable-helper {
opacity: 0.7;filter: alpha(opacity=70);
}
.ui-sortable-placeholder {
-moz-box-shadow: 4px 5px 4px #C6C6C6 inset;
-webkit-box-shadow: 4px 5px 4px #C6C6C6 inset;
box-shadow: 4px 5px 4px #C6C6C6 inset;
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
visibility: visible !important;
background: #EFEFEF !important;
visibility: visible !important;
}
.ui-sortable-placeholder * {
opacity: 0.0; visibility: hidden;
}
/** 表格选中样式 **/
.bootstrap-table .fixed-table-container .table tbody tr.selected td {
background-color: #E8F7FD;

84
ruoyi-admin/src/main/resources/templates/demo/table/reorderColumns.html Normal file
View File

@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('表格列拖拽操作')" />
</head>
<body class="gray-bg">
<div class="container-div">
<div class="btn-group-sm" id="toolbar" role="group">
<a class="btn btn-success" onclick="orderColumns()">
<i class="fa fa-refresh"></i> 恢复顺序
</a>
</div>
<div class="row">
<div class="col-sm-12 select-table table-bordered">
<p class="select-title">按住表格列拖拽</p>
<table id="bootstrap-table"
data-reorderable-columns="true"></table>
</div>
</div>
</div>
<div th:include="include :: footer"></div>
<script th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>
<th:block th:include="include :: bootstrap-table-reorder-columns-js" />
<script th:inline="javascript">
var prefix = ctx + "demo/table";
var datas = [[${@dict.getType('sys_normal_disable')}]];
$(function() {
var options = {
url: prefix + "/list",
showSearch: false,
showRefresh: false,
showToggle: false,
showColumns: false,
columns: [{
field : 'userId',
title : '用户ID'
},
{
field : 'userCode',
title : '用户编号'
},
{
field : 'userName',
title : '用户姓名'
},
{
field : 'userPhone',
title : '用户手机'
},
{
field : 'userEmail',
title : '用户邮箱'
},
{
field : 'userBalance',
title : '用户余额'
},
{
field: 'status',
title: '用户状态',
align: 'center',
formatter: function(value, row, index) {
return $.table.selectDictLabel(datas, value);
}
}]
};
$.table.init(options);
});
function orderColumns() {
$('#bootstrap-table').bootstrapTable('orderColumns', {
userId: 0,
userCode: 1,
userName: 2,
userPhone: 3,
userEmail: 4,
userBalance: 5,
status: 6
})
}
</script>
</body>
</html>

4
ruoyi-admin/src/main/resources/templates/demo/table/reorder.html → ruoyi-admin/src/main/resources/templates/demo/table/reorderRows.html
View File

@ -1,13 +1,13 @@
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('表格拖拽操作')" />
<th:block th:include="include :: header('表格行拖拽操作')" />
</head>
<body class="gray-bg">
<div class="container-div">
<div class="row">
<div class="col-sm-12 select-table table-striped">
<p class="select-title">按住表格拖拽</p>
<p class="select-title">按住表格行拖拽</p>
<table id="bootstrap-table"
data-use-row-attr-func="true"
data-reorderable-rows="true"></table>

8
ruoyi-admin/src/main/resources/templates/include.html
View File

@ -170,12 +170,18 @@
<script th:src="@{/ajax/libs/report/sparkline/jquery.sparkline.min.js}"></script>
</div>
<!-- 表格拖拽插件 -->
<!-- 表格行拖拽插件 -->
<div th:fragment="bootstrap-table-reorder-js">
<script th:src="@{/ajax/libs/bootstrap-table/extensions/reorder/bootstrap-table-reorder.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/reorder/jquery.tablednd.js}"></script>
</div>
<!-- 表格列拖拽插件 -->
<div th:fragment="bootstrap-table-reorder-columns-js">
<script th:src="@{/ajax/libs/bootstrap-table/extensions/reorder-columns/jquery.dragtable.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/reorder-columns/bootstrap-table-reorder.js?v=20210202}"></script>
</div>
<!-- 表格列宽拖动插件 -->
<div th:fragment="bootstrap-table-resizable-js">
<script th:src="@{/ajax/libs/bootstrap-table/extensions/resizable/jquery.resizableColumns.min.js}"></script>

3
ruoyi-admin/src/main/resources/templates/index-topnav.html
View File

@ -137,7 +137,8 @@
<li><a class="menuItem" th:href="@{/demo/table/child}">表格父子视图</a></li>
<li><a class="menuItem" th:href="@{/demo/table/image}">表格图片预览</a></li>
<li><a class="menuItem" th:href="@{/demo/table/curd}">动态增删改查</a></li>
<li><a class="menuItem" th:href="@{/demo/table/reorder}">表格拖拽操作</a></li>
<li><a class="menuItem" th:href="@{/demo/table/reorderRows}">表格行拖拽操作</a></li>
<li><a class="menuItem" th:href="@{/demo/table/reorderColumns}">表格列拖拽操作</a></li>
<li><a class="menuItem" th:href="@{/demo/table/resizable}">表格列宽拖动</a></li>
<li><a class="menuItem" th:href="@{/demo/table/editable}">表格行内编辑</a></li>
<li><a class="menuItem" th:href="@{/demo/table/subdata}">主子表提交</a></li>

3
ruoyi-admin/src/main/resources/templates/index.html
View File

@ -118,7 +118,8 @@
<li><a class="menuItem" th:href="@{/demo/table/child}">表格父子视图</a></li>
<li><a class="menuItem" th:href="@{/demo/table/image}">表格图片预览</a></li>
<li><a class="menuItem" th:href="@{/demo/table/curd}">动态增删改查</a></li>
<li><a class="menuItem" th:href="@{/demo/table/reorder}">表格拖拽操作</a></li>
<li><a class="menuItem" th:href="@{/demo/table/reorderRows}">表格行拖拽操作</a></li>
<li><a class="menuItem" th:href="@{/demo/table/reorderColumns}">表格列拖拽操作</a></li>
<li><a class="menuItem" th:href="@{/demo/table/resizable}">表格列宽拖动</a></li>
<li><a class="menuItem" th:href="@{/demo/table/editable}">表格行内编辑</a></li>
<li><a class="menuItem" th:href="@{/demo/table/subdata}">主子表提交</a></li>