- 浏览: 216509 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
henchong:
如果提示信息全是数字的话,是不会自动换行的,不知道这个该怎么解 ...
用ExtJs为表格单元格增加Tooltips浮动信息 -
李君寻:
自动换行,算是懂了
ColumnLayout的使用方法 -
icrwen:
楼主能解释下为啥要用air技术呢,是不是只用ext就可以了啊
extjs+air开发 -
wenniuwuren:
不能显示图片..
利用session实现一次性验证码 -
追风筝的孩子:
还是没有解决啊
com.ibatis.sqlmap.client.SqlMapException: There is no statement named 语句名 in thi
主要介绍如何使用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>
发表评论
-
extjs+air开发
2009-06-24 21:41 3032一、准备工作 1、下载adobe air install和ad ... -
带复选框(checkbox)的树
2009-03-20 15:05 1865该例子可以满足我们的一般需求。很多时候我们需要用到带check ... -
ExtJs中解决IE的min-width问题
2009-02-27 22:14 786当使用了ExtJs后,脚本documentElement.cl ... -
Ext中的动画处理
2009-02-27 22:13 1179CartoonExt.js //图片宽 var WIDTH=3 ... -
Ext.Ajax
2009-02-27 22:12 1195其实Ext.Ajax的使用并不 ... -
使用百分比设置GridPannel宽度的方法
2009-01-14 15:03 1657使用过Ext的Gird(网格)功 ... -
巧妙运用NumberField
2009-01-14 15:02 4587巧妙运用NumberField: 只允许字段输入数字. v ... -
Ext.ux.TabCloseMenu插件的使用
2009-01-14 14:59 1578tab在ext里很常用,在点开N个tab后,是否能通过右键菜单 ... -
直接在页面上显示富文本编辑器
2009-01-14 14:58 3288<html> <head> ... -
带右键菜单的树
2009-01-14 14:58 1204ext树形菜单加上右键菜单是不是很酷,ext当然也能实现。 树 ... -
EXT 二级联动下拉列表
2009-01-14 14:57 2579page.html代码如下 <!DOCTYPE HTM ... -
带搜索功能的grid分页实例
2009-01-09 13:43 1573本实例将在带分页的表格基础上进行扩展,增加搜索功能。由于本实例 ... -
树形下拉框
2009-01-09 13:43 2582<!DOCTYPE HTML PUBLIC " ... -
支持手写输入及联想功能的下拉框
2009-01-09 13:42 2897<!DOCTYPE HTML PUBLIC " ... -
让ext项目步入对象化编程
2009-01-09 13:39 838对于一些刚刚接触javascript的人来说大部分都在使用面向 ... -
grid的继承类,构建方便的grid操作
2009-01-09 13:13 1451在以往建立grid的时都要 ... -
ext异步加载树的子节点
2009-01-09 13:12 1979<script> Ext.o ... -
可拖拽的tree实际应用
2009-01-09 12:54 1818ext提供的树本身就有拖 ... -
可直接编辑节点的tree
2009-01-09 12:03 1707其实代码并不是很复杂,只是在原有的树形添加一个TreeEdit ... -
Checkbox与RadioGroup的使用方法
2009-01-09 12:03 7098Ext提供的Checkbox与Radio, ...
相关推荐
本文将深入探讨如何使用 jQuery 和 Bootstrap 实现带分页的表格数据搜索和筛选功能。 首先,Bootstrap 提供了丰富的 CSS 样式和组件,包括表格(Table)样式,使得我们可以轻松创建出响应式的、美观的表格。而 ...
在网页开发中,数据展示是不可或...总之,jQuery TableSorter插件是实现可排序和分页表格的强大工具,它使得动态交互式表格的开发变得更加简单和高效。通过灵活地配置和扩展,我们可以轻松应对各种复杂的数据展示需求。
它可能包含了对分页按钮、当前页指示器、查询框等元素的样式定义,使得分页表格不仅功能完备,而且视觉效果良好。 `demo.html` 是一个示例文件,展示了如何在实际网页中使用这个分页类。它可能包含了HTML表格的结构...
本教程将详细讲解如何使用jQuery库来实现表格的动态分页,同时结合Java后端进行数据的动态查询和分页处理。 首先,让我们了解动态分页的基本原理。动态分页是指在用户滚动或点击分页按钮时,仅加载当前显示的数据,...
在网页开发中,"js分页表格"是一个常见的需求,特别是在大数据量的展示场景下。Bootstrap框架因其简洁、易用的样式设计而被广泛应用,它提供了丰富的UI组件,包括表格和分页。在这个项目中,我们看到的是一个利用...
本项目涉及的是使用jQuery实现的一个带有分页功能的动态数据表格插件,该插件的设计灵感来源于Excel,允许用户进行类似Excel的操作,如数据编辑和排序。 首先,`index.html`是项目的主页面文件,它包含了HTML结构,...
Java Swing 表格分页实现 Java Swing 是一个用于构建图形用户界面的 Java 库,提供了丰富的用户界面组件和功能。在本文中,我们将探讨如何使用 Java Swing 实现表格分页。 表格分页的需求 在实际开发中,我们经常...
本教程将深入讲解如何利用jQuery实现一个带分页的动态数据表格插件。 首先,我们需要理解jQuery的核心概念。jQuery通过提供易用的API,使得JavaScript代码更简洁、更高效。例如,`$(selector)`用于选取DOM元素,`....
在Qt框架中,实现表格数据的分页打印是一项常见的任务,尤其在开发桌面应用程序时,用户可能需要将大量数据从GUI界面导出到纸质媒介。Qt提供了强大的打印功能,允许开发者利用QPrinter、QPrintPreviewDialog等类实现...
jQuery作为一个广泛使用的JavaScript库,提供了丰富的插件来帮助开发者实现各种功能,包括表格分页。本篇文章将深入探讨jQuery插件在实现表格分页中的应用及其相关知识点。 一、jQuery和表格分页基础 1. jQuery...
在这个场景中,“Dom生成表格和实现分页源码”指的是利用DOM操作动态生成表格,并且集成分页功能的代码实践。 首先,我们来详细探讨如何使用DOM生成表格。在HTML中,表格由`<table>`、`<tr>`(行)、`<th>`(表头)...
"分页表格示例"这个主题就涉及到了如何高效、优雅地显示并管理大量的结构化数据。在这个示例中,我们主要关注的是使用jQuery库来实现表格的分页功能,通过pagedown和pageup操作,使得用户能够轻松浏览和导航数据。 ...
最后,配合其他表格资源,如QTableView的交互事件处理、单元格样式定制等,可以进一步完善分页表格的功能和视觉效果。确保在编写代码时遵循Qt的编码规范和最佳实践,以保持代码的可读性和可维护性。 通过以上步骤,...
"分页插件,表格分页一体"这个标题所指的是一个专为表格设计的分页解决方案,它将分页功能与表格紧密结合,提供了一种高效、便捷的方式来管理大量数据的显示。 首先,我们要理解什么是分页。在Web应用中,分页是...
在本项目中,“bootsrap实现带斑马纹的分页表格”是利用Bootstrap的特性来创建一个具有交替行颜色(斑马纹)并具备分页功能的数据展示表格。 首先,我们从斑马纹开始。斑马纹效果通常是通过CSS实现的,通过为奇数行...
本实例主要展示了如何使用 Bootstrap 和 jQuery 创建一个带有分页跳转功能的表格,这在数据展示和管理中非常常见。我们将讨论以下几个关键知识点: 1. **Bootstrap**:Bootstrap 是一个流行的开源 CSS 框架,它提供...
网页上经常有分页表格的出现,同样的在Android上也可以实现。Android本身并没有直接提供表格这个控件,一般可以用GridView来实现比较简单,但是每个数据显示的长宽会一样。当然,也可以用ListView来实现,这个灵活...
网页报表表格自动分页打印是网页设计中一个重要的技术环节,尤其在处理大量数据时,确保表格内容在A4纸上整洁、美观地呈现是至关重要的。网页表格默认的打印方式可能会导致内容在不同页面间断开,这不仅影响阅读体验...
"分页-表格示例"这个主题主要关注如何在表格中实现分页功能。 分页通常用于数据库查询结果、电子表格、论坛帖子等场景。表格是数据展示的常见方式,尤其当数据具有多列和多行时,分页可以使用户更容易地管理和查看...