本实例将在带分页的表格基础上进行扩展,增加搜索功能。由于本实例采用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
);
});
带搜索功能的grid分页实例
最新推荐文章于 2020-09-27 13:49:00 发布