一般情况下我们的需求都是全选当前分页的所有数据,但是有时候为了用户体验,可能需要全选所有分页的数据。这个需求代码不难,主要是思路的问题。有了思路,问题就很简单了。首先肯定不能让后端返回分页的数据了,而是一次性返回所有的数据,然后我们再根据pageSize和pageIndex对数据进行截取,这样就做成了分页的效果
全选
{{item.SectionName}}
:page-size="par.pageSize" :page-sizes="pageArr" layout="total, sizes, prev, pager, next,jumper" :total="pageTotal">
var _this = this;
$.request({
url: "/api/assessCheckReport/GetAssessAllSectionNoPaging",
type: "get",
isLoad: true,
data: {},
success: function (data) {
var start = (_this.par.pageIndex - 1) * _this.par.pageSize
var end = _this.par.pageIndex* _this.par.pageSize + 1
//获取当前页数据,当前分页会有选中样式
_this.ListSectionData = data.slice(start, end)
//全选反选功能
if (_this.checkedListSection.length == data.length) {
_this.checkedListSection = []
} else {
for (var i = 0; i < data.length; i++) {
_this.checkedListSection.push(data[i].SectionId)
}
}
//确定按钮保存选择,取消的话不保存
_this.checkedListSectionTemp == _this.checkedListSection
//数组去重
_this.checkedListSection = _this.newArr(_this.checkedListSection)
}
})
},