H5W3
当前位置:H5W3 > JavaScript > 正文

【JS】所有分页数据全选

一般情况下我们的需求都是全选当前分页的所有数据,但是有时候为了用户体验,可能需要全选所有分页的数据。这个需求代码不难,主要是思路的问题。有了思路,问题就很简单了。首先肯定不能让后端返回分页的数据了,而是一次性返回所有的数据,然后我们再根据pageSize和pageIndex对数据进行截取,这样就做成了分页的效果

<div class="choose-specialities-box auto-alert-box alert-p-15">
<div class="overflow-y">
<el-checkbox v-model="checkAll" @change="handleCheckAllListSectionChange">全选</el-checkbox>
<div></div>
<el-checkbox-group v-model="checkedListSection" @change="handleSectionCheckedChange">
<el-checkbox class="el-checkbox-check" v-for="(item,index) in ListSectionData" :label="item.SectionId" :key="index">
{{item.SectionName}}
</el-checkbox>
</el-checkbox-group>
<div class="pagination-box">
<el-pagination @size-change="handleListSectionSizeChange" @current-change="handleListSectionCurrentChange" :current-page="par.pageIndex"
:page-size="par.pageSize" :page-sizes="pageArr" layout="total, sizes, prev, pager, next,jumper" :total="pageTotal">
</el-pagination>
</div>
</div>
</div>

ListSectionChange(val) {

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)
}
})

},

本文地址:H5W3 » 【JS】所有分页数据全选

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址