jquery flexgrid使用部分说明

来源:互联网 发布:网络主播唱歌是真的吗 编辑:程序博客网 时间:2024/05/22 03:30

觉得这个还挺有帮助的,记录下。

$('#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,//currentpage       //總頁數       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}       ]   });  

$('#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,//currentpage      //總頁數      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}      ]  });  

其官网首页http://www.flexigrid.info/,本文转载了http://blog.csdn.net/tongdoudpj/article/details/3260340

原创粉丝点击