Ext入门学习系列(五)表格控件(3)

上节学习了Ext中如何绑定服务器端传递的数据。分别用asp.net和asp.net MVC、PHP、XML为例。本节主要介绍绑定之后的分页功能。

一、Ext的表格控件如何绑定?

分页是Ext自带的一个工具条功能,需要此功能时,可以打开设置相应的参数即可,后台查询数据的方式和传统方式相同,可以使用分页SQL,也可以使用分页存储过程,将查询到的数据以json的形式输出即可。

附:json格式示例:

{"data":[{"Id":1,"Name":"闹闹","Adr":"玉虚宫"},{"Id":2,"Name":"宝宝","Adr":"飘渺之界"},{"Id":3,"Name":"孔雀","Adr":"犀牛贺州"},{"Id":4,"Name":"石曼迪","Adr":"北极寒州"},{"Id":5,"Name":"魔法师","Adr":"未知大陆"}],"totalCount":16}

 

 

这个是带分页输出的json样本,意思是后台程序要做的仅仅只是将要展示的数据构建成json也就是Ext认识的格式,然后告诉前台去哪里获取这些数据即可。而构建方式每种语言各有不同,基本都提供了转换的方法或组件。PHP中有json_encode,JAVA中有JSONArray,JSONObject等,C#提供了JavaScriptSerializer和MVC中的Json方法,都可以构建出合法的json格式。如本例中的asp.net就是这么构建的:

复制代码
public partial class data : System.Web.UI.Page 

protected void Page_Load(object sender, EventArgs e) 

int start = Convert.ToInt32(Request.QueryString["start"]);//接受前台传递过来的分页起始条件 
int limit = Convert.ToInt32(Request.QueryString["limit"]);//接受前台传递过来的分页记录条数 
StudentDAL sc = new StudentDAL(); 
List<StudentInfo> students = sc.GetData(start, limit);//调用查询方法 
JavaScriptSerializer j = new JavaScriptSerializer();//实例化字符串格式化对象 
string result = "{\"totalCount\":" + sc.GetCount() + ",\"data\":" + j.Serialize(students) + "}"; 
Response.Write(result); 
Response.End(); 

}
复制代码

 

 

本段代码中用到的JavaScriptSerializer需要引入命名空间using System.Web.Script.

Serialization;方可使用。

同样,asp.net MVC中将集合转换为json的代码以及如Json方法的使用如:

复制代码
public JsonResult GetData() 

int start = Convert.ToInt32(Request.QueryString["start"]); 
int limit = Convert.ToInt32(Request.QueryString["limit"]); 
StudentModel stu = new StudentModel(); 
List<Student> s = stu.GetData(start, limit); 
return Json(new { data = s, totalCount = stu.GetCount() }, JsonRequestBehavior.AllowGet); 
}
复制代码

 

 

本段代码需要解释两点:

1. 这个动作的返回值是JsonResult类型,属于Controller 提供了众多的方法让我们返回各种类型的 ActionResult中的一种,其他的返回值类型如下图所示:

clip_image001

2. 默认情况下使用JsonResult作为返回值会报下面的异常:System.InvalidOperationException: This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet.

由错误信息可知MVC2出于对网站数据的保护,默认禁止通过get的请求返回JsonResult数据,你可以在返回Json时,传入第二个参数 JsonRequestBehavior.AllowGet,如:return Json(result, JsonRequestBehavior.AllowGet)。

OK,后台的输出工作完成了,下来就看前台怎么接收和显示了。不管后台框架如何变化,前台的显示和解析是一样的,需要指定数据从何获取,以什么样的方式获取,对应的字段显示在对应的列标题中,如果需要分页的话还得把分页控件显示出来,然后传入分页参数。

先看解析数据源:

复制代码
//解析数据源 
var ds = new Ext.data.Store({ 
proxy: new Ext.data.HttpProxy({ 
url: 'data.aspx', 
dataType: 'json', 
method: 'GET' 
}), 
reader: new Ext.data.JsonReader({ root: 'data', totalProperty: 'totalCount' }, Ext.data.Record.create([ 
{ name: 'Id', mapping: 'Id' }, 
{ name: 'Name', mapping: 'Name' }, 
{ name: 'Adr', mapping: 'Adr' } 
])) 
});
复制代码

 

 

HttpProxy 使用 HTTP 协议,通过 Ajax 去后台取数据,构造它时需要设置 url等参数。Reader中用的是JsonReader表示用什么方式去解析,参数中的root意思是内容部分从哪个节点开始解析,totalProperty表示总的记录数是多少,用于分页计算,这两个参数是平行关系。再往后的代码就是映射关系了。

解析完数据源,就需要按照要求装配表格了,需要这次装配的时候记得显示分页条:

复制代码
//装配表格 
var grid = new Ext.grid.GridPanel({ 
el: 'grid', 
ds: ds, 
cm: cm, 
height: 200, 
width: 500, 
bbar: new Ext.PagingToolbar({ 
pageSize: 5, 
store: ds, 
displayInfo: true, 
displayMsg: '显示第{0}条到第{1}条记录,一共{2}条', 
emptyMsg: "没有记录" 
}), 
title: '留言内容' 
}); 
ds.load({ params: { start: 0, limit: 5} });
复制代码

 

 

Ext.PagingToolbar是Ext专用的分页条控件,需要设置页码和提示信息等。最后一行的意思是表格第一次加载时查询哪些记录,当然参数名就在这里固定下来,点击下一页仍然使用这里定义的两个属性。

完整显示代码如:

复制代码
<script type="text/javascript"> 
function GridBasic() { 
//定义表格 
var cm = new Ext.grid.ColumnModel([ 
{ header: '姓名', dataIndex: 'Name' }, 
{ header: '编号', dataIndex: 'Id' }, 
{ header: '地址', dataIndex: 'Adr' } 
]); 
//解析数据源 
var ds = new Ext.data.Store({ 
proxy: new Ext.data.HttpProxy({ 
url: 'data.aspx', 
dataType: 'json', 
method: 'GET' 
}), 
reader: new Ext.data.JsonReader({ root: 'data', totalProperty: 'totalCount' }, Ext.data.Record.create([ 
{ name: 'Id', mapping: 'Id' }, 
{ name: 'Name', mapping: 'Name' }, 
{ name: 'Adr', mapping: 'Adr' } 
])) 
}); 
ds.load(); 
//装配表格 
var grid = new Ext.grid.GridPanel({ 
el: 'grid', 
ds: ds, 
cm: cm, 
height: 200, 
width: 500, 
bbar: new Ext.PagingToolbar({ 
pageSize: 5, 
store: ds, 
displayInfo: true, 
displayMsg: '显示第{0}条到第{1}条记录,一共{2}条', 
emptyMsg: "没有记录" 
}), 
title: '留言内容' 
}); 
ds.load({ params: { start: 0, limit: 5} }); 
grid.render(); 

Ext.onReady(GridBasic); //开始执行 
</script>
复制代码

 

 

有些情况下会遇到解析不出来或表单提交不上去的现象,比如目录配置或端口配置,那是由于Ext找不到数据源了,可以使用下面的方法解决掉:

前台接收用url: '<%:ViewData["PostUrl"]%>/Home/GuestBooks',

后台将配置好的路径输出:ViewData["PostUrl"] = "http://" + Request.Url.Host + ":" + Request.Url.Port;//提供表单提交路径。

最终完成的效果如:

clip_image003

二、总结

OK本次表格控件的绑定就到此,本次先到这里,就说了一件事情:分页,本来计划将更新和删除插入一并说完的,最近是在太忙,又怕前面写过的思路忘记就先发上来吧。

本章对应代码下载

posted on 2016-03-07 17:15  大西瓜3721  阅读(149)  评论(0编辑  收藏  举报

导航