定义

什么是分页复选设计呢？如下图所示，这是掘金专栏的一个功能，可以选择将同类的文件批量添加到专栏里，随着下拉，会一页一页的返回。

除了这种设计，还有一种是下面有页数，根据页数跳转的设计，如：

使用

复选功能有两个，选中和取消。

这种分页复选，我见过两种设计。

第一种，也就是掘金专题上面的用法，已经选好的不会再在分页中显示出来，所以分页复选只实现了增加的功能。已经选中的有单独的列表，在这个列表中可以选中删除。

成功的将增加和删除分割开来，用户使用起来很通畅。

第二种，选中和取消功能都在分页复选中。有一种场景是用户发起申请，运营推荐一些服务，后面用户再次发起申请，运营需要根据以前推荐的内容进行增减。

坑在哪里

分页复选的坑比较隐秘，大家可以先自己思考一下哪里有问题，如果能够想到，那说明同学还是很细心、敏捷的。

之所以写这篇文章，也是因为做一个项目的时候遇到了这个坑，以前觉得自己经手过太多项目，很多坑都能避免，没想到现实还是会啪啪打脸，需要学到老活到老。

第一种设计将选中和取消分隔开，这种是没有什么坑的。而且产品还很贴心的增加了搜索功能，方便查找。

坑在第二种。

最开始我觉得挺容易的，记录已经推荐的内容，分页的时候，如果分页里有已经被推荐的，则选中状态为true，否则为false，前端根据接口返回的状态来显示选中与否。当用户提交的时候，前端将选中的内容提交，将提交的内容与原本记录的推荐内容做集合操作，找出哪些是新增的，哪些是需要删除的，哪些是不变的，然后更新这些记录。

很多同学可能觉得这个思路比较合理，可能是因为我们都静止的看问题，如果在思考这个设计的时候，能考虑到多页的情况，就能发现其中的坑了。

举个例子，假设能够推荐的内容共100个，每页10个，共10页，第一次推荐的时候推荐每页的第一个和最后一个。类似这个样子：

运营第二次推荐的时候会导致两个问题：

1. 使用困难：如果要查看以前推荐了哪些，只能看完所有页面，这是很不好的。可以通过将已经推荐的放在首部，一定程度上缓解这个问题，但运营仍然需要查看多页。
2. 产生歧义：第二次推荐的时候，运营只是想把首页的取消掉，将第一页的取消后直接提交，前端提交的内容是啥都不推荐，系统会将所有推荐内容去掉。

解决方案

解决方案我想到两种：

1. 如果推荐内容少，可以只有一页，把已经推荐的内容置顶，这种操作对运营最友好
2. 如果内容过多，只能采用多页方式，提交的时候需要传递增加了哪些、删除了哪些，这需要前端自己进行记录，服务端根据这些数据就能计算出新增哪些、删除哪些、哪些不变。
3. 这种操作会导致前端工作量增大，因为复选框可以不断做勾选、不勾选操作，再加上分页，出问题概率会比较大。
4. 即使把已推荐的置顶，这种方式仍然会产生一定歧义。举个例子，如果第一次推荐的总数量有三页，第二次推荐时，运营想全部不推荐，运营不熟悉系统，只将第一页完全去掉就提交了，运营认为自己完成了任务，但是系统还留有2页推荐，歧义发生。
5. 如果推荐的数据并不存储在自己系统中，是从其它系统通过接口分页获取的，除非接口支持，否则无法实现置顶功能，运营使用时仍然需要遍历所有页面。

总结

个人不是特别建议使用分页复选功能，真要用的话，最好将分页复选功能单一化，只有增加功能，已有的推荐有单独列表展示。

最后

大家如果喜欢我的文章，可以关注我的公众号（程序员麻辣烫）

我的个人博客为：https://shidawuhen.github.io/

往期文章回顾：

招聘

1. 字节跳动|内推大放送
2. 字节跳动|今日头条广州服务端研发工程师内推
3. 字节跳动|抖音电商急招上海前端开发工程
4. 字节跳动|抖音电商上海资深服务端开发工程师-交易
5. 字节跳动|抖音电商武汉服务端（高级）开发工程师
6. 字节跳动|飞书大客户产品经理内推咯
7. 字节跳动|抖音电商服务端技术岗位虚位以待
8. 字节跳动招聘专题

设计模式

1. Go设计模式(11)-代理模式
2. Go设计模式(10)-原型模式
3. Go设计模式(9)-建造者模式
4. Go设计模式(8)-抽象工厂
5. Go设计模式(7)-工厂模式
6. Go设计模式(6)-单例模式
7. Go设计模式(5)-类图符号表示法
8. Go设计模式(4)-代码编写优化
9. Go设计模式(4)-代码编写
10. Go设计模式(3)-设计原则
11. Go设计模式(2)-面向对象分析与设计
12. Go设计模式(1)-语法

语言

1. 一文搞懂pprof
2. Go工具之generate
3. Go单例实现方案
4. Go通道实现原理
5. Go定时器实现原理
6. Beego框架使用
7. Golang源码BUG追查
8. Gin框架简洁版
9. Gin源码剖析

架构

1. 支付接入常规问题
2. 限流实现2
3. 秒杀系统
4. 分布式系统与一致性协议
5. 微服务之服务框架和注册中心
6. 浅谈微服务
7. 限流实现1
8. CDN请求过程详解
9. 常用缓存技巧
10. 如何高效对接第三方支付
11. 算法总结

存储

1. MySQL开发规范
2. Redis实现分布式锁
3. 事务原子性、一致性、持久性的实现原理
4. InnoDB锁与事务简析

网络

1. HTTP2.0基础教程
2. HTTPS配置实战
3. HTTPS连接过程
4. TCP性能优化

工具

1. GoLand实用技巧
2. 根据mysql表自动生成go struct
3. Markdown编辑器推荐-typora

读书笔记

1. 《毛选》推荐
2. 原则
3. 资治通鉴
4. 敏捷革命
5. 如何锻炼自己的记忆力
6. 简单的逻辑学-读后感
7. 热风-读后感
8. 论语-读后感
9. 孙子兵法-读后感

思考

1. 为动员一切力量争取胜利而斗争
2. 反对自由主义
3. 实践论
4. 评价自己的标准
5. 服务端团队假期值班方案
6. 项目流程管理
7. 对项目管理的一些看法
8. 对产品经理的一些思考
9. 关于程序员职业发展的思考
10. 关于代码review的思考