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 3ca31e82..df62a22c 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
@@ -250,6 +250,15 @@ public class DemoTableController extends BaseController
return prefix + "/print";
}
+ /**
+ * 表格标题格式化
+ */
+ @GetMapping("/headerStyle")
+ public String headerStyle()
+ {
+ return prefix + "/headerStyle";
+ }
+
/**
* 表格其他操作
*/
diff --git a/ruoyi-admin/src/main/resources/static/ruoyi/js/ry-ui.js b/ruoyi-admin/src/main/resources/static/ruoyi/js/ry-ui.js
index 1debc74d..35bae11e 100644
--- a/ruoyi-admin/src/main/resources/static/ruoyi/js/ry-ui.js
+++ b/ruoyi-admin/src/main/resources/static/ruoyi/js/ry-ui.js
@@ -131,6 +131,7 @@ var table = {
queryParams: options.queryParams, // 传递参数（*）
rowStyle: options.rowStyle, // 通过自定义函数设置行样式
footerStyle: options.footerStyle, // 通过自定义函数设置页脚样式
+ headerStyle: options.headerStyle, // 通过自定义函数设置标题样式
columns: options.columns, // 显示列信息（*）
data: options.data, // 被加载的数据
responseHandler: $.table.responseHandler, // 在加载服务器发送来的数据之前处理函数
diff --git a/ruoyi-admin/src/main/resources/templates/demo/table/headerStyle.html b/ruoyi-admin/src/main/resources/templates/demo/table/headerStyle.html
new file mode 100644
index 00000000..0c862c73
--- /dev/null
+++ b/ruoyi-admin/src/main/resources/templates/demo/table/headerStyle.html
@@ -0,0 +1,91 @@
+<!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 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() {
+ var options = {
+ url: prefix + "/list",
+ showSearch: false,
+ showRefresh: false,
+ showToggle: false,
+ showColumns: false,
+ headerStyle: headerStyle,
+ columns: [{
+ checkbox: true
+ },
+ {
+ 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);
+ }
+ },
+ {
+ 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('');
+ }
+ }]
+ };
+ $.table.init(options);
+ });
+
+ function headerStyle(column) {
+ return {
+ userId: {
+ classes: 'uppercase'
+ },
+ userName: {
+ css: { background: 'yellow' }
+ },
+ userBalance: {
+ css: { color: 'red' }
+ }
+ } [column.field]
+ }
+ </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 cecd908a..b93f6376 100644
--- a/ruoyi-admin/src/main/resources/templates/index-topnav.html
+++ b/ruoyi-admin/src/main/resources/templates/index-topnav.html
@@ -129,6 +129,7 @@
<li><a class="menuItem" th:href="@{/demo/table/data}">直接加载表格数据</a></li>
<li><a class="menuItem" th:href="@{/demo/table/fixedColumns}">表格冻结列</a></li>
<li><a class="menuItem" th:href="@{/demo/table/event}">自定义触发事件</a></li>
+ <li><a class="menuItem" th:href="@{/demo/table/headerStyle}">表格标题格式化</a></li>
<li><a class="menuItem" th:href="@{/demo/table/detail}">表格细节视图</a></li>
<li><a class="menuItem" th:href="@{/demo/table/child}">表格父子视图</a></li>
<li><a class="menuItem" th:href="@{/demo/table/image}">表格图片预览</a></li>
diff --git a/ruoyi-admin/src/main/resources/templates/index.html b/ruoyi-admin/src/main/resources/templates/index.html
index a1dc1d44..95e2819f 100644
--- a/ruoyi-admin/src/main/resources/templates/index.html
+++ b/ruoyi-admin/src/main/resources/templates/index.html
@@ -110,6 +110,7 @@
<li><a class="menuItem" th:href="@{/demo/table/data}">直接加载表格数据</a></li>
<li><a class="menuItem" th:href="@{/demo/table/fixedColumns}">表格冻结列</a></li>
<li><a class="menuItem" th:href="@{/demo/table/event}">自定义触发事件</a></li>
+ <li><a class="menuItem" th:href="@{/demo/table/headerStyle}">表格标题格式化</a></li>
<li><a class="menuItem" th:href="@{/demo/table/detail}">表格细节视图</a></li>
<li><a class="menuItem" th:href="@{/demo/table/child}">表格父子视图</a></li>
<li><a class="menuItem" th:href="@{/demo/table/image}">表格图片预览</a></li>