Ext教程 arrow Ext实例分析 arrow 带搜索功能的grid分页实例
 
     
带搜索功能的grid分页实例
  2008-04-28
    之前见过带分页的表格(grid),在阅读本实例之前,请确定已经了解grid基本知识,若没有了解请先阅读:

http://www.extshow.com/Ext%BF%D8%BC%FE%CA%B9%D3%C3/60.html

演示地址:

http://www.extshow.com/sysdemo/index.php?controller=board2&action=show

本实例将在带分页的表格基础上进行扩展,增加搜索功能。由于本实例采用fleaphp+ext制作,故本实例将只贴出核心的代码,不提供源码打包下载了(见谅)。部分参考自志凡extjs grid搜索分页实例。下面先看下服务端的核心代码,这里采用PHP:
   /**
     * 留言列表
     */
    function actionList() {
           $modelBO = & FLEA::getSingleton('Model_board');
           load_class('FLEA_Helper_Pager');
           $page = isset($_REQUEST['start']) ? (int)$_REQUEST['start']-1 : 0;

           //若搜索字段为空及表格初始化时,显示全部记录,否则根据title搜索
           $str = null;
           if ($_REQUEST['title']) {//接受传送过来的title值
              $str = ' title like '%'. trim($_REQUEST['title']) .'%'';
           }
           $pager= new FLEA_Helper_Pager($modelBO,$page,20,$str,'board_id DESC');
           $posts = $pager->findAll();
           $post_arr = array('0'=>'未回复','1'=>'已回复');

           foreach ($posts as $val2) {
               $temp['board_id'] = $val2['board_id'];
               $temp['title'] = $val2['title'];
               $temp['comment'] = $val2['comment'];
               $temp['is_post'] = $post_arr[$val2['is_post']];
               $temp['post_comment'] = $val2['post_comment'];
               $temp['add_time'] = $val2['add_time'];
               $temp['add_user'] = $val2['add_user'];
               $new_arr[] = $temp;
           }


           $result['topics'] = $new_arr;
           $js=count($modelBO->findAll());
           $result['totalCount'] = $js;
           require('./common/Json.php');
           $json = new Services_JSON();
           echo $json->encode($result);
    }

     实际上就是服务端接受ext搜索表单传送的值,搜索相应记录返回即可,在看下客户端js代码:

      Ext.onReady(function(){
    var ds = new Ext.data.Store({
        proxy : new Ext.data.HttpProxy({url:'index.php?controller=board&action=list'}),
        reader: new Ext.data.JsonReader({
            root: 'topics',
            totalProperty: 'totalCount',
            id: 'board_id'
            },[
            'board_id','title','is_post','add_time','add_user'
          ])
    });

    var colModel = new Ext.grid.ColumnModel([
         new Ext.grid.RowNumberer(),
         {header:'ID',width:50,sortable:true,dataIndex:'board_id'},
         {header:'标题', width:300,sortable:true,dataIndex:'title'},
         {header:'作者', width:150,sortable:true,dataIndex:'add_user'},
         {header:'是否回复',width:100,sortable:true,dataIndex:'is_post'},
         {header:'发布时间',width:200,sortable:true,dataIndex:'add_time'}
        ]);

    //设置搜索表单
    var s_pannel = new Ext.FormPanel({
        baseCls: 'x-plain',
        defaults: {width: 150},
        defaultType: 'textfield',
        items: [{
                fieldLabel: '标题',
                id:'title',
                name: 'title'
            }]
    });

    var grid = new Ext.grid.GridPanel({
                border:false,
                buttonAlign :'left',
                region:'center',
                loadMask: true,
                store: ds,
                cm: colModel,
                autoScroll: true,
                tbar: [
                   s_pannel,//搜索表单
                   {
                       text: '搜索',
                          handler:function(){
                             // 这里是关键,重新载入数据源,并把搜索表单值提交
                             ds.load({
                                     params:{start:0, limit:20,
                                         title:Ext.get('title').dom.value//取得搜索表单文本域的值,发送到服务端
                                     }
                                 })
                          }
                   }
                ],
                bbar: new Ext.PagingToolbar({
                    pageSize: 20,
                    store: ds,
                    displayInfo: true,
                    displayMsg: '第{0} 到 {1} 条数据 共{2}条',
                    emptyMsg: "没有数据"
                })
            });

    var viewport = new Ext.Viewport({
        layout:'border',
        items:[grid]
        });

    ds.load({params:{start:0, limit:20, forumId: 4}});
    // 这里很关键,如果不加,翻页后搜索条件就变没了,这里的意思是每次数据载入前先把搜索表单值加上去,
    // 这样就做到了翻页保留搜索条件了
    ds.on('beforeload',function(){
      Ext.apply(
      this.baseParams,
      {
           title:Ext.get('title').dom.value
      });
    });

    //end loding
    setTimeout(
                function() {
                    Ext.get('loading').remove();
                    Ext.get('loading-mask').fadeOut({remove:true});
                }, 250
              );
});

     简单吧,相信你一定已经明白,赶紧加到自己的项目中吧~:),下期实例我将介绍一下如何用ext生成树形下拉框。
最近更新 ( 2008-04-28 )
< 上一篇   下一篇 >
   
 
 
 
Copyright Infotmation overhere. | designed by Magicbox from Mambochina
曼波整站系统 基于 Mambo 开发,是免费的自由软件,遵循 GNU/GPL 开源许可协议。
曼波整站系统5.4.0Mambo中国Mambo Resource 联合增强开发。  闽ICP备08005204号