主要介绍如何使用ext的表格控件实现ajax分页。 上一节讲了ext的普通表格,当然ext表格最强的还是利用ajax分页,这里要加上服务端的代码了,本实例采用fleaphp框架演示,列出控制器的相关代码:
- 代码:
/** * 留言列表 */ function actionList() { $modelBO = & FLEA::getSingleton('Model_board'); load_class('FLEA_Helper_Pager'); $page = isset($_REQUEST['start']) ? (int)$_REQUEST['start']-1 : 0;//start为ext传递的参数 $pager= new FLEA_Helper_Pager($modelBO,$page,20,null,'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); } 客户端的js脚本主要与前一章普通表格差不多,所不同的是增加服务端加载的数据源,及分页按钮:
- 代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /> <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext/ext-all.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body> <script> 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 sm = new Ext.grid.CheckboxSelectionModel();
var colModel = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {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 grid = new Ext.grid.GridPanel({ border:false, buttonAlign :'left', region:'center', loadMask: true, store: ds, cm: colModel, sm: sm, autoScroll: true,
bbar: new Ext.PagingToolbar({//增加分页栏按钮设置为tbar可放置在顶部 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}}); }); </script> <div id="show"></div> </body> </html> 运行以上代码,将有如下效果: 强大吧?使用起来也是很简单的,呼呼,表格控件终于讲完了o(∩_∩)o...。 |