您的位置：首页 > 其它

Ext教程连载 - 带分页的表格

2009-09-29 08:03 211 查看

主要介绍如何使用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...。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航