Extjs4.2 表格动态数据加载，以及动态选择分页条目，前后台详解

刚自学extjs,搞到分页后碰到了许多问题，特记录下，方便你我他

一、grid_gridpanel_paging.jsp页面引入：

<!-- 引入样式表 -->

<link rel="stylesheet" type="text/css" href="../js/resources/css/ext-all-neptune.css">

<!-- 引入核心js库 -->

<script type="text/javascript" src="../js/extjs4.2/extjs4.2/bootstrap.js" charset="utf-8"></script>

<!-- js中文包 -->

<script type="text/javascript" src="../js/extjs4.2/locale/ext-lang-zh_CN.js" charset="utf-8"></script>

<script type="text/javascript" src="../js/grid_gridpanel_pagings.js"></script>

<!-- 引入可动态选择每页显示条数的插件 -->

<script type="text/javascript" src="../js/ext/Extend/Notification.js"></script>

<script type="text/javascript" src="../js/ext/Extend/CommonMethod.js"></script>

<script type="text/javascript" src="../js/ext/Extend/ComboPageSize.js"></script>

二、编写前端grid_gridpanel_pagings.js代码：

Ext.onReady(function() {

var pageSize = 8;//设置每页显示的条数

// 定义列,sortable:true,可设置为是否可对其进行拖动

var columns = [ {

header : '编号',

dataIndex : 'id',

width : 50

}, {

header : '名称',

dataIndex : 'name',

width : 80

}, {

header : '描述',

dataIndex : 'descn',

width : 120

}, {

header : '状态',

dataIndex : 'status'

} ];

// 转换原始数据为ext可以显示的数据

var store = Ext.create('Ext.data.Store', {

pageSize : pageSize,// 每页显示多少条数据，不写无法分页

proxy : { // 代理

type : 'ajax',// 代理类型

url : '/Connecttion/extjs.action',

reader : {// 读取后台传过来的json数据

type : 'json',// 参数类型

totalProperty : 'total',// 总条数

root : 'rows',// 获取root下面的元素

idProperty : 'id',// 获取id

// successProperty: 'success'

},

},

fields : [ { // 定义字段

name : 'id'

}, // mapping:0

// 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置

{

name : 'name'

}, {

name : 'descn'

}, {

name : 'status'

} ]

});

// 创建表格

var grid = Ext.create('Ext.grid.Panel', {

renderTo : 'grid',// 渲染位置

autoHeight : true,// 自动调整高度

width : 800,

store : store,// 显示数据

columns : columns,// 显示列

bbar : Ext.create('Ext.PagingToolbar', {// 在底部创建一个分页工具栏

store : store,// 显示数据

displayInfo : true,// 是否显示数据信息

displayMsg : '显示第{0}条到第{1}记录，一共{2}条，',// 只要当displayInfo为true时才有效，用来显示有数据时的提示信息，{0},{1},{2}会自动被替换成对应的数据

emptyMsg : "没有记录",// 没有数据时显示信息



//动态选择显示几条数据，除了引入如jsp页面需要的几个js文件外，就是修改这了，需要的js文件可网上下载，引入结构如右边所示


plugins:Ext.create('Ext.ux.ComboPageSize',{

pageSizes:[5,10,15,20,30,40,50,100]

})



})

});

// 加载数据

store.load({

params : {

start : 0,//当前页从第几条数据开始显示

limit : pageSize//传到后台，每一页显示的条数

}

});// 设置限制参数，第0条到5条

});

三、编写后台代码

注：我用的是SSH编写的，这里这写重要部分，其他的我相信大家都知道

daoImpl的分页代码如下：

// 分页查询

@Override

public List<com.pb.model.Extjs4_demo> pagingQuery(int index, int pageSize) {



String hql = "from Extjs4_demo"; Query query =

this.getSession().getSessionFactory().getCurrentSession()

.createQuery(hql);

query.setFirstResult(index);

query.setMaxResults(pageSize);

List list = query.list();

return list;

}

/**

* 获得总条数

*/

@Override

public int finCount() {

String hql = "select count(id) from Extjs4_demo";

Query query = this.getSession().getSessionFactory().getCurrentSession()

.createQuery(hql);

long num = (long) query.uniqueResult();

return (int) num;

}

Action类的编写如下

@Scope("prototype")

@Controller("extjs4Action")

public class Extjs4Action extends ActionSupport{

private IExtjs4Service iExtjs4ServiceImpl;// 业务逻辑层对象

private int start;//从第几条开始显示

private int limit;//每页显示的条数

private int total;//总条数

private Map<String, Object> dataMap=new HashMap<String, Object>();//存储数据的map集合

/**

* 测试action以Struts2默认方式返回json数据

*

* @return

*/

public String findAll() {

// 获得所有的信息

List<Extjs4_demo> list= iExtjs4ServiceImpl.pagingQuery(start, limit);

//获取总条数

total=iExtjs4ServiceImpl.finCount();

//存入总条数以及对象集合

dataMap.put("total", total);

dataMap.put("rows", list);

return SUCCESS;

}

。。。。省略get/set

struts.xml文件如下

<struts>

<!--extjs4测试包-->

<package name="json" namespace="/" extends="json-default">

<!-- 查詢所有-->

<action name="extjs" class="extjs4Action" method="findAll">

<result type="json">

<param name="root">dataMap</param>

</result>

</action>

</package>

</struts>