首頁 探索 說明
註冊 登入
root
/
gs_bg
1
0
複刻 0
Files 問題管理 0 合併請求 0 Wiki
瀏覽代碼

新增示例（表格列拖拽）

RuoYi 4 年之前
父節點
0f17e5c433
當前提交
0a6e493f95
共有 9 個文件被更改，包括 178 次插入 和 10 次删除
分割檢視 顯示文件統計
  1. 13 4
      ruoyi-admin/src/main/java/com/ruoyi/web/controller/demo/controller/DemoTableController.java
  2. 10 0
      ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/reorder-columns/bootstrap-table-reorder.js
  3. 21 0
      ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/reorder-columns/jquery.dragtable.js
  4. 37 1
      ruoyi-admin/src/main/resources/static/ruoyi/css/ry-ui.css
  5. 84 0
      ruoyi-admin/src/main/resources/templates/demo/table/reorderColumns.html
  6. 2 2
      ruoyi-admin/src/main/resources/templates/demo/table/reorderRows.html
  7. 7 1
      ruoyi-admin/src/main/resources/templates/include.html
  8. 2 1
      ruoyi-admin/src/main/resources/templates/index-topnav.html
  9. 2 1
      ruoyi-admin/src/main/resources/templates/index.html

+ 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";

     }

 

     /**

File diff suppressed because it is too large
+ 10 - 0
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/reorder-columns/bootstrap-table-reorder.js


File diff suppressed because it is too large
+ 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>

Some files were not shown because too many files changed in this diff