<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width+initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>亿条数据之分页、勾选、下载</title>
<style type="text/css">
.hold2em{ text-indent:2em;font-weight:bold ;line-height: 2.2em; }
.only3em{ text-indent:3em;line-height: 3.1em; }
</style>
</head>
<body style="margin:0 100px 250px;">
<h1>亿条数据之分页、勾选、下载：</h1>
<h3>页面总逻辑：</h3>
<p class="hold2em">（1）配置分页参数，在当前页定义$scope.currentPage={myRequest:myRequest};然后通过属性传参<splitPage mySplitPage=currentPage></splitPage>把$scope和currentPage传给分页，在分页里的$scope.mySplitPage对象里定义属性和函数，根据对象引用原理，这些属性和函数也可以在当前页使用。在$scope.currentPage里，定义可变数据、额外数据；在$scope.mySplitPage里，不能定义但可以相应地使用可变数据、判断额外数据。</p>
<p class="hold2em">（2）处理页面跳转，页面初始化后，根据是否有参数，决定是否显示筛选框、是否根据筛选条件再次向后台发送请求。参数可能被赋值给筛选条件。</p>
<h3>一、后台提供：</h3>
<p class="hold2em">（1）当前页所要展示的数据；</p>
<p class="hold2em">（2）当前页数、页面总数、所有页数据总条数；</p>
<h3>二、静态页面：</h3>
<p class="hold2em">（1）页面有按钮，包含“单选按钮”、“当前页全选按钮”、“所有页全选按钮”；</p>
<p class="hold2em">（2）页面有分页，包含“首页”、“上一页”、“下一页”、“尾页”、“跳转”；</p>
<p class="hold2em">（3）页面有功能，包含“下载”、“删除”、“过滤”、“部署”；</p>
<h3>三、前端应实现的需求和实现思路：</h3>
<p class="hold2em">（1）初始化时，定义7个变量。“单选按钮”（实际上，这个不用定义）、“当前页全选按钮”、“所有页全选按钮”都置为false；“所有页全选等级”置0；“被选中项总数”置0；“已从服务器返回且被选中的项的ID所组成的数组”（简称：“已选ID数组”）置空；“已从服务器返回且被选中后，又没选中的项的ID所组成的数组”（简称：“没选ID数组”）置空；</p>
<p class="hold2em">（2）点击按钮。在“单选按钮”、“当前页全选按钮”、“所有页全选按钮”被点击任何一个后，记录所有被影响的数据。实现思路：</p>
<p class="only3em">A、点击“单选按钮”。如果“单选按钮”点击后的状态是选中，那么先把该项的id放到“已选ID数组”、把该项的id从“没选ID数组”中移除、把“被选中项总数”加上1、把该“单选按钮”置为true；然后判断当前页数据的id是否都在“已选ID数组”里，如果有一项不在“已选ID数组”里，那么把“当前页全选按钮”和“所有页全选按钮”都置为false；如果当前页数据的id都在“已选ID数组”里，那么把“当前页全选按钮”置为true；进而如果“被选中项总数”等于“所有页总项数”，那么把“所有页全选按钮”置为true、把“所有页全选等级”置为1，否则把“所有页全选按钮”置为false。如果“单选按钮”点击后的状态是没选中，那么先把该项的id从“已选ID数组”中删除、把该项的id放到“没选ID数组”里、把“被选中项总数”减去1，然后把该“单选按钮”、“当前页全选按钮”和“所有页全选按钮”都置为false。</p>
<p class="only3em">B、点击“当前页全选按钮”。如果“当前页全选按钮”点击后的状态是选中，那么先把当前页中没选中项的id放到“已选ID数组”里、把当前页中没选中项的id从“没选ID数组”里移除、把当前页中没选中的项的总数加到“被选中项总数”里、把“（当前页没选中的）单选按钮”置为true、把“当前页全选按钮”置为true；进而如果“被选中项总数”等于“所有页总项数”，那么把“所有页全选按钮”置为true、把“所有页全选等级”置为1，否则把“所有页全选按钮”置为false。如果“当前页全选按钮”点击后的状态是没选中，那么把当前页中选中项的id从“已选ID数组”中删出、把当前页中选中项的id放到“没选ID数组”、从“被选中项总数”里减去当前页选中项的总数、把“（当前页选中的）单选按钮”、“当前页全选按钮”、“所有页全选按钮”都置为false。</p>
<p class="only3em">C、点击“所有页全选按钮”。如果“所有页全选按钮”点击后的状态是选中，那么把当前页中没选中项的id放到“已选ID数组”里、把“没选ID数组”置空、把“被选中项总数”赋值为“所有页总项数”、把当前页中没选中的项选中、把“所有页全选等级”置为1；进而把“当前页全选按钮”和“所有页全选按钮”都置为true。如果“所有页全选按钮”点击后的状态是没选中，那么所有数据都回到初始化状态。</p>
<p class="hold2em">（3）点击分页。在“首页”、“上一页”、“下一页”、“尾页”、“跳转”任何一个被点击后，记录所有被影响的数据。实现思路：</p>
<p class="only3em">A、点击后，对当前页的页数进行重新赋值，向后台发送请求，返回数据，渲染到页面上。</p>
<p class="only3em">B、当“所有页全选等级”为0时，如果当前页某项数据的id在“已选ID数组”里已经存在，则该项显示为选中，否则显示为不选中；如果当前页所有项数据的id在“已选ID数组”里都已经存在，则“当前页全选按钮”置为true；进而如果“被选中项总数”等于“所有页总项数”，那么把“所有页全选按钮”置为true，否则置为false。当“所有页全选等级”为1时，如果当前页某项数据的id在“没选ID数组”里不存在，则该项显示为选中，否则显示为不选中；如果当前页所有项数据的id在“没选ID数组”里都不存在，则“当前页全选按钮”置为true；进而如果“被选中项总数”等于“所有页总项数”，那么把“所有页全选按钮”置为true，否则置为false。</p>
<p class="hold2em">（4）点击操作。在包含“下载”、“删除”、“过滤”、“部署”，任何一个被点击后，向后台传送数据。两种情形：</p>
<p class="only3em">A、如果“所有页全选等级”为0。点击“下载”，向后台传值包含：a、“所有页全选等级”；b、“已选ID数组”；后台把“已选ID数组”的所有数据发给前端下载。</p>
<p class="only3em">B、如果“所有页全选等级”为1。点击“下载”，向后台传值包含：a、“所有页全选等级”；b、“没选ID数组”；后台把“没选ID数组”里的数据排除，把剩下的所有数据发给前端下载。</p>
<h3>四、本页所用分页组件：</h3>
<p class="hold2em">(1)分页组件点击函数在分页组件自己的作用域里定义</p>
<p class="hold2em">(2)路由由本页先定义，后经分页组件的标签注入到分页组件的作用域里</p>
<p class="hold2em">(3)分页组件页码框个数，由本页传入的数据计算而来</p>
<h3>五、本页所需复选框服务：</h3>
<p class="hold2em">(1)包含各种初始化，比如单选状态初始化、当前页全选状态初始化、所有页全选状态初始化、被选中项数组初始化、被选中项取消选中数组初始化；</p>
<p class="hold2em">(2)包含各种点击函数，比如点击单选函数、点击当前页全选函数、点击所有页全选函数、获取所有被选中项id函数；</p>
<p> </p>
<p> </p>
<p><span style="font-weight:900;font-size: 20px">另：</span>刷新的2种情形（1）点击导航或触发其它页携带参数的链接、事件跳转至本页，本页HTML重新渲染，本页JS从头到尾执行一遍，本页所有变量都会被初始化，最后处理参数；（2）点击本页某个按钮，触发相关事件，执行相关JS，更新相关数据，不相关数据不变，HTML页面刷新；（-3-）Ajax是无需重新加载整个网页，就能更新部分网页的技术。（-4-）totalOfAllItemsOfAllPages totalOfAllPages totalOfAllItemsOfCurrentPage</p>
</body>
</html>
一、分页函数的参数和返回值
1、参数
(1)this；
(2)页码相关对象(包含每页条数、当前页数、总页数可有可无)；
(3)从其它页跳转过来时，携带的参数，赋值给过滤条件，再次向后台请求；
(4)过滤相关对象；
(5)回调函数，被封装进2(3)中的函数；
(6)后台返回数据的接收变量；
2、返回值
(1)上面的参数；
(2)勾选相关对象；
(3)分页点击函数，需要1个对象、2个回调函数，共3个参数，其函数体内调用1(5)中的函数；
(4)是否有过滤项；
(5)其它函数，比如勾选是否为空函数，过滤函数，清除过滤函数，每页展示条数改变函数，勾选函数；
二、有过滤条件、勾选、分页的页面处理逻辑
1、每次渲染，都根据ID数组，决定是否勾选；
2、向后台请求的情形包含点击过滤或点击分页或点击每页条数；
3、每次都根据过滤条件，向后台发送请求，把返回的数据赋值给分页，决定分页展示；
874
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
