1、介紹
flexigrid是乙個類似於ext gird,但基於jquery開發的grid。它具有的功能包括:可以調整列寬,合併列標題,分頁,排序,顯示/隱藏**等。flexigrid顯示的資料能夠通過ajax獲取或者從乙個普通的**轉換。
2、相關引數
height: 200, //flexigrid外掛程式的高度,單位為px3、外掛程式原始碼width: 'auto', //寬度值,auto表示根據每列的寬度自動計算,在ie6下建議設定具體值否則會有問題
striped: true, //是否顯示斑紋效果,預設是奇偶互動的形式
novstripe: false,//沒用過這個屬性
minwidth: 30, //列的最小寬度
minheight: 80, //列的最小高度
resizable: false, //resizable table是否可伸縮
url: false, //ajax url,ajax方式對應的url位址
method: 'post', // data sending method,資料傳送方式
datatype: 'json', // type of data loaded,資料載入的型別,xml,json
errormsg: '發生錯誤', //錯誤提公升資訊
usepager: false, //是否分頁
nowrap: true, //是否不換行
page: 1, //current page,預設當前頁
total: 1, //total pages,總頁面數
userp: true, //use the results per page select box,是否可以動態設定每頁顯示的結果數
rp: 25, // results per page,每頁預設的結果數
rpoptions: [10, 15, 20, 25, 40, 100], //可選擇設定的每頁結果數
title: false, //是否包含標題
pagestat: '顯示記錄從到,總數 條', //顯示當前頁和總頁面的樣式
procmsg: '正在處理資料,請稍候 ...', //正在處理的提示資訊
query: '', //搜尋查詢的條件
qtype: '', //搜尋查詢的類別
qop: "eq", //搜尋的操作符
nomsg: '沒有符合條件的記錄存在', //無結果的提示資訊
mincoltoggle: 1, //允許顯示的最小列數
showtogglebtn: true, //是否允許顯示隱藏列,該屬性有bug設定成false點選頭腳本報錯。
hideonsubmit: true, //是否在**時顯示遮蓋
showtabletogglebtn: false, //是否顯示【顯示隱藏grid】的按鈕
autoload: true, //自動載入,即第一次發起ajax請求
blockopacity: 0.5, //透明度設定
ontogglecol: false, //當在行之間轉換時,可在此方法中重寫預設實現,基本無用
onchangesort: false, //當改變排序時,可在此方法中重寫預設實現,自行實現客戶端排序
onsuccess: false, //成功後執行
onsubmit: false, // 呼叫自定義的計算函式,基本沒用
這個版本做了點小改動,增加了checkbox的支援,全選,反選輕鬆搞定。
主要增加了flexigrid.js的930-936行
1view code//add by 2if
(cm.thtype) );8}
9 }
使用方式如下:
);}}
1view code//獲取所選記錄
2function
getallchecked() )
8return
arr;
9 }
4、自動繫結列
這裡根據外掛程式繫結的資料模型,建立了實體:
1資料繫結public
class flexigridmodel2
8set 9}
1011
public
int total
12public list> rows 13}
14public
class rows15
17public t cell
18 }
1 flexigridmodelpagedata = new flexigridmodel();view code2 pagedata.total =data.total;
3 pagedata.page =page;
4 pagedata.rows = new list>();
5if (data.opnion_list != null)6
foreach (adminopnionlist item in
data.opnion_list)713
14 returnjsonmsg(pagedata);
1516
17public
void returnjsonmsg(flexigridmodeldata)18"
);22
23else
24response.write(newtonsoft.json.jsonconvert.serializeobject(data));
25response.flush();
26response.end();
27response.close();
28return
;29 }
flexigrid全選控制
flexigrid是乙個類似於ext gird,但基於jquery開發的grid。它具有的功能包括 可以調整列寬,合併列標題,分頁,排序,顯示 隱藏 等。flexigrid顯示的資料能夠通過ajax獲取或者從乙個普通的 轉換。但網上對於全選的介紹較少,下面我來分享一下。首先需要判斷頁面的當前頁碼以及...
FlexiGrid使用教程
一 表的結構 1 表結構 var friendlink 2.共用函式 function formatmoney value,pid 格式化貨幣用 function formatforeignkey value,pid 格式化有外來鍵關係的字段的值 function formatforeignkeyv...
使用jQuery外掛程式flexigrid搭建專案框架
今天來了,不能懶,該寫就寫 1.既然是要用jquery的js 那就要放入專案中 2.使用方式jsp js 3.呼叫後台 function buttons sortname id sortorder asc usepager true,userp true,checkbox true,是否要多選框 r...