flexigrid全選控制

2021-10-13 07:43:53 字數 2856 閱讀 4413

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 : [

return '';

}}

checkedall()函式

function checkedall(obj)else

}

checkedtr()函式

function checkedtr(obj, num)else

}

但以上只能實現單個頁面的全選或者單選,如需多個頁面同時控制,如下:

首先,引數以及陣列

var firstpage = true; // 是否是第一次載入頁面

var arraypage = new array(); // 儲存全選狀態

var arrayselect = new array(); // 儲存每條資料的選中狀態

var arraysignids = new array(); // 儲存變更記錄id

colmodel

colmodel : [

pagesize = 15;

if(data.length < 15)

return '';}},

,

onsuccess

onsuccess: function () 

if(arraypage[currentpage]) else

}

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)

});$(obj).closest("tr").removeclass("trchecked");

}else

}if(selectallflag)

arraysignids.push($(obj).val());

$(obj).closest("tr").addclass("trchecked");

}}

setpagecheckall() 函式

// 設定全選狀態為不選中

function setpagecheckall()

}firstpage = false;

}

selectrecordall(flag)

// 設定當前的選中狀態

function selectrecordall(flag) else else }}

}

FlexiGrid 使用 全選 自動繫結

1 介紹 flexigrid是乙個類似於ext gird,但基於jquery開發的grid。它具有的功能包括 可以調整列寬,合併列標題,分頁,排序,顯示 隱藏 等。flexigrid顯示的資料能夠通過ajax獲取或者從乙個普通的 轉換。2 相關引數 height 200,flexigrid外掛程式的...

FlexiGrid使用教程

一 表的結構 1 表結構 var friendlink 2.共用函式 function formatmoney value,pid 格式化貨幣用 function formatforeignkey value,pid 格式化有外來鍵關係的字段的值 function formatforeignkeyv...

flexigrid 引數說明

1flexigrid部分 2if t.grid 3return false return if already exist 45 6p extend 條到 條,共 條資料 顯示當前頁和總頁面的樣式 28procmsg 正在處理,請稍候 正在處理的提示資訊 29query 搜尋查詢的條件 30qtyp...