flexigrid參數說明: height: 200, //flexigrid插件的高度，單位為px 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: '顯示記錄從{from}到{to}，總數 {total} 條', //顯示當前頁和總頁面的樣式 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, // 調用自定義的計算函數，基本沒用 //Style gridClass: "bbit-grid"//樣式 }, p); ---------------------------------------------------------------------------------------------- 2、支持ajax跨域： url中加callback=? 后台獲得callback函數的名字 返回json數據格式為:print(callbackName+"("+jsonString+")"); ---------------------------------------------------------------------------------------------- 3、Flexigrid(HUGO.CM修改版v1.1)使用說明: 1、加載flexigrid。p：選項參數集合 $(“”).flexigrid(p); 2、重新加載數據。 $(“”).flexReload(p); 3、更改flexigrid參數。P：選項參數集合 $(“”).flexOptions (p); 4、隱藏/顯示列。cid：列索引，visible：bool $(“”).flexToggleCol (cid, visible); 5、綁定數據。Data：數據源 $(“”).flexAddData (data); 6、no select plugin by me 。不知道做什么用的 $(“”).noSelect (p); 7、重新指定寬度和高度。 $(“”).flexResize(w,h); 8、翻頁。type：first、prev、next、last、input $(“”).changePage(type); ---------------------------------------------------------------------------------------------- 4、Flexigrid——colModel: 屬性名 類型 描述 display string 顯示的列名 name string 綁定的列名 sortable bool 是否可以排序 align string 對其方式 width int 列的寬度 hide bool 是否隱藏該列 pk bool 是否為主鍵標識、如果是則隱藏該列，值存入隱藏域中 process function customValue function 自定義顯示值。(如性別：數據庫為Bit類型，通過customValue方法返回“男/女”)參數：value,i ---------------------------------------------------------------------------------------------- 5、Flexigrid——事件 事件名 參數 描述 返回值 onDragCol dcoln,dcolt 拖動列后觸發 無 onToggleCol cid,visible 隱藏/顯示列后觸發 無 onChangeSort sortname,sortorder 自定義排序事件 無 onChangePage newp 自定義翻頁事件 無 onSuccess 無 數據獲取成功時觸發 無 onError XMLHttpRequest,textStatus,errorThrown 出現錯誤時觸發 無 onSubmit 無 在獲取數據前時觸發 bool onRowSelect this 行選中事件 無 ---------------------------------------------------------------------------------------------- 6、Flexigrid——buttons 屬性名 類型 描述 name string 按鈕名稱 bgclass string 樣式 onpress function 點擊觸發的方法 separator bool 分割線 ---------------------------------------------------------------------------------------------- 7、Flexigrid——searchitems 屬性名 類型 描述 display string 搜索類型下拉列表框：顯示的列名 name string 搜索類型下拉列表框：綁定的列名 isdefault bool 是否為默認搜索類型 //注：如果searchitems：true，則自動根據所有字段生成下拉列表框
以上參數說明轉自快樂家++ (Alan) ，感謝整理。
最近補了一下jquery和ajax，用到了flexigrid這款jquery插件。摸索了一下，也頭疼了一兩天。把我自己遇到的問題總結一下：
用json對象flexigrid中傳數據的時候，對應的格式：（我就是因為格式的問題糾結了好久）
//這種格式的json確認可以解析 { “page”: 1, ”total“: 239, rows:[ {“id”:”1“,”name“:”張三“}, ] } //但是按照demo構造的如下格式卻無法實現數據的綁定 { total: (no of rec), page : (page no), rows : [{cell: [ (col1 value) , (col2 value) ,.. ]，id:1 }, {cell: [ (col1 value) , (col2 value) ,.. ] }，id:2] }
這里需要提一下：在用json-lib下的net.sf.json.JSONArray實現對構造json對象時，得到的json字符創會多一個”[]“，我自己就是在這糾結了很久啊，
2013-1-15 還是太連清了，用JsonArray當然生成的是json數組 我記得還有一個類 叫做JSONObject 用相同的方法可以解析類生成對應的json字符串。
用json-lib構造flexi可以接受的json字符串代碼如下：
1.首先是FlexiObject類
import java.util.List; public class FlexiObject { private int page; /*當前頁數*/ private long total; /*總記錄條數*/ private List rows; /*記錄集合*/ public int getPage() { return page; } public void setPage(int page) { this.page =page; } public long getTotal() { return total; } public void setTotal(long total) { this.total = total; } public List getRows() { return rows; } public void setRows(List rows) { this.rows = rows; } }
2.其次是對應的構造方法，可以寫一個JsonUtil類
import net.sf.json.JSONArray; public class JsonUtil { public static String toFlexiJson(int page,int total,List rows){ FlexiObject flexiobj=new FlexiObject(); flexiobj.setPage(page); flexiobj.setRows(rows); flexiobj.setTotal(total); JSONArray jsonArray = JSONArray.fromObject(flexiobj); String jsonStr=jsonArray.toString(); jsonStr=jsonStr.substring(1,jsonStr.length()-1); return jsonStr; } }