带分页的表格

hackbomb

浏览: 216637 次
性别:
来自: 上海

最近访客更多访客>>

181822498

zcediaos

土豆-.-

Bll

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT json CSS Ajax JavaScript

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

分享到：

带搜索功能的grid分页实例 | 树形下拉框

2009-01-09 13:43
浏览 1043
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论