Jquery FlexGrid

Jquery FlexGrid 官方位址： http://www.flexigrid.info/

height: 200, //flexigrid插件的高度，機關為px

width: ‘auto’, //寬度值，auto表示根據每列的寬度自動計算

striped: true, //是否顯示斑紋效果，預設是奇偶互動的形式

novstripe: false,

minwidth: 30, //列的最小寬度

minheight: 80, //列的最小高度

resizable: true, //是否可伸縮

url: false, //ajax方式對應的url位址

method: ‘POST’, // 資料發送方式

dataType: ‘xml’, // 資料加載的類型

errormsg: ‘Connection Error’,//錯誤提升資訊

usepager: false, //是否分頁

nowrap: true, //是否不換行

page: 1, //預設目前頁

total: 1, //總頁面數

useRp: true, //是否可以動态設定每頁顯示的結果數

rp: 15, // 每頁預設的結果數

rpOptions: [10,15,20,25,40],//可選擇設定的每頁結果數

title: false,//是否包含标題

pagestat: ‘Displaying {from} to {to} of {total} items’,//顯示目前頁和總頁面的樣式

procmsg: ‘Processing, please wait …’,//正在處理的提示資訊

query: ”,//搜尋查詢的條件

qtype: ”,//搜尋查詢的類别

nomsg: ‘No items’,//無結果的提示資訊

minColToggle: 1, //minimum allowed column to be hidden

showToggleBtn: true, //show or hide column toggle popup

hideOnSubmit: true,//隐藏送出

autoload: true,//自動加載

blockOpacity: 0.5,//透明度設定

onToggleCol: false,//當在行之間轉換時

onChangeSort: false,//當改變排序時

onSuccess: false,//成功後執行

onSubmit: false // 調用自定義的計算函數

一個簡單的例子

Flexgrid應用

簡單例子

看了看它接收json資料。它的格式應該為：

page:"1",total:"2",rows:[{cell:["1",""]},{cell:[]}]}

是以傳回的應該是這種格式。

資料由list表提供，如下：

·ashx

string strJson = "{page:\"1\",total:\"2\",rows:[{cell:[\"1\",\"宋江\",\"天魁星\",\"黑三郎\"]},{cell:[\"2\",\"吳用\",\"天機星\",\"智多星\"]}]}";

context.Response.Write(strJson);

page：目前頁

total：頁總數

·flexgrid

引入jquery庫與flexgrid庫及相關css樣式

$("#flex1").flexigrid

({

    url: 'webdata/flex_1.ashx',

    dataType: 'json',

    colModel: [

    { display: '編号', name: 'Unid', width: 40, align: 'center' },

    { display: '姓名', name: 'CustomerName', width: 180, align: 'left' },

    { display: '稱号', name: 'Memo', width: 120, align: 'left' },

    { display: '描述', name: 'Other', width: 130, align: 'left' }

    ],

    sortname: "Unid",

    sortorder: "asc",

    usepager: true,

    striped: true,

    title: '簡單的應用',

    useRp: false,

    rp: 10,

    width: 'auto',

    height: 255

})

·頁面加一個table，起名：flex1

<table id="flex1" style="display:none"></table>

其中flexigrid的js要放在table下邊。

有點問題：

·Displaying 部分，用中文會顯示亂碼，現在沒有解決。有解決的請告知一下。

·firefox中正常，但在ie中加載有延遲且多數不能顯示。同樣，有解決的請告知一下。

部落格園大道至簡

http://www.cnblogs.com/jams742003/

轉載請注明：部落格園