GridPanel分頁

 GridPanel分頁

 
EXT數據結構 
Ext.onReady(function(){
 var sm = new Ext.grid.CheckboxSelectionModel();//顯示選擇框
 var cm = new Ext.grid.ColumnModel([
  new Ext.grid.RowNumberer(),//顯示行號
  sm,//顯示選擇框
  {
    header : "姓名",// 列頭文字說明
    width : 80,
    dataIndex : "Name",// 記錄結構中的name屬性值
    tooltip : "這是你的姓名"// 懸停提示
   }, {
    header : "性別",
    width : 40,
    dataIndex : "Sex",
    align : "center",
    renderer : function(v) {
     if (v == "男") {
      return "<img src='imgs/boy.gif'>";
     } else {
      return "<img src='imgs/girl.gif'>";
     }
    }
   }, {
    header : "生日",
    width : 150,
    format : "Y-m-d",
    dataIndex : "Birthday",
    renderer : Ext.util.Format.dateRenderer("Y-m-d")
   }, {
    header : "學歷",
    width : 80,
    dataIndex : "Education",
    align : "center"
   }, {
    id : "memo",
    header : "備註",
    dataIndex : "Memo"
   }, {
    header : "操作",
    width : 150,
    dataIndex : "Operation",
    menuDisabled : true,
    renderer : function(v) {
     return "<sapn style='margin-right:10px'><a href='#'>修改</a></span>"
       + "<span><a href='#'>刪除</a></span>";
    }
   }
 ]);
 
 // 給每個列添加數據
 var data = [{
    name : "學生A",
    sex : "男",
    birthday : Date.parseDate("1987-12-08", "Y-m-d"),
    edu : "本科",
    memo : "無備註"
   }, {
    name : "學生B",
    sex : "女",
    birthday : Date.parseDate("1974-04-23", "Y-m-d"),
    edu : "大專",
    memo : "漂亮MM"
   }, {
    name : "學生C",
    sex : "女",
    birthday : Date.parseDate("1978-05-17", "Y-m-d"),
    edu : "碩士",
    memo : "無備註"
   }, {
    name : "學生D",
    sex : "女",
    birthday : Date.parseDate("1988-07-14", "Y-m-d"),
    edu : "碩士",
    memo : "無備註"
   }];
 // proxy
 var proxy = new Ext.data.MemoryProxy(data);
 // 定義記錄結果
 var Human = Ext.data.Record.create([{
    name : "Name",
    type : "string",
    mapping : "name"
   }, {
    name : "Sex",
    type : "string",
    mapping : "sex"
   }, {
    name : "Birthday",
    type : "string",
    mapping : "birthday"
   }, {
    name : "Education",
    type : "string",
    mapping : "edu"
   }, {
    name : "Memo",
    type : "string",
    mapping : "memo"
   }, {
    name : "Operation",
    type : "string"
    // mapping:"oper"
  }]);
 var reader = new Ext.data.JsonReader({}, Human);
 //提供數據源
 var store = new Ext.data.Store({
    proxy : proxy,
    reader : reader
   });
 store.load();
 var grid = new Ext.grid.GridPanel({
  title:"學生信息",
  width:700,
  autoHeight:true,
  cm:cm,
  sm:sm,
  store:store,
  renderTo:"a",
  autoExpandColumn:"memo",//自動伸展
  buttonAlign:"center",
  buttons:[{
   text:"第一行",
   handler:function(){
    var rsm = grid.getSelectionModel();//得到行選擇模型
    rsm.selectFirstRow();
   }
  },{
   text:"上一行",
   handler:function(){
    var rsm = grid.getSelectionModel();//得到選擇行的模型
    if(!rsm.hasPrevious()){
     Ext.Msg.alert("警告","已到達第一行");
    }else{
     rsm.selectPrevious();
    }
   }
  },{
   text:"下一行",
   handler:function(){
    var rsm = grid.getSelectionModel();//得到行選擇模型
    if(!rsm.hasNext()){
     Ext.Msg.alert("警告","已到達最後一行");
    }else{
     rsm.selectNext()
    }
   }
  },{
   text:"最後一行",
   handler:function(){
    var rsm = grid.getSelectionModel();//得到行選擇模型
    rsm.selectLastRow();
   }
  },{
   text:"全選",
   handler:function(){
    var rsm = grid.getSelectionModel();//得到行選擇模型
    rsm.selectAll();
   }
  },{
   text:"全不選",
   handler:function(){
    var rsm = grid.getSelectionModel();//得到行選擇模型
    rsm.deselectRange(0,grid.getView().getRows().length - 1);
   }
  },{
   text:"反選",
   handler:function(){
    var rsm = grid.getSelectionModel();//得到行選擇模型
    for (var i = grid.getView().getRows().length - 1; i >= 0; i--) {
     if(rsm.isSelected(i)){
      rsm.deselectRow(i);
     }else{
      rsm.selectRow(i,true);//必須保留原來的,否則效果無法是實現
     }
    }
   }
  }]
  
 });
})
 
 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章