Pārlūkot izejas kodu

新增示例(表格列拖拽)

RuoYi 3 gadi atpakaļ
vecāks
revīzija
0a6e493f95

+ 13 - 4
ruoyi-admin/src/main/java/com/ruoyi/web/controller/demo/controller/DemoTableController.java

@@ -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";
     }
 
     /**

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 10 - 0
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/reorder-columns/bootstrap-table-reorder.js


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 21 - 0
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/reorder-columns/jquery.dragtable.js


+ 37 - 1
ruoyi-admin/src/main/resources/static/ruoyi/css/ry-ui.css

@@ -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 - 0
ruoyi-admin/src/main/resources/templates/demo/table/reorderColumns.html

@@ -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>

+ 2 - 2
ruoyi-admin/src/main/resources/templates/demo/table/reorder.html → ruoyi-admin/src/main/resources/templates/demo/table/reorderRows.html

@@ -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>

+ 7 - 1
ruoyi-admin/src/main/resources/templates/include.html

@@ -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>

+ 2 - 1
ruoyi-admin/src/main/resources/templates/index-topnav.html

@@ -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>

+ 2 - 1
ruoyi-admin/src/main/resources/templates/index.html

@@ -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>

Daži faili netika attēloti, jo izmaiņu fails ir pārāk liels