注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

zhouhaigang.love的博客

喜欢冬日黄昏那冻住的山

 
 
 

日志

 
 

ext分页  

2008-07-24 17:32:12|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

ext分页 - zhouhaigang.love - zhouhaigang.love的博客 ext分页 - zhouhaigang.love - zhouhaigang.love的博客 ext分页 - zhouhaigang.love - zhouhaigang.love的博客

ext分页 - zhouhaigang.love - zhouhaigang.love的博客

  ext分页 - zhouhaigang.love - zhouhaigang.love的博客

Ext教程 ext分页 - zhouhaigang.love - zhouhaigang.love的博客 Ext实例分析 ext分页 - zhouhaigang.love - zhouhaigang.love的博客 带搜索功能的grid分页实例

 
   

Ext教程
Ext控件使用
Ext实例分析
Ext开源项目下载
JavaScript技术
PHP及相关技术
高级搜索
Blog 风格
网站链接
联系我们

 

带搜索功能的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号

 

  评论这张
 
阅读(270)| 评论(2)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017