flexigrid for jquery参数说明

最新推荐文章于 2014-01-20 12:59:13 发布

原创最新推荐文章于 2014-01-20 12:59:13 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #basic #autoload #query #null #delete

本文详细介绍了Flexigrid表格插件的配置选项，包括宽度、高度、分页、排序等功能设置，以及如何定义列和按钮等元素。

$('#EmployeeGrid').flexigrid({
//表格寬度(注意在IE不能使用100%之類字串)
width:$(window).width()-2,
//表格高度(注意在IE不能使用100%之類字串)
height:480,
//資料列雙色交差
striped:true,
//欄位雙色交差
novstripe:false,
//最小寬度
minwidth:400,
//最小高度
minheight:200,
//是否可調整視窗大小
resizable:true,
//遠端伺服的網址
url:'server/employee.php',
//資料送出模式
method:'POST',
//回傳的資料類型
dataType:'xml',
//連結資料失敗時的訊息
errormsg:'連線資料庫失敗',
//啟用分頁器
usepager:true,
//不重疊
nowrap:true,
//預設的頁數
page:1,//当前页，但是该参数在初始化有效，在后期需要跳页时，需通过修改 newp 这个参数
//總頁數
total:1,//totalpages
//使用分頁大小選擇器
useRp:true,
//預設的分頁大小(筆數)
rp:15,//resultsperpage
//可選用的分頁大小
rpOptions:[10,15,20,25,40],
//標題
title:false,
//分頁器的顯示資訊
pagestat:'檢視{from}到{to}，全部共有{total}筆資料',
//讀取時的訊息
procmsg:'資料讀取中，請稍後…',
//搜尋時送出附加自訂的query
query:'',
//搜尋自訂附加的欄位，請搜尋"//addsearchbutton"參考原始碼那段
qtype:'',
//空資料時的訊息
nomsg:'找不到符合絛件的資料',
//隱藏欄位數不得少於?
minColToggle:1,
//顯示或關閉隱藏欄位的開啟器
showToggleBtn:true,
//預設排序的欄位
sortname:'basic_name',
//預設排序的方式
sortorder:'asc',
//送出時隱藏
hideOnSubmit:false,
//限定單選
singleSelect:true,
//不得調整視窗寬度
nohresize:true
//自動讀取資料
autoload:true,
//區塊透明
blockOpacity:0.5,
//顯示隱藏欄位時呼叫的自訂函式
onToggleCol:false,
//改變排序方式時呼叫的自訂函式
onChangeSort:false,
//執行成功後呼叫的自訂函式
onSuccess:false,
//資料送出時呼叫的自訂函式
onSubmit:false,
//錯誤時呼叫的自訂函式
onError:false,
//當分頁大小選擇器被選擇時呼叫自訂函式
onRpChange:false,
//是否顯示右上角縮小視窗的按鈕
showTableToggleBtn:true,
//定義欄位資訊(以下為範例)
colModel:[
//第一個欄位
{display:'身份證字號',
name:'basic_unicode',
width:75,
sortable:true,
align:'center',
hide:false},
//第二個欄位
{display:'姓名',
name:'basic_unicode',
width:75,
sortable:true,
align:'center',
hide:false}
],
//自訂的參數(以下為範例)
params:[
//參數1(陣列型)
{name:'viewFields',value:['id','basic_unicode','basic_name']},
//參數2(單一型)
{name:'action',value:'view'}
/*
附註：另外以下為預設一定會送出去的物件參數，注意不要取同名
var param={
page:p.newp,
rp:p.rp,
sortname:p.sortname,
sortorder:p.sortorder,
query:p.query,
qtype:p.qtype
};
*/
],
//定義功能欄的按鈕資訊(以下為範例)
buttons:[
{name:'新增',bclass:'add',onpress:null},
{name:'刪除',bclass:'delete',onpress:null},
{separator:true}
],
//定義搜尋欄位資訊(以下為範例)
searchitems:[
{display:'身份證字號',name:'basic_unicode'},
{display:'聯絡手機',name:'contact_mobile'},
{display:'姓名',name:'basic_name',isdefault:true}
]
});