jQuery grid (flexigrid)

http://www.flexigrid.info/   下载flexigrid插件

http://www.iteye.com/topic/414611  实例

 

http://www.cnblogs.com/chu888chu888/archive/2009/04/19/1439078.html

 

http://codeigniter.com/forums/viewthread/75326/P440/  flexigrid 论坛

1. 获得当前页数   
2.             String pageIndex = request.getParameter("page");   
3. //          获得每页数据最大量   
4.             String pageSize = request.getParameter("rp");   
5. //          获得模糊查询文本输入框的值   
6.             String query = new String(request.getParameter("query").getBytes("ISO8859-1"),"UTF-8");   
7. //          获得模糊查询条件   
8.             String qtype = request.getParameter("qtype");  

 获取选中行的id: alert($('#flex1').flexGetSelectedRows().attr("id"));

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

下载的代码中需要添加以下js:

$.fn.flexGetSelectedRows = function()
 {
     if($(this).get(0).grid) return $('tbody tr.trSelected',$(this).get(0).grid.bDiv);
  
 };//end flexGetSelectRows  me
 
 $.fn.flexUnselectAll = function()
 {
     if($(this).get(0).grid) $('tbody tr.trSelected',$(this).get(0).grid.bDiv).removeClass("trSelected");
        
 };//end flexUnselectAll  me

 

$.fn.allSelectedRows = function(){ 
   var rows = $(this).flexGetSelectedRows();
   var ids = new Array();
   if (rows.length > 0) {           
          //Get Selected Row Ids
          rows.each(function(){
              //ids.push(parseInt($(this).attr("id").split("row").join("")));
              ids.push(parseInt($(this).attr("id")));
             // alert($(this).attr("id")+"attr");
         });
   }
   return ids;
 }; //选中的全选 me

--------------------------------------------------------------------------

 

$('#sform').submit
(
 function ()
  {
   $('#flex1').flexOptions({newp: 1}).flexReload();
   alert($('#flex1').flexGetSelectedRows().attr("id"));
   return false;
  }
);   

 

$('#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}    
    ]    
});