Jquery FlexGrid 官方地址:http://www.flexigrid.info/css
height: 200, //flexigrid插件的高度,單位爲pxjava
width: ‘auto’, //寬度值,auto表示根據每列的寬度自動計算jquery
striped: true, //是否顯示斑紋效果,默認是奇偶交互的形式web
novstripe: false,ajax
minwidth: 30, //列的最小寬度json
minheight: 80, //列的最小高度ide
resizable: true, //是否可伸縮函數
url: false, //ajax方式對應的url地址flex
method: ‘POST’, // 數據發送方式this
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