Ext入门学习系列五--表格控件

最新推荐文章于 2018-06-28 14:31:41 发布

乡下丫头要进城

最新推荐文章于 2018-06-28 14:31:41 发布

阅读量1.2k

点赞数

文章标签： ext header asp.net json mvc serialization

如何绑定网格控件；

一、Ext的表格控件是什么？

同样先来看看几个效果：

这个是最基本的表格，Ext中的表格最基本的功能就是按列排序，按列筛选，定制列等。当然还有一些特有的功能：

可以对每行数据进行收缩，也可以点击右上角小三角收缩整个表格控件。

还可以很方便的进行分页操作：

以及动态的修改提交等功能：

二、Ext如何构造网格？

表格控件其实也就是帮我们完成了数据的填充工作而已，具体的数据源、要显示的列，列的定制、数据源中的哪条数据显示在哪个列中等属性还是需要我们自己手动配置的，所以我们分下面几步来完成网格控件的数据绑定：

1、定义表格：
定义一个表格比较简单，只需要new几个列即可，带上列的名称和要绑定的数据，定义列代码如：

var cm = new Ext.grid.ColumnModel([
{ header: ' 编号 ' , dataIndex: ' id ' },
{ header: ' 性别 ' , dataIndex: ' sex ' },
{ header: ' 名称 ' , dataIndex: ' name ' },
{ header: ' 描述 ' , dataIndex: ' desc ' }
]);

用header指定列名，用dataIndex指定数据源，也就是字段名。这样一个基本的表格就定义好了。

2、创建数据源：

一般数据源都是以集合的形式存在，这里使用一个2维数组来实现：

var data = [
[ ' 1 ' , ' 男 ' , ' 张三丰 ' , ' 是个作家 ' ],
[ ' 2 ' , ' 男 ' , ' 石曼迪 ' , ' 会武功 ' ],
[ ' 3 ' , ' 男 ' , ' 姜子牙 ' , ' 能捉鬼 ' ],
[ ' 4 ' , ' 女 ' , ' 穆桂英 ' , ' 好像是皇帝 ' ],
[ ' 5 ' , ' 男 ' , ' 孙悟空 ' , ' 高级程序员 ' ]
];

如果熟悉JS或者PHP的话，对这段代码就不陌生，定义一个数组，这个数组的每一个位置又存储了一个数组。用他来作为静态数据源。

3、解析数据源：

表格创建完毕，数据源也定义完毕，接下来就需要创建他们之间的关系，即配置分组数据集，使用的是创建一个 Ext.data.Store对象，通过它我们可以把任何格式的数据转化成grid可以使用的形式。其中需要告诉他的参数比较多，先看代码，后面解释：

var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{ name: ' id ' }, { name: ' sex ' }, { name: ' name ' }, { name: ' desc ' }
])
});
ds.load();

proxy：的含义是告诉表格从哪里取数据，可选的方式有HttpProxy、DataProxy、MemoryProxy或ScriptTagProxy。本例我们告诉他从内存中取数据，数据来自名字叫data的数组。

reader：reader告诉我们如何解析这个数据，他可选的方式有Ext.data.ArrayReader，Ext.data.JsonReader。本例使用的是Ext.data.ArrayReader，第一个参数是id (可选项) 下面的行数组内提供了该记录的id（不明白什么意思，试验是有没有都一样），后面参数含义就很明确了，就是刚才创建表格时定义的字段名，他的特点是读取数据比较简单，但是有个缺点就是不支持分页。

最后千万别忘了初始化数据操作调用Store对象的load方法。

4、装配表格

表格的列模型定义好了，原始数据和数据的转换都做好了，剩下的只需要装配在一起，我们的grid就出来了，先上代码，再研究：

var grid = new Ext.grid.GridPanel({
el: ' grid ' ,
ds: ds,
cm: cm,
height: 200 ,
width: 500
});
grid.render();

其实就是实例化一个表格面板控件，用来装表格。第一个参数是指定在哪里显示，这玩意总得在页面的某个部分或位置显示出来，Ext提供了控制div的做法，由于div很灵活，现在网页布局多采用他，所以需要在哪里显示出来，只需要把相应的div的id指定给他即可。下面2个参数很明白，就是我要装载的数据源叫什么，我装载到哪里去等等的。最后也别忘了调用grid.render()方法，让grid开始渲染，就是画界面等等的，这样才能显示出来。

好了，到此为止一个简单的表格控件就完成了，我们来看看完整代码：

< script type = " text/javascript " >
function GridBasic() {
// 1. 定义表格
var cm = new Ext.grid.ColumnModel([
{ header: ' 编号 ' , dataIndex: ' id ' },
{ header: ' 性别 ' , dataIndex: ' sex ' },
{ header: ' 名称 ' , dataIndex: ' name ' },
{ header: ' 描述 ' , dataIndex: ' desc ' }
]);
// 2. 创建数据源
var data = [
[ ' 1 ' , ' 男 ' , ' 张三丰 ' , ' 是个作家 ' ],
[ ' 2 ' , ' 男 ' , ' 石曼迪 ' , ' 会武功 ' ],
[ ' 3 ' , ' 男 ' , ' 姜子牙 ' , ' 能捉鬼 ' ],
[ ' 4 ' , ' 女 ' , ' 穆桂英 ' , ' 好像是皇帝 ' ],
[ ' 5 ' , ' 男 ' , ' 孙悟空 ' , ' 高级程序员 ' ]
];
// 3. 解析数据源
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{ name: ' id ' }, { name: ' sex ' }, { name: ' name ' }, { name: ' desc ' }
])
});
ds.load();
// 4. 装配表格
var grid = new Ext.grid.GridPanel({
el: ' grid ' ,
ds: ds,
cm: cm,
height: 200 ,
width: 500
});
grid.render();
}
Ext.onReady(GridBasic); // 开始执行
< / script>

现在我们自己亲手做的Ext表格控件已经完美的展示在我们眼前，但是仔细一看之后发现，刚才鼓吹的排序功能并不能点，怎么办？

很简单：在定义表格的时候后面带上一个属性sortable:true即可，即：

{ header: ' 编号 ' , dataIndex: ' id ' , sortable: true },

哪列需要就给那列加上即可。最后，看看我们今天的成果：

三、总结

本次课程我们学习了自己定义一个Ext数据表格空间，然后使用自己定义的数据源进行填充，并加上了排序功能，当然还有很多的功能没有实现，比如分页，和后台交互，分组等，我们后面继续吧，腰疼的不行了。OK，今天就到此结束。

本章代码下载

上节学习了Ext中表格控件，从创建，到定义数据源、绑定显示，大体明白了一个基本的表格控件是怎么实现的。而我们用表格控件多用于从各种数据源接收数据并显示出来，并不是写死的。本章我们就不同数据源的不同实现方式分别举例说明。

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

1. XML数据源

假设我们有一个数据源是以XML的形式存在的，我们需要从里面取出数据并绑定在界面。XML的结构如下：

< students >
< stu >
< age > 15 </ age >
< name > 奥特曼 </ name >
< hobby > 打小怪兽 </ hobby >
</ stu >
< stu >
< age > 13 </ age >
< name > 孙悟空 </ name >
< hobby > 吃桃子 </ hobby >
</ stu >
< stu >
< age > 100 </ age >
< name > 石曼迪 </ name >
< hobby > 睡觉 </ hobby >
</ stu >
</ students >

其绑定部分代码比上节的简单多了，最少不用定义数据源了，只需要告诉Ext要的数据在哪里去取即可，实现代码如：

// 解析数据源
var ds = new Ext.data.Store({
url: ' student.xml ' ,
reader: new Ext.data.XmlReader({record: ' stu ' }, [
{ name: ' age ' }, { name: ' name ' }, { name: ' hobby ' }
])
});
ds.load();

url：指定XML文件的存放位置，写相对路径。然后需要把读取器换成XmlReader，并在第一个参数里面告诉Ext开始解析的每条数据的根节点，根据本文提供的XML文件，每条数据的根节点是“stu”，后面的就不用解释了，和前面的一样。

效果如：

最后需要注意的是，本例包括以后的例子需要部署到服务器上运行，才能出现结果，不能双击网页文件查看效果，因为要和服务器交互。

2. JSON格式数据

首先得明白什么是JSON格式，json是js本身的一种数据格式，他是数据存储中最快的一种格式，现在已经广泛应用于互联网产品中，如腾讯的开心农场，数据传输就用的是json。

josn的数据组织结构{key:value,key1:value1,...n}，比较难懂，一般各种语言都提供了json转换方法，可以直接调用，省的大家拼字符串。

下面举例说明json的写法，拿一个一组数据为例：

{data: [
{projectId: 100 , project: ' Ext表单基本知识 ' , due: ' 06/24/2010 ' },
{projectId: 102 , project: ' Ext表格基本知识 ' , due: ' 07/11/2010 ' },
{projectId: 102 , project: ' Ext还可以汇总 ' , due: ' 07/15/2010 ' }
]}

最外层是一对花括弧表示数据开始和结束，里面有一个节点叫“data”表示根结点，后面跟“[]”表示子节点的数据，再里面就是具体的键值对数据表示形式了，每个数据用英文逗号隔开，每条数据都用花括弧括起来。

然后我们来解析他，根据我们上节所说，现在的数据源变成json格式，那么解析器也得变成JsonReader，只需要改动这一处即可，修改后的代码如下：

最终运行效果如：

3. 使用动态语言绑定

PHP：

PHP本身就有处理函数：json_encode（数组）使用的时候只需把数据库中查询出来的数据已数组形式传递进去，然后输出即可，实现代码如：

<? php
$arr = array (
0 => array ( ' name ' => ' 孔雀 ' , ' age ' => ' 88 ' , ' adr ' => ' 道观 ' ) ,
1 => array ( ' name ' => ' 奥特曼 ' , ' age ' => ' 150 ' , ' adr ' => ' 火星 ' ) ,
2 => array ( ' name ' => ' 石曼迪 ' , ' age ' => ' 18 ' , ' adr ' => ' 地球 ' ) ,
3 => array ( ' name ' => ' 闹闹 ' , ' age ' => ' 28 ' , ' adr ' => ' 山东 ' ) ,
);
echo ' {data: ' . json_encode( $arr ) . ' } ' ;
?>

前台页面也只需要更改数据源为输出数据的文件名即可，完整代码如：

和前面学习过的基本一样。

绑定结果如：

ASP.NET：

使用asp.net就更简单了，传统的asp.net直接在提供数据的页面的page_load事件下输出即可，使用asp.net内置的处理对象JavaScriptSerializer，使用方法如：新建一个提供数据用的页面data.aspx，在后台写上如下代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Script.Serialization;

public partial class data : System.Web.UI.Page
{
protected void Page_Load( object sender, EventArgs e)
{
List < Student > students = new List < Student > {
new Student { Id = 1 , Name = " 孔雀 " , Adr = " 道观 " } ,
new Student { Id = 2 , Name = " 闹闹 " , Adr = " 山¦东 " },
new Student { Id = 1 , Name = " 石曼迪 " , Adr = " 地球 " }
};
JavaScriptSerializer j = new JavaScriptSerializer();
Response.Write(j.Serialize(students));
Response.End();
}
}

public class Student
{
public int Id { get ; set ; }
public string Name { get ; set ; }
public string Adr { get ; set ; }
}

在接受页面的前台协商EXT代码即可：

最终运行效果如：

ASP.NET MVC：

Asp.net mvc作为微软最新推出的架构模式，已经在各个行业逐步应用起来了，由于它采用的不是传统的服务器控件-事件模式，改变以往服务器端运行模式，采用表单提交方式，故而非常有利于测试和请求控制，没了以往那么多的控件，表格必须得手写代码循环绑定，我们也举一个MVC的例子来说明数据绑定吧。

先使用VS2010创建一个MVC项目，在view下面的share里面的Site.Master里面添加对Ext的引用。然后在model里面增加一个返回集合的方法，最后在Index对应的Controller里面增加json的输出方法，然后在view里Index对应的视图上配置数据源即可。

Model对应的代码如：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Ext_aspnet_MVC.Models
{
public class Student
{
public int Id { get ; set ; }
public string Name { get ; set ; }
public string Adr { get ; set ; }
}

public class StudentModel
{
public List < Student > GetAll()
{
List < Student > students = new List < Student > {
new Student { Id = 1 , Name = " 孔雀 " , Adr = " 道观 " } ,
new Student { Id = 2 , Name = " 闹闹 " , Adr = " 山¦东 " },
new Student { Id = 1 , Name = " 石曼迪 " , Adr = " 地球 " }
};
return students;
}
}
}

Controller对应的代码如：

public JsonResult GetData()
{
StudentModel stu = new StudentModel();
List < Student > s = stu.GetAll();
return Json( new { data = s}, JsonRequestBehavior.AllowGet);
}

注：MVC2出于对网站数据的保护，默认禁止通过get的请求返回JsonResult数据，你可以在返回Json时，传入第二个参数 JsonRequestBehavior.AllowGet。

View对应的代码如：

最终的效果如：

二、总结

OK本次表格控件的绑定就到此，一共讲解了多种数据源的绑定方法，希望大家能够在其中找到自己认为有价值的东西，其中asp,net MVC后面会专门写文章解释，还有目前只是完成了一个基本的绑定，还没有进行分页、新增、修改和删除等操作，下次将会实现这些，以期完整一个完整的表格绑定。

本章代码下载

上节学习了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中的一种，其他的返回值类型如下图所示：

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;//提供表单提交路径。

最终完成的效果如：

乡下丫头要进城

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ext入门学习系列五--表格控件

如何绑定网格控件；一、Ext的表格控件是什么？同样先来看看几个效果：这个是最基本的表格，Ext中的表格最基本的功能就是按列排序，按列筛选，定制列等。当然还有一些特有的功能：可以对每行数据进行收缩，也可以点击右上角小三角收缩整个表格控件。还可以很方便的进行分页操作：以及动态的修改提交等功能：二、Ext如何构造网格？
复制链接

扫一扫