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中加載有延遲且多數不能顯示。一樣，有解決的請告知一下。

特別提醒： sortable: false 必定是false

  { display: '<input  type=\"checkbox\"  name=\"chk_ProductRole\"  onclick=\'CheckAll(this)\' />', name: 'select', width: 100, height: 80, sortable: false, align: 'center' },

相關網址 http://matychen.iteye.com/blog/611837