Extjs4 grid数据显示和分页

 

前台extjs的js代码：

Ext.onReady(function () {

    Ext.create('Ext.container.Viewport', {

        layout: 'border',

        width:500,

        items: [

           

         {

            region: 'center',

            

            xtype: 'tabpanel', 

            items: [

            

            Qgrid

            ]

        

        }]

    });

 

   

});

 

   var pageSize = 4;//每页多少数据

 

   var gridstore = Ext.create('Ext.data.Store', {

   storeId:'QsimpsonsStore',

       pageSize: pageSize,//分页。。。

       fields: [

            { name: 'ID', type: 'int' },

            { name: 'NAME', type: 'string' },

            { name: 'IDENT', type: 'string' },

            { name: 'qualify', type: 'bool' },

            { name: 'exam_date', type: 'string' },

            { name: 'nowtime', type: 'string' }

            

           ],//定义字段

 

        proxy:{  

                type: 'ajax',  

                url:'studentgridAction.action', //请求的数据的url  -------下面有后台代码

                 reader:{  

                          type:'json',  

                          root:'students', //对应action中需要被现实的字段  

                          totalProperty: 'total'  //数据总数

                         }  

               },

        sorters:[{property:"ID",direction:"ASC"}],//按qq倒序

        autoLoad:{params:{start:0,limit:pageSize}}//自动加载，每次加载一页

  

   })

   

   //------------------

   function renderSex(value, cellmeta, record, rowIndex, columnIndex, store)//value当前单元格的值，record是这行的所有数据，store表格里所有的数据

   {

        if(value==false)

        {

            return "<span style='color:red;font-weight:bold;'>无</span>";

        }   

        else

        {

            //return record.get('qualify');

            return "<span style='color:green;font-weight:bold;'>有</span>";

        }         

   }

   

 

  //----------------

var Qgrid=Ext.create("Ext.grid.Panel",{

       title:'学生列表',

       frame: true,

       rowLines: false,

       columns: [//配置表格列

    //序号

   Ext.create("Ext.grid.RowNumberer",{

   width: 40,

   text:'序号'

   

   }),

   {header: "学生账号", width: 200, dataIndex: 'ID', sortable: false},//renderer:renderSex可自定义显示

                {header: "学生姓名", width: 200, dataIndex: 'NAME', sortable: false},

                /*{header: "考试资格", width: 200, dataIndex: 'qualify', xtype: 'booleancolumn', sortable: false,

                trueText: "<span style='color:green;font-weight:bold;'>有</span>",  

                    falseText: "<span style='color:red;font-weight:bold;'>无</span>" //一样效果

                }*/

                {header: "考试资格", width: 200, dataIndex: 'qualify', sortable: false,renderer:renderSex}//渲染函数

            ],

 

store:gridstore,//指定grid的数据源

//多选框

 

selType:'checkboxmodel',

multiSelect:true,

//分页控件

             dockedItems: [

                {

                    xtype: 'pagingtoolbar',

                    pageSize : pageSize,//分页....

                    store:gridstore, 

                    dock: 'bottom', //分页 位置

                    emptyMsg: '没有数据',

                    displayInfo: true,

                    displayMsg: '当前显示{0}-{1}条记录 / 共{2}条记录 ',

                    beforePageText: '第',

                    afterPageText: '页/共{0}页'

                }],

   tbar:[

     

'-','-',{

   icon: 'images/add.png',

   text:"添加资格",

   type:"submit",

   handler:function(buttonObj){

 

   var grid1=buttonObj.ownerCt.ownerCt;

   var data=grid1.getSelectionModel().getSelection();

   if(data.length==0){

   Ext.example.msg('<font color="#ff9900">警告</font>',"请先选择学生！");

   }

   else{

   //得到ID的数据

   var st=grid1.getStore();

   var ids=[];

   var name=[];

   var exam_data=[];

   var nowtime=[];

   var k=1;

   Ext.Array.each(data,function(record){

   if(k==1)

   {

   exam_data.push(record.get('exam_date'));

   nowtime.push(record.get('nowtime'));

   }

   k++;

   });

   if(exam_data>nowtime)

   {

   Ext.Array.each(data,function(record){

   if(record.get('qualify')==true)

   {

   //Ext.example.msg('<font color="#0000ff">温馨提示</font>',""+record.get('NAME')+"重新被授予资格");

       name.push(record.get('NAME'));

   }

   else

   {

           ids.push(record.get('ID'));

   }

   });

   /*if(name.length>0)

   {

   Ext.MessageBox.alert("提示框","<br>"+name+"<br><br>已经具有考试资格,无需再授予资格<br>"); 

   

   }*/

   

   if(ids.length>0)

   {

   Ext.Ajax.request({

   

   url:'qualificationMan.action',

   params:{ids:ids.join(",")},//传值到后台,单传2个值到后台时以,分开

   method:'POST',

   timeout:2000,

   success:function(response,opts){

   

   Ext.example.msg('<font color="#0000ff">温馨提示</font>','资格授予成功！');

   Qgrid.store.reload();//重新加载数据

   }

   })

   }

   }

   else

   {

   Ext.example.msg('<font color="#ff9900">警告</font>','考试已经开始或已经结束,不能再授权!');

   }

   

   

   }

       }

},'-','-',

{

   icon: 'images/delete.png',

   text:"取消资格",

   type:"submit",

   handler:function(buttonObj){

 

   var grid1=buttonObj.ownerCt.ownerCt;

   var data=grid1.getSelectionModel().getSelection();

   if(data.length==0){

   Ext.example.msg('<font color="#ff9900">警告</font>','请先选择学生！');

   }

   else

   {

   //得到ID的数据

   var st=grid1.getStore();

   var ids=[];

   var name=[];

   var exam_data=[];

   var nowtime=[];

   var k=1;

   Ext.Array.each(data,function(record){

   if(k==1)

   {

   exam_data.push(record.get('exam_date'));

   nowtime.push(record.get('nowtime'));

   }

   k++;

   });

   if(exam_data>nowtime)

   {

   Ext.Array.each(data,function(record){

       

if(record.get('qualify')==false)

{

name.push(record.get('NAME'));

}

else

{

   ids.push(record.get('ID'));

}

 

});

/*if(name.length>0)

{

  Ext.MessageBox.alert("提示框","<br>"+name+"<br><br>不具有考试资格,无需取消资格<br>"); 

 

}*/

 

if(ids.length>0)

{

Ext.Ajax.request({

 

url:'Cancelqualification.action',

params:{ids:ids.join(",")},//传值到后台,单传2个值到后台时以,分开

method:'POST',

timeout:2000,

success:function(response,opts){

 

Ext.example.msg('<font color="#0000ff">温馨提示</font>','资格取消成功！');

Qgrid.store.reload();//重新加载数据

}

})

}

   }

   else

   {

   Ext.example.msg('<font color="#ff9900">警告</font>','考试已经开始或已经结束,不能取消授权!');

   }

   

   

   }

       }

}

  

]

 

});

 

structs.xml

 

  <action name = "studentgridAction"  class ="teacher_qualification.Action" method="getstudent">

         <result name="students" type="json"></result>

         </action>

 

后台java代码实现函数：

       public List<Model>students;//和 grid的store的root:'students',对应

 

        public Integer total;//分页。。。数据总数

 

public Integer start;//分页。。。每页开始数据

 

public Integer limit;//分页。。。每一页数据

//省略get和set的方法，一定要get和set，不然前台获取不到值

 

         public String getstudent()

{

               // HttpServletRequest request = ServletActionContext.getRequest();set seesion的值

        //request.getSession().setAttribute("testid", testid);

HttpServletRequest request = ServletActionContext.getRequest();

String oppo=(String) request.getSession().getAttribute("testid");//获取考试的id。seesion方法

int testid=Integer.parseInt(oppo);//试卷ID

users=new ArrayList<Student>();

users=remote().Partstudents("学生");//得到所有學生

students=new ArrayList<Model>();

//分页

total=users.size();

int end=start+limit;

if(end>users.size())//不能总数

{

end=users.size();

}

for(int i=start;i<end;i++)//只加载当前页面数据

{

Model ok=new Model();

ok.setID(users.get(i).getID());

ok.setNAME(users.get(i).getNAME());

ok.setIDENT(users.get(i).getIDENT());

List <qualification>fuck=new ArrayList<qualification>();

fuck=remote1().getqualificationParts(users.get(i).getID(), testid);

if(fuck.size()>0)

{

ok.setQualify("true");

}

else

{

ok.setQualify("false");

}

ok.setExam_date(exam_data);

ok.setNowtime(nowtime);

students.add(ok);

}

System.out.println("start:"+start+" end:"+end);

return "students";

 

}