Home Explore Help
Sign In
githab
/
RuoYi
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

新增表格示例（虚拟滚动）

RuoYi 1 year ago
parent
f31e6bd1bb
commit
61c2e96aaa
6 changed files with 117 additions and 6 deletions
Split View Show Diff Stats
  1. 9 0
      ruoyi-admin/src/main/java/com/ruoyi/web/controller/demo/controller/DemoTableController.java
  2. 2 1
      ruoyi-admin/src/main/resources/static/ruoyi/js/ry-ui.js
  3. 98 0
      ruoyi-admin/src/main/resources/templates/demo/table/virtualScroll.html
  4. 1 0
      ruoyi-admin/src/main/resources/templates/index-topnav.html
  5. 1 0
      ruoyi-admin/src/main/resources/templates/index.html
  6. 6 5
      ruoyi-framework/src/main/java/com/ruoyi/framework/config/ShiroConfig.java

+ 9 - 0
ruoyi-admin/src/main/java/com/ruoyi/web/controller/demo/controller/DemoTableController.java
View File 

@@ -391,6 +391,15 @@ public class DemoTableController extends BaseController
 
     }

 

     /**

+     * 表格虚拟滚动

+     */

+    @GetMapping("/virtualScroll")

+    public String virtualScroll()

+    {

+        return prefix + "/virtualScroll";

+    }

+

+    /**

      * 自定义视图分页

      */

     @GetMapping("/customView")

+ 2 - 1
ruoyi-admin/src/main/resources/static/ruoyi/js/ry-ui.js
View File 

@@ -48,7 +48,7 @@ var table = {
 
                     paginationLoop: false,
 
                     pageSize: 10,
 
                     pageNumber: 1,
 
-                    pageList: [10, 25, 50],
 
+                    pageList: [10, 25, 50, 100],
 
                     toolbar: "toolbar",
 
                     loadingFontSize: 13,
 
                     striped: false,
 
@@ -103,6 +103,7 @@ var table = {
 
                     showFooter: options.showFooter,                     // 是否显示表尾
 
                     iconSize: 'outline',                                // 图标大小：undefined默认的按钮尺寸 xs超小按钮sm小按钮lg大按钮
 
                     toolbar: '#' + options.toolbar,                     // 指定工作栏
 
+                    virtualScroll: options.virtualScroll,               // 是否启动虚拟滚动（大量数据纯展示时使用)
 
                     loadingFontSize: options.loadingFontSize,           // 自定义加载文本的字体大小
 
                     sidePagination: options.sidePagination,             // server启用服务端分页client客户端分页
 
                     search: options.search,                             // 是否显示搜索框功能

+ 98 - 0
ruoyi-admin/src/main/resources/templates/demo/table/virtualScroll.html
View File 

@@ -0,0 +1,98 @@
 
+<!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="loadRows()">
 
+	            <i class="fa fa-plus"></i> 加载10000行数据
 
+	        </a>
 
+	        <a class="btn btn-info" onclick="appendRows()">
 
+	            <i class="fa fa-edit"></i> 追加10000行数据
 
+	        </a>
 
+	        &nbsp;&nbsp;<span id="total" class="badge badge-success"></span>
 
+        </div>
 
+        <div class="row">
 
+			<div class="col-sm-12 select-table table-striped">
 
+				<table id="bootstrap-table"></table>
 
+			</div>
 
+		</div>
 
+	</div>
 
+    <div th:include="include :: footer"></div>
 
+    <script>
 
+        var total = 0
 
+
 
+        $(function() {
 
+		    var options = {
 
+	    		data: getData(20),
 
+	    		height: 400,
 
+		        sidePagination: "client",
 
+		        pagination: false,
 
+		        showSearch: false,
 
+		        virtualScroll: true,
 
+                columns: [{
 
+					field : 'userId', 
+					title : '用户ID'
 
+				},
 
+				{
 
+					field : 'userCode', 
+					title : '用户编号'
 
+				},
 
+				{
 
+					field : 'userName', 
+					title : '用户姓名'
 
+				},
 
+				{
 
+					field : 'userPhone', 
+					title : '用户手机'
 
+				},
 
+				{
 
+					field : 'userEmail', 
+					title : '用户邮箱'
 
+				},
 
+				{
 
+				    field : 'userBalance',
 
+				    title : '用户余额'
 
+				}]
 
+		    };
 
+		    $.table.init(options);
 
+		});
 
+
 
+        function getData(number, isAppend) {
 
+            if (!isAppend) {
 
+                total = 0
 
+            }
 
+            var data = []
 
+            for (var i = total; i < total + number; i++) {
 
+                var randomId = 100 + ~~ (Math.random() * 100);
 
+                data.push({
 
+                    userId: i + 1,
 
+                    userCode: 2000000 + randomId,
 
+                    userName: '测试' + randomId,
 
+                    userPhone: '1588888888',
 
+                    userEmail: 'ry1@qq.com',
 
+                    userBalance: 10 + randomId,
 
+                })
 
+            }
 
+            if (isAppend) {
 
+                total += number
 
+            } else {
 
+                total = number
 
+            }
 
+            $('#total').text(total);
 
+            return data;
 
+        }
 
+
 
+        function loadRows() {
 
+            $('#bootstrap-table').bootstrapTable('load', getData(10000))
 
+        }
 
+
 
+        function appendRows() {
 
+            $('#bootstrap-table').bootstrapTable('append', getData(10000, true))
 
+        }
 
+</script>
 
+
 
+</body>
 
+</html>

+ 1 - 0
ruoyi-admin/src/main/resources/templates/index-topnav.html
View File 

@@ -147,6 +147,7 @@
 
 					<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/virtualScroll}">表格虚拟滚动</a></li>

 					<li><a class="menuItem" th:href="@{/demo/table/customView}">自定义视图分页</a></li>

 					<li><a class="menuItem" th:href="@{/demo/table/asynTree}">异步加载表格树</a></li>

 					<li><a class="menuItem" th:href="@{/demo/table/other}">表格其他操作</a></li>

+ 1 - 0
ruoyi-admin/src/main/resources/templates/index.html
View File 

@@ -127,6 +127,7 @@
 
 								<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/virtualScroll}">表格虚拟滚动</a></li>

 								<li><a class="menuItem" th:href="@{/demo/table/customView}">自定义视图分页</a></li>

 								<li><a class="menuItem" th:href="@{/demo/table/asynTree}">异步加载表格树</a></li>

 								<li><a class="menuItem" th:href="@{/demo/table/other}">表格其他操作</a></li>

+ 6 - 5
ruoyi-framework/src/main/java/com/ruoyi/framework/config/ShiroConfig.java
View File 

@@ -4,6 +4,7 @@ import java.io.ByteArrayInputStream;
 
 import java.io.IOException;

 import java.io.InputStream;

 import java.util.LinkedHashMap;

+import java.util.List;

 import java.util.Map;

 import javax.servlet.Filter;

 import org.apache.commons.io.IOUtils;

@@ -17,7 +18,6 @@ import org.apache.shiro.spring.web.ShiroFilterFactoryBean;
 
 import org.apache.shiro.web.mgt.CookieRememberMeManager;

 import org.apache.shiro.web.mgt.DefaultWebSecurityManager;

 import org.apache.shiro.web.servlet.SimpleCookie;

-import org.springframework.beans.factory.annotation.Autowired;

 import org.springframework.beans.factory.annotation.Qualifier;

 import org.springframework.beans.factory.annotation.Value;

 import org.springframework.context.annotation.Bean;

@@ -132,9 +132,6 @@ public class ShiroConfig
 
     @Value("${shiro.rememberMe.enabled: false}")

     private boolean rememberMe;

 

-    @Autowired

-    private PermitAllUrlProperties permitAllUrl;

-

     /**

      * 缓存管理器 使用Ehcache实现

      */

@@ -294,7 +291,11 @@ public class ShiroConfig
 
         filterChainDefinitionMap.put("/ruoyi/**", "anon");

         filterChainDefinitionMap.put("/captcha/captchaImage**", "anon");

         // 匿名访问不鉴权注解列表

-        permitAllUrl.getUrls().forEach(url -> filterChainDefinitionMap.put(url, "anon"));

+        List<String> permitAllUrl = SpringUtils.getBean(PermitAllUrlProperties.class).getUrls();

+        if (StringUtils.isNotEmpty(permitAllUrl))

+        {

+            permitAllUrl.forEach(url -> filterChainDefinitionMap.put(url, "anon"));

+        }

         // 退出 logout地址，shiro去清除session

         filterChainDefinitionMap.put("/logout", "logout");

         // 不需要拦截的访问