ExtJs分頁

 A)  ExtJs代碼如下:

  //

   var cm = new Ext.grid.ColumnModel([
    {header:'編號',dataIndex:'id'},

    {header:'名稱',dataIndex:'name'},

    {header:'描述',dataIndex:'descn'}
    ]);

 //Ext.data.Store,可以把任何數據格式轉換成表格格式,store對應兩個不分:proxy和reader.是指

 //獲取數據的方法,reader是指如何解析這堆數據。這裏我們使用了Ext.data.HttpProxy,它是用來專門

//獲取http中的數據,而Ext.data.JsonReader是用來專門解析JSON對象的。

 //在看 id name 和descn屬性和cm的值對應的。


   //totalProperty對應後臺返回的totalProperty,也就是數據的總數。root對應後臺代碼root

  //就包含返回的數據的數組。

    var store  = new Ext.data.Store({

    proxy: new Ext.data.HttpProxy({url:'user'}),

    reader:new Ext.data.JsonReader({

     totalProperty:'totalProperty',
     root:'root'
    }, [
    {name:'id'},
    {name:'name'},
    {name:'descn'}
    ])
    
    });

    //  renderTo是指渲染什麼地方 可以通過HTML中的ID值來指定。

    var grid = new Ext.grid.GridPanel({
     renderTo: 'grid',
     autoHeight: true,
     viewConfig:{forceFit:true},//自動延伸
     store:store,
     cm:cm,

   //Ext.PagingToolbar是一個分頁工具條對象。分頁屬性如下:

   //pageSize:每頁顯示幾條數據。

   //displayInfo:是否顯示數據信息。

   //displayMsg:只有當displayInfo:true時候纔有效果,用來顯示有數據提醒效果

   {0},{1},{2}會自動被替換成對應的數據。

  //emptyMsg:沒有數據時候顯示信息。

     bbar: new Ext.PagingToolbar({
         pageSize:10,
         store:store,
        displayInfo:true,
        displayMsg:'顯示第{0}條到{1}條記錄,一共{2}條',
        emptyMsg:'沒有記錄'
       })

   });

  //在Store進行加載時傳遞兩個參數告訴後臺從1條數據開始,最多讀10條數據。

   store.load({params:{start:0,limit:10}});

 B)  前臺JSP代碼如下:

   <div id="grid" style="height: 265px;"></div>


 C) 後臺代碼如下:

    String start = request.getParameter("start");
              String limit = request.getParameter("limit");
       
              int index = Integer.parseInt(start);
              int pageSize =Integer.parseInt(limit);

          //這是後臺模擬的一個JSON數據  ,我們只需要知道JSON裏除了name就是value值就OK了。

         // 開頭就是totalProperty:100,這裏表示一共有100條數據,而root對應的就是一個數組,數組裏

        .//有10個對象,我們只需弄成json格式,然後輸入到response中,ext就能取到這些數據了。

              String json ="{totalProperty:100,root:[";
              for(int i = index;i<pageSize+index;i++){
              json+="{id:"+i+",name:'name"+i+"',descn:'descn"+i+"'}";
               if(i!=pageSize+index-1){
                json+=",";
               }
              }
              
             json+=" ]}";
               PrintWriter out1 = response.getWriter();
              out1.print(json);
              System.out.println(json);
              }catch(Exception e){
              }


  實現效果如下:







發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章