flexigrid全选控制
冯泓
Flexigrid介绍
Flexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。但网上对于全选的介绍较少，下面我来分享一下。
获取后端传来的页码
首先需要判断页面的当前页码以及总页码，其实前端与后端都可以获取到，但由于网上没有多少这方面的介绍，因此没有找到对应映射，这里我只是使用了session传参，希望有大神可以在这方面指点下我。
首先是从flexigrid.js中获取后端数据传入session
var currentPage = data.resultData.currentPage;
var totalPage = data.resultData.totalPage;
sessionStorage.setItem('currentPage',currentPage);
sessionStorage.setItem('totalPage',totalPage);
前端页面获取session的数据
currentPage = sessionStorage.getItem("currentPage");
totalPage = sessionStorage.getItem("totalPage");
全选显示
colModel
colModel : [
{display:'<input id="checkedAll" class="checkedAll" type="checkbox" onclick="checkedAll(this)" /> 全选', name:"signRecordId", width :"6%", align:"center" }
return '<input type="checkbox" onclick="checkedTr(this)" class="checkRecord" style="margin: 10px;" value="' + tdtxt +'"/>';
}
}
checkedAll()函数
function checkedAll(obj){
$(".checkedRecord").prop("checked",false);
$(".checkedRecord").closest("tr").removeClass("trChecked");
$(".checkedRecord").addClass("checkRecord").removeClass("checkedRecord");
$(obj).closest("div").removeClass("divChecked");
$(obj).prop("checked",false);
}else{
$(".checkRecord").prop("checked",true);
$(".checkRecord").closest("tr").addClass("trChecked");
$(".checkRecord").addClass("checkedRecord").removeClass("checkRecord");
$(obj).closest("div").addClass("divChecked");
$(obj).prop("checked",true);
}
}
checkedTr()函数
function checkedTr(obj, num){
if($(obj).closest("tr").hasClass("trChecked")){
$(obj).closest("tr").removeClass("trChecked");
}else{
$(obj).closest("tr").addClass("trChecked");
}
}
但以上只能实现单个页面的全选或者单选，如需多个页面同时控制，如下：
多个页面的全选控制
首先，参数以及数组
var firstPage = true; // 是否是第一次加载页面
var arrayPage = new Array(); // 存储全选状态
var arraySelect = new Array(); // 存储每条数据的选中状态
var arraySignIds = new Array(); // 存储变更记录id
colModel
colModel : [
{display:'<input id="checkedAll" class="checkedAll" type="checkbox" onclick="checkedAll(this)" /> 全选', name:"signRecordId", width :"6%", align:"center",
cellrenderer:function(tdtxt,row,data){
var rowNum = 15;
if(row.num%15 > 0) {
rowNum = row.num%15;
}
pageSize = 15;
if(data.length < 15) {
pageSize = data.length;
arraySelect[currentPage].length = pageSize;
}
return '<input type="checkbox" id="select_' + row.num + '" onclick="checkedTr(this,\''+rowNum+'\')" class="checkRecord checkRecord_' + row.num + '" style="margin: 10px;" value="' + tdtxt +'"/>';
}
},
{display : '序号', name : 'num', width : "5%", align: 'center'},
onSuccess
onSuccess: function () {
currentPage = sessionStorage.getItem("currentPage");
totalPage = sessionStorage.getItem("totalPage");
if(firstPage) {
setPageCheckAll();
}
if(arrayPage[currentPage]) {
selectRecordAll(true);
} else {
selectRecordAll(false);
}
}
checkedAll()函数
function checkedAll(obj){
var currentNum = (currentPage-1)*15;
if($(obj).closest("div").hasClass("divChecked")){
arrayPage[currentPage] = false;
for(var j=1; j<=pageSize; j++) {
arraySelect[currentPage][j] = false;
console.log($(".checkRecord_"+(currentNum+j)).val());
var currentRecordId = $(".checkRecord_"+(currentNum+j)).val();
arraySignIds.forEach((item, i) => {
if (item == currentRecordId) {
arraySignIds.splice(i, 1); // 从下标 i 开始, 删除 1 个元素
}
});
}
$(".checkedRecord").prop("checked",false);
$(".checkedRecord").closest("tr").removeClass("trChecked");
$(".checkedRecord").addClass("checkRecord").removeClass("checkedRecord");
$(obj).closest("div").removeClass("divChecked");
$(obj).prop("checked",false);
}else{
arrayPage[currentPage] = true;
for(var i=1; i<=pageSize; i++) {
arraySelect[currentPage][i] = true;
arraySignIds.push($("#select_"+(currentNum+i)).val())
}
$(".checkRecord").prop("checked",true);
$(".checkRecord").closest("tr").addClass("trChecked");
$(".checkRecord").addClass("checkedRecord").removeClass("checkRecord");
$(obj).closest("div").addClass("divChecked");
$(obj).prop("checked",true);
}
}
checkedTr()函数
function checkedTr(obj, num){
if($(obj).closest("tr").hasClass("trChecked")){
arraySelect[currentPage][num] = false;
arrayPage[currentPage] = false;
$(".checkedAll").prop("checked",false);
$(".checkedAll").closest("div").removeClass("divChecked");
arraySignIds.forEach((item, i) => {
if (item == $(obj).val()) {
arraySignIds.splice(i, 1); // 从下标 i 开始, 删除 1 个元素
}
});
$(obj).closest("tr").removeClass("trChecked");
}else{
arraySelect[currentPage][num] = true;
var selectAllFlag = true;
for(var i=1; i<=15; i++) {
if(!arraySelect[currentPage][i]){
selectAllFlag = false;
}
}
if(selectAllFlag) {
arrayPage[currentPage] = true;
$(".checkedAll").prop("checked",true);
$(".checkedAll").closest("div").addClass("divChecked");
}
arraySignIds.push($(obj).val());
$(obj).closest("tr").addClass("trChecked");
}
}
setPageCheckAll() 函数
// 设置全选状态为不选中
function setPageCheckAll() {
for(var i=1; i<=totalPage; i++) {
arrayPage[i] = false;
arraySelect[i] = new Array();
for(var j=1; j<=pageSize; j++) {
arraySelect[i][j] = false;
}
}
firstPage = false;
}
selectRecordAll(flag)
// 设置当前的选中状态
function selectRecordAll(flag) {
if(flag) {
$(".checkedAll").prop("checked",true);
$(".checkedAll").closest("div").addClass("divChecked");
$(".checkRecord").prop("checked",true);
$(".checkRecord").closest("tr").addClass("trChecked");
$(".checkRecord").addClass("checkedRecord").removeClass("checkRecord");
} else {
$(".checkedAll").prop("checked",false);
$(".checkedAll").closest("div").removeClass("divChecked");
for(var i=1; i<=15; i++) {
var currentNum = (currentPage-1)*15 + i;
if(arraySelect[currentPage][i]){
$(".checkRecord_"+currentNum).prop("checked",true);
$(".checkRecord_"+currentNum).closest("tr").addClass("trChecked");
$(".checkRecord_"+currentNum).addClass("checkedRecord").removeClass("checkRecord");
} else {
$(".checkRecord_"+currentNum).prop("checked",false);
$(".checkRecord_"+currentNum).closest("tr").removeClass("trChecked");
$(".checkRecord_"+currentNum).addClass("checkRecord").removeClass("checkedRecord");
}
}
}
}
类似资料：