• MyBatis Plus实现动态字段排序

    利用周末时间，对自己的项目进行了升级，原来使用的是tkmybatis，改为mybatis-plus。但是返回数据的格式变了，导致前端的客户端排序失效了，于是决定在服务端实现排序。

     

    目录

    前端代码

    role_list.html

    role_list.js

    后端代码

    controller层

    service层

    mapper层

    RoleAccount.java

    RoleAccountPager.java

    Pager.java

    Sorter.java

    easyui的数据表格datagrid支持多字段排序，可以控制是否通过服务器排序，核心代码如下。

    前端代码

    role_list.html

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>角色列表title>
    6. 		<link rel="stylesheet" href="/css/themes/icon.css"/>
    7. 		<link rel="stylesheet" href="/css/themes/default/easyui.css" />
    8. 	head>
    9. 	
    10. 	<body>       
    11.         <table id="role_list">table>
    12.  
    13. 		<script src="/js/public/public.js">script>
    14. 		<script src="/js/public/jquery.min.js">script>
    15. 		<script src="/js/public/jquery.easyui.min.js">script>
    16. 		<script src="/js/public/easyui-lang-zh_CN.js">script>
    17. 		<script src="/js/role_account/role_list.js">script>
    18. 	body>
    19. html>

     

    role_list.js

    在需要开启排序功能的字段后面添加sortable:true的选项

    1. let pageList = [10, 20, 50, 100];
    2.  
    3. $(document).ready(function() {
    4.     // 角色数据表格
    5. 	$("#role_list").datagrid({
    6. 		url: '/role_account/selectByPage',
    7. 		striped: true,
    8. 		multiSort: true,
    9. 		fitColumns: true,
    10. 		remoteSort: true,
    11. 		singleSelect: true,
    12. 		height: table_height,
    13. 		pagination: true,
    14. 		pageList: pageList,
    15. 		pageSize: pageList[0],
    16. 		loadFilter: function(result){
    17. 			if (result.code === 200){
    18. 				return result.data;
    19. 			} else {
    20. 				return null;
    21. 			}
    22. 		},
    23. 		toolbar: [{
    24. 			iconCls: 'icon-add',
    25. 			text: '添加',
    26. 			handler: function() {
    27. 				handleAdd();
    28. 			}
    29. 		}, '-', {
    30. 			iconCls: 'icon-edit',
    31. 			text: '修改',
    32. 			handler: function() {
    33. 				handleUpdate();
    34. 			}
    35. 		}, '-', {
    36. 			iconCls: 'icon-set',
    37. 			text: '加点',
    38. 			handler: function() {
    39. 				handleJiadian();
    40. 			}
    41. 		}, '-', {
    42. 			iconCls: 'icon-shield',
    43. 			text: '属性',
    44. 			handler: function() {
    45. 				handleAttribute();
    46. 			}
    47. 		}, '-', {
    48. 			iconCls: 'icon-search',
    49. 			text: '查看',
    50. 			handler: function() {
    51. 				handleView();
    52. 			}
    53. 		}, '-', {
    54. 			iconCls: 'icon-tip',
    55. 			text: '关于',
    56. 			handler: function() {
    57. 				handleTip();
    58. 			}
    59. 		}],
    60. 		columns: [[
    61. 			{field: 'id', title: '角色ID', align: "center", sortable: true, width:100},
    62. 			{field: 'name', title: '角色名', align: "center", width: 120},
    63. 			{field: 'modelingId', title: '角色造型', align: "center", width: 80
    64. 				, formatter: function(value, rowData, rowIndex) {
    65. 					get("/role_modeling/selectById", {
    66. 						id: value
    67. 					}, function(result) {
    68. 						$("#modeling_" + rowIndex).attr("src", result.image)
    69. 							.attr("title", result.name);
    70. 					}, error);
    71. 					
    72. 					return "";
    73. 				}
    74. 			},
    75. 			{field: 'grade', title: '等级', align: "center", sortable: true, width: 80
    76. 				, formatter: function(value) {
    77. 					let group; // 组别
    78. 					
    79. 					if(value >= 0 && value <= 69) { // [0, 69]精锐组
    80. 						group = "精锐组";
    81. 					} else if(value >= 70 && value <= 89) { // [70, 89]勇武组
    82. 						group = "勇武组";
    83. 					} else if(value >= 90) { // [90, 115]神威组
    84. 						group = "神威组";
    85. 					} else { // [-∞, 0) ∪ (115, +∞)
    86. 						group = "等级不合法";
    87. 					}
    88. 					
    89. 					return "" + value+ "级";
    90. 				}
    91. 			},
    92. 			{field: 'score', title: '人物评分', align: "center", sortable: true, width: 80},
    93. 			{field: 'schoolId', title: '门派', align: "center", width: 80
    94. 				, formatter: function(value, rowData, rowIndex) {
    95. 					get("/school/selectById", {
    96. 						id: value
    97. 					}, function(result) {
    98. 						$("#school_" + rowIndex).attr("src", result.image)
    99. 							.attr("title", result.name).width(size);
    100. 					}, error);
    101. 					
    102. 					return "";
    103. 				}
    104. 			},
    105. 			{field: 'jinbi', title: '金币', align: "center", sortable: true, width: 80},
    106. 			{field: 'accountId', title: '账号', align: "center", width: 200
    107. 				, formatter: function(value, rowData, rowIndex) {
    108. 					get("/account/selectAccountById", {
    109. 						id: value
    110. 					}, function(response) {
    111. 						$("#account_" + rowIndex).html(response.data);
    112. 					}, error);
    113. 					
    114. 					return "
      "      ;
    115. 				}
    116. 			},
    117. 			{field: "lastUpdateTime", title: "最后一次修改时间", align: "center", sortable: true, width: 125},
    118. 			{field: 'right', title: '操作', align: "center"
    119. 				, formatter: function(value, rowData, rowIndex) {
    120. 					return '
    121. 						+ 'onclick="handleDelete(' + rowData.id + ')">'
    122. 						+ '';
    123. 				}
    124. 			}
    125. 		]]
    126. 	});
    127.  
    128. });

    表格的multiSort选项设置为true表示允许多字段排序，remoteSort表示是否从服务器排序，设置为true，我们接下来在后台接口处理字段排序。

    后端代码

    controller层

    RoleAccountController.java

    1. @RestController
    2. @RequestMapping(path = "/role_account", produces="application/json; charset=utf-8")
    3. public class RoleAccountController {
    4.     private final IRoleAccountService service;
    5.  
    6. 	@Autowired
    7. 	public RoleAccountController(IRoleAccountService service) {
    8. 		this.service = service;
    9. 	}
    10.     
    11.     @ApiOperation("分页查询角色列表")
    12. 	@RequestMapping(value = "/selectByPage", method = RequestMethod.POST)
    13. 	public JsonResult> selectByPage(RoleAccountPager pager) {
    14. 		Page page = service.selectByPage(pager);
    15.  
    16. 		return JsonResult.restPage(page);
    17. 	}
    18.  
    19. }

    service层

    RoleAccountServiceImpl.java

    1. @Service
    2. public class RoleAccountServiceImpl implements RoleAccountService {
    3.     @Override
    4. 	public Page selectByPage(RoleAccountPager pager) {
    5. 		Page page = new Page<>(pager.getPage(), pager.getRows());
    6. 		QueryWrapper wrapper = new QueryWrapper<>();
    7.  
    8. 		wrapper.eq(
    9. 				!StringUtils.isEmpty(pager.getId()),
    10. 				"id", pager.getId());
    11. 		wrapper.like(
    12. 				!StringUtils.isEmpty(pager.getName()),
    13. 				"name", pager.getName()
    14. 		);
    15. 		wrapper.eq(
    16. 				pager.getSchoolId() != null,
    17. 				"school_id", pager.getSchoolId()
    18. 		);
    19. 		wrapper.eq(
    20. 				pager.getModelingId() != null,
    21. 				"modeling_id", pager.getModelingId()
    22. 		);
    23. 		wrapper.eq(
    24. 				!StringUtils.isEmpty(pager.getAccountId()),
    25. 				"account_id", pager.getAccountId()
    26. 		);
    27.  
    28. 		// 得到order by语句
    29. 		String statement = Pager.getOrderByStatement(pager);
    30. 		wrapper.last(statement);
    31.  
    32. 		return mapper.selectPage(page, wrapper);
    33. 	}
    34.  
    35. }

    mapper层

    RoleAccountMapper.java

    @Repository
public interface RoleAccountMapper extends BaseMapper {
        
}

    RoleAccount.java

    1. @Data
    2. public class RoleAccount {
    3. 	@TableId("id")
    4. 	private String id;
    5.  
    6. 	/**
    7. 	 * 角色名
    8. 	 */
    9. 	private String name;
    10.  
    11. 	/**
    12. 	 * 等级
    13. 	 */
    14. 	private Integer grade;
    15.  
    16. 	/**
    17. 	 * 人物评分
    18. 	 */
    19. 	private Integer score;
    20.  
    21. 	/**
    22. 	 * 金币
    23. 	 */
    24. 	private Integer jinbi;
    25.  
    26. 	/**
    27. 	 * 账号id
    28. 	 */
    29. 	private String accountId;
    30.  
    31. 	/**
    32. 	 * 门派id
    33. 	 */
    34. 	private Integer schoolId;
    35.  
    36. 	/**
    37. 	 * 服务器id
    38. 	 */
    39. 	private Integer serverId;
    40.  
    41. 	/**
    42. 	 * 角色造型id
    43. 	 */
    44. 	private Integer modelingId;
    45.  
    46. 	/**
    47. 	 * 账号创建时间
    48. 	 */
    49. 	@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    50. 	@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
    51. 	private LocalDateTime birthday;
    52.  
    53. 	/**
    54. 	 * 最后一次修改时间
    55. 	 */
    56. 	@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
    57. 	private LocalDateTime lastUpdateTime;
    58. }

     

    RoleAccountPager.java

    接收前端传递的查询参数

    1. @Data
    2. @EqualsAndHashCode(callSuper = true)
    3. public class RoleAccountPager extends Pager {
    4. 	/**
    5. 	 * 角色id
    6. 	 */
    7. 	private String id;
    8.  
    9. 	/**
    10. 	 * 角色名
    11. 	 */
    12. 	private String name;
    13.  
    14. 	/**
    15. 	 * 等级
    16. 	 */
    17. 	private Integer grade;
    18.  
    19. 	/**
    20. 	 * 账号id
    21. 	 */
    22. 	private String accountId;
    23.  
    24. 	/**
    25. 	 * 门派id
    26. 	 */
    27. 	private Integer schoolId;
    28.  
    29. 	/**
    30. 	 * 角色造型id
    31. 	 */
    32. 	private Integer modelingId;
    33. }

     

    Pager.java

    1. /**
    2.  * 基础分页对象，包含页数和每页的记录数
    3.  */
    4. @Data
    5. @EqualsAndHashCode(callSuper = true)
    6. public class Pager extends Sorter {
    7.     /**
    8.      * 页数
    9.      */
    10.     private Integer page = 1;
    11.  
    12.     /**
    13.      * 每页记录数
    14.      */
    15.     private Integer rows = 10;
    16. }

     

    Sorter.java

    以上是easyui官网的相关截图，当多字段排序时，传递给后台的参数中通过逗号拼接。

    【例如】：通过评分score升序和等级grade降序排序时，后台接收到的参数为：

    {

            "sort": "score,grade"

            "order": "asc,desc"

    }

     

    于是基于此规则，在Sorter.java中提供一个处理排序字段的方法

    1. /**
    2.  * 基础排序对象，包含排序字段和排序方式
    3.  */
    4. @Data
    5. public class Sorter {
    6.     /**
    7.      * 排序字段
    8.      */
    9.     private String sort;
    10.  
    11.     /**
    12.      * 排序方式：asc/desc
    13.      */
    14.     private String order;
    15.  
    16.     /**
    17.      * 根据查询条件拼接得到order by语句
    18.      * @param sorter 分页查询条件
    19.      * @return String
    20.      */
    21.     public static String getStatement(Sorter sorter) {
    22.         String sort;
    23.         String[] sortArray = {};
    24.         String[] orderArray = {};
    25.         String order = sorter.getOrder();
    26.         String sortColumn = sorter.getSort();
    27.         StringBuilder statement = new StringBuilder();
    28.  
    29.         // 多字段排序
    30.         if (StringUtils.isNotEmpty(sortColumn)) {
    31.             // 驼峰命名转为下划线
    32.             sort = StringUtils.toLowerCase(sortColumn);
    33.  
    34.             if (sort.contains(",")) {
    35.                 sortArray = sort.split(",");
    36.             }
    37.         } else {
    38.             return "";
    39.         }
    40.         if (StringUtils.isNotEmpty(order)) {
    41.             if (order.contains(",")) {
    42.                 orderArray = order.split(",");
    43.             }
    44.         } else {
    45.             return "";
    46.         }
    47.  
    48.         if (sortArray.length > 0 && orderArray.length > 0) {
    49.             int length = sortArray.length;
    50.  
    51.             for (int i = 0; i < length; i++) {
    52.                 statement.append(sortArray[i]);
    53.                 statement.append(" ");
    54.                 statement.append(orderArray[i]);
    55.  
    56.                 if (i < length - 1 ) {
    57.                     statement.append(", ");
    58.                 }
    59.             }
    60.         } else {
    61.             // " #{sort} #{order}“
    62.             statement.append(sort);
    63.             statement.append(" ");
    64.             statement.append(order);
    65.         }
    66.  
    67.         return statement.toString();
    68.     }
    69.  
    70.     /**
    71.      * 根据查询条件拼接得到order by语句
    72.      * @param sorter 分页查询条件
    73.      * @return String
    74.      */
    75.     public static String getOrderByStatement(Sorter sorter) {
    76.         String statement = getStatement(sorter);
    77.  
    78.         if (StringUtils.isNotEmpty(statement)) {
    79.             return " order by " + statement;
    80.         } else {
    81.             return statement;
    82.         }
    83.     }
    84.  
    85. }

    因为排序的字段名是驼峰命名，需要转为小写字母+下划线命名，转换的方法抽象到了StringUtils工具类中，代码如下。

    1. public class StringUtils {
    2.  
    3.     /**
    4.      * 功能：驼峰命名转下划线命名
    5.      * 小写和大写紧挨一起的地方,加上分隔符,然后全部转小写
    6.      * @param str 待转换的字符串
    7.      * @return String
    8.      */
    9.     public static String toLowerCase(String str) {
    10.         str = str.replaceAll("([a-z])([A-Z])", "$1_$2");
    11.  
    12.         return str.toLowerCase();
    13.     }
    14.  
    15. }

     

    通过继承关系，我们控制器接口的参数类型继承自Pager即自动获得分页和排序功能，只需要在构造条件查询器QueryWrapper时增加以下两行代码即可在后端开启多字段排序功能：

    1. String statement = Pager.getOrderByStatement(pager);
    2.  
    3. wrapper.last(statement);

    好了，文章就分享到这里了，看完不要忘了点赞+收藏哦~

  • 相关阅读:
    Spring--IOC&&基于XML管理bean
    jdk11新特性——JShell交互性工具
    多边形内部水平方向近似最大矩形python实现
    代码随想录补打卡 121买卖股票的最佳时机 122 买卖股票的最佳时机 二123买卖股票的最佳时机 三
    CORS跨域资源共享+CORS的一系列响应头
    微服务项目：尚融宝（50）（核心业务流程：标的管理（2））
    9-2-Dataset创建-import调用
    【图像笔记】深度图像和深度相机
    “软件定义汽车”下的软件虚拟化技术
    基于JAVA高校学生资助管理信息系统计算机毕业设计源码+数据库+lw文档+系统+部署
  • 原文地址：https://blog.csdn.net/heyl163_/article/details/127608627