mula
/
unis_sip
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

master
RuoYi 2024-05-13 10:58:48 +08:00
parent f31e6bd1bb
commit 61c2e96aaa
6 changed files with 117 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -390,6 +390,15 @@ public class DemoTableController extends BaseController
return prefix + "/dynamicColumns"; return prefix + "/dynamicColumns";
} }
/**
* 表格虚拟滚动
*/
@GetMapping("/virtualScroll")
public String virtualScroll()
{
return prefix + "/virtualScroll";
}
/** /**
* 自定义视图分页 * 自定义视图分页
*/ */

3
ruoyi-admin/src/main/resources/static/ruoyi/js/ry-ui.js
View File

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

98
ruoyi-admin/src/main/resources/templates/demo/table/virtualScroll.html 100644
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
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/refresh}">表格自动刷新</a></li>
<li><a class="menuItem" th:href="@{/demo/table/print}">表格打印配置</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/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/customView}">自定义视图分页</a></li>
<li><a class="menuItem" th:href="@{/demo/table/asynTree}">异步加载表格树</a></li> <li><a class="menuItem" th:href="@{/demo/table/asynTree}">异步加载表格树</a></li>
<li><a class="menuItem" th:href="@{/demo/table/other}">表格其他操作</a></li> <li><a class="menuItem" th:href="@{/demo/table/other}">表格其他操作</a></li>

1
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/refresh}">表格自动刷新</a></li>
<li><a class="menuItem" th:href="@{/demo/table/print}">表格打印配置</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/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/customView}">自定义视图分页</a></li>
<li><a class="menuItem" th:href="@{/demo/table/asynTree}">异步加载表格树</a></li> <li><a class="menuItem" th:href="@{/demo/table/asynTree}">异步加载表格树</a></li>
<li><a class="menuItem" th:href="@{/demo/table/other}">表格其他操作</a></li> <li><a class="menuItem" th:href="@{/demo/table/other}">表格其他操作</a></li>

11
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.IOException;
import java.io.InputStream; import java.io.InputStream;
import java.util.LinkedHashMap; import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map; import java.util.Map;
import javax.servlet.Filter; import javax.servlet.Filter;
import org.apache.commons.io.IOUtils; 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.CookieRememberMeManager;
import org.apache.shiro.web.mgt.DefaultWebSecurityManager; import org.apache.shiro.web.mgt.DefaultWebSecurityManager;
import org.apache.shiro.web.servlet.SimpleCookie; 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.Qualifier;
import org.springframework.beans.factory.annotation.Value; import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Bean;
@ -132,9 +132,6 @@ public class ShiroConfig
@Value("${shiro.rememberMe.enabled: false}") @Value("${shiro.rememberMe.enabled: false}")
private boolean rememberMe; private boolean rememberMe;
@Autowired
private PermitAllUrlProperties permitAllUrl;
/** /**
* 缓存管理器 使用Ehcache实现 * 缓存管理器 使用Ehcache实现
*/ */
@ -294,7 +291,11 @@ public class ShiroConfig
filterChainDefinitionMap.put("/ruoyi/**", "anon"); filterChainDefinitionMap.put("/ruoyi/**", "anon");
filterChainDefinitionMap.put("/captcha/captchaImage**", "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 // 退出 logout地址，shiro去清除session
filterChainDefinitionMap.put("/logout", "logout"); filterChainDefinitionMap.put("/logout", "logout");
// 不需要拦截的访问 // 不需要拦截的访问