| 带搜索功能的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 ) |
| < 上一篇 | 下一篇 > |
|---|