From 0ceb2bde2b00c1abf12eb0f51775c9dbafe8235d Mon Sep 17 00:00:00 2001
From: Ricky <hk_ricky@163.com>
Date: Mon, 11 Jan 2021 16:15:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=A1=A8=E6=A0=BC=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E5=88=97demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demo/controller/DemoTableController.java  |  75 +++++++++++
 .../templates/demo/table/dynamicColumns.html  | 123 ++++++++++++++++++
 .../resources/templates/index-topnav.html     |   1 +
 .../src/main/resources/templates/index.html   |   1 +
 4 files changed, 200 insertions(+)
 create mode 100644 ruoyi-admin/src/main/resources/templates/demo/table/dynamicColumns.html

diff --git a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/demo/controller/DemoTableController.java b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/demo/controller/DemoTableController.java
index 0af6a8d4..61cdcd73 100644
--- a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/demo/controller/DemoTableController.java
+++ b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/demo/controller/DemoTableController.java
@@ -13,6 +13,7 @@ import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.ResponseBody;
 import com.fasterxml.jackson.annotation.JsonFormat;
 import com.ruoyi.common.core.controller.BaseController;
+import com.ruoyi.common.core.domain.AjaxResult;
 import com.ruoyi.common.core.page.PageDomain;
 import com.ruoyi.common.core.page.TableDataInfo;
 import com.ruoyi.common.core.page.TableSupport;
@@ -60,6 +61,16 @@ public class DemoTableController extends BaseController
         users.add(new UserTableModel(26, "1000026", "测试26", "1", "15666666666", "ry@qq.com", 250.0, "1"));
     }
 
+    private final static List<UserTableColumn> columns = new ArrayList<UserTableColumn>();
+    {
+        columns.add(new UserTableColumn("用户ID", "userId"));
+        columns.add(new UserTableColumn("用户编号", "userCode"));
+        columns.add(new UserTableColumn("用户姓名", "userName"));
+        columns.add(new UserTableColumn("用户手机", "userPhone"));
+        columns.add(new UserTableColumn("用户邮箱", "userEmail"));
+        columns.add(new UserTableColumn("用户状态", "status"));
+    }
+
     /**
      * 搜索相关
      */
@@ -268,6 +279,15 @@ public class DemoTableController extends BaseController
         return prefix + "/headerStyle";
     }
 
+    /**
+     * 表格动态列
+     */
+    @GetMapping("/dynamicColumns")
+    public String dynamicColumns()
+    {
+        return prefix + "/dynamicColumns";
+    }
+
     /**
      * 表格其他操作
      */
@@ -277,6 +297,22 @@ public class DemoTableController extends BaseController
         return prefix + "/other";
     }
 
+    /**
+     * 动态获取列
+     */
+    @PostMapping("/ajaxColumns")
+    @ResponseBody
+    public AjaxResult ajaxColumns(UserTableColumn userColumn)
+    {
+        List<UserTableColumn> columnList = new ArrayList<UserTableColumn>(Arrays.asList(new UserTableColumn[columns.size()]));
+        Collections.copy(columnList, columns);
+        if (userColumn != null && "userBalance".equals(userColumn.getField()))
+        {
+            columnList.add(new UserTableColumn("用户余额", "userBalance"));
+        }
+        return AjaxResult.success(columnList);
+    }
+
     /**
      * 查询数据
      */
@@ -318,6 +354,45 @@ public class DemoTableController extends BaseController
     }
 }
 
+class UserTableColumn
+{
+    /** 表头 */
+    private String title;
+    /** 字段 */
+    private String field;
+
+    public UserTableColumn()
+    {
+
+    }
+
+    public UserTableColumn(String title, String field)
+    {
+        this.title = title;
+        this.field = field;
+    }
+
+    public String getTitle()
+    {
+        return title;
+    }
+
+    public void setTitle(String title)
+    {
+        this.title = title;
+    }
+
+    public String getField()
+    {
+        return field;
+    }
+
+    public void setField(String field)
+    {
+        this.field = field;
+    }
+}
+
 class UserTableModel
 {
     /** 用户ID */
diff --git a/ruoyi-admin/src/main/resources/templates/demo/table/dynamicColumns.html b/ruoyi-admin/src/main/resources/templates/demo/table/dynamicColumns.html
new file mode 100644
index 00000000..626a2783
--- /dev/null
+++ b/ruoyi-admin/src/main/resources/templates/demo/table/dynamicColumns.html
@@ -0,0 +1,123 @@
+<!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="row">
+			<div class="col-sm-12 search-collapse">
+				<form id="table-form">
+					<div class="select-list">
+						<ul>
+							<li>
+								要增加的列：
+								<select name="field">
+									<option value="">默认</option>
+									<option value="userBalance">用户余额</option>
+								</select>
+							</li>
+							<li>
+								<a class="btn btn-primary btn-rounded btn-sm" onclick="tableSearch()"><i class="fa fa-search"></i>&nbsp;搜索</a>
+								<a class="btn btn-warning btn-rounded btn-sm" onclick="reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
+							</li>
+						</ul>
+					</div>
+				</form>
+			</div>
+			<div class="col-sm-12 select-table table-striped">
+				<table id="bootstrap-table"></table>
+			</div>
+		</div>
+	</div>
+	<div th:include="include :: footer"></div>
+	<script th:inline="javascript">
+        var prefix = ctx + "demo/table";
+        var datas = [[${@dict.getType('sys_normal_disable')}]];
+
+        $(function() {
+        	ajaxColumns();
+        });
+        // 动态获取列
+        function ajaxColumns() {
+        	var url = prefix + "/ajaxColumns";
+        	var dataParam = $.common.formToJSON("table-form");
+            $.modal.loading("正在查询中，请稍后...");
+            $.post(url, dataParam, function(result) {
+                if (result.code == web_status.SUCCESS) {
+                	setColumns(result.data);
+                } else if (result.code == web_status.WARNING) {
+                    $.modal.alertWarning(result.msg)
+                } else {
+                    $.modal.alertError(result.msg);
+                }
+                $.modal.closeLoading();
+            });
+        }
+      	// 设置列
+        function setColumns(list) {
+        	var columns = [];
+        	list.forEach(function(item) {
+        	    if($.common.equals('status',item.field)){
+        	    	columns.push({
+        	    		field : item.field, 
+    					title : item.title,
+                        align: 'center',
+                        formatter: function(value, row, index) {
+                        	return $.table.selectDictLabel(datas, value);
+                        }
+        	    	})
+        	    } else {
+        	    	columns.push({
+        	    		field : item.field, 
+    					title : item.title
+        	    	})
+        	    }
+        	});
+        	columns.push({
+	            title: '操作',
+	            align: 'center',
+	            formatter: function(value, row, index) {
+	            	var actions = [];
+	            	actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
+                    actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
+					return actions.join('');
+	            }
+	        });
+        	if(!table.get(table.options.id)){
+        		initTable(columns);
+        	} else {
+        		refreshTable(columns);
+        	}
+        }
+      	// 刷新表格
+        function refreshTable(columns) {
+        	var options = {
+        		columns: columns
+        	};
+        	$("#" + table.options.id).bootstrapTable('refreshOptions',options);
+        }
+      	// 初始化表格
+        function initTable(columns){
+        	var options = {
+        		url: prefix + "/list",
+            	showSearch: false,
+            	showRefresh: false,
+            	showToggle: false,
+            	showColumns: false,
+            	columns: columns
+            };
+            $.table.init(options);
+        }
+      	// 搜索
+        function tableSearch(){
+        	ajaxColumns();
+        }
+      	// 重置
+		function reset(){
+			$("#table-form")[0].reset();
+			ajaxColumns();
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/ruoyi-admin/src/main/resources/templates/index-topnav.html b/ruoyi-admin/src/main/resources/templates/index-topnav.html
index 5017a1dc..eb1179e4 100644
--- a/ruoyi-admin/src/main/resources/templates/index-topnav.html
+++ b/ruoyi-admin/src/main/resources/templates/index-topnav.html
@@ -142,6 +142,7 @@
 					<li><a class="menuItem" th:href="@{/demo/table/subdata}">主子表提交</a></li>
 					<li><a class="menuItem" th:href="@{/demo/table/refresh}">表格自动刷新</a></li>
 					<li><a class="menuItem" th:href="@{/demo/table/print}">表格打印配置</a></li>
+					<li><a class="menuItem" th:href="@{/demo/table/dynamicColumns}">表格动态列</a></li>
 					<li><a class="menuItem" th:href="@{/demo/table/other}">表格其他操作</a></li>
 			      </ul>
 			    </li>
diff --git a/ruoyi-admin/src/main/resources/templates/index.html b/ruoyi-admin/src/main/resources/templates/index.html
index 4accafbe..fe089a65 100644
--- a/ruoyi-admin/src/main/resources/templates/index.html
+++ b/ruoyi-admin/src/main/resources/templates/index.html
@@ -123,6 +123,7 @@
 								<li><a class="menuItem" th:href="@{/demo/table/subdata}">主子表提交</a></li>
 								<li><a class="menuItem" th:href="@{/demo/table/refresh}">表格自动刷新</a></li>
 								<li><a class="menuItem" th:href="@{/demo/table/print}">表格打印配置</a></li>
+								<li><a class="menuItem" th:href="@{/demo/table/dynamicColumns}">表格动态列</a></li>
 								<li><a class="menuItem" th:href="@{/demo/table/other}">表格其他操作</a></li>
 							</ul>
                         </li>