一、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”,后面的就不用解释了,和前面的一样。

效果如:

clip_image002

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

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,只需要改动这一处即可,修改后的代码如下:

 

< script type = " text/javascript " >  
function  GridBasic() { 
// 定义表格 
var  cm  =   new  Ext.grid.ColumnModel([ 
{ header: 
' 项目标号 ' , dataIndex:  ' projectId '  }, 
{ header: 
' 项目描述 ' , dataIndex:  ' project '  }, 
{ header: 
' 项目时间 ' , dataIndex:  ' due '  } 
]); 
// 解析数据源 
var  ds  =   new  Ext.data.Store({ 
url: 
' Test.json '
reader: 
new  Ext.data.JsonReader({ root:  ' data '  }, [ ' projectId '  , ' project '  ,  ' due '  ]) 
}); 
ds.load(); 
// 装配表格 
var  grid  =   new  Ext.grid.GridPanel({ 
el: 
' grid '
ds: ds, 
cm: cm, 
height:
200
width:
500  
}); 
grid.render(); 

Ext.onReady(GridBasic); 
// 开始执行 
< / script>

 

最终运行效果如:

clip_image004

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 ) . ' } '
?>

 

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

 

< script type = " text/javascript " >  
function  GridBasic() { 
// 定义表格 
var  cm  =   new  Ext.grid.ColumnModel([ 
{ header: 
' 项目标号 ' , dataIndex:  ' name '  }, 
{ header: 
' 项目描述 ' , dataIndex:  ' age '  }, 
{ header: 
' 项目时间 ' , dataIndex:  ' adr '  } 
]); 
// 解析数据源 
var  ds  =   new  Ext.data.Store({ 
url: 
' test.php '
reader: 
new  Ext.data.JsonReader({ root:  ' data '  }, [ ' name '  , ' age '  ,  ' adr '  ]) 
}); 
ds.load(); 
// 装配表格 
var  grid  =   new  Ext.grid.GridPanel({ 
el: 
' grid '
ds: ds, 
cm: cm, 
height:
200
width:
500  
}); 
grid.render(); 

Ext.onReady(GridBasic); 
// 开始执行 
< / script>

 

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

绑定结果如:

clip_image006

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代码即可:

 

< 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({ 
url: 
' data.aspx '
reader: 
new  Ext.data.JsonReader({ }, [ ' Name ' ' Id ' ' Adr ' ]) 
}); 
ds.load(); 
// 装配表格 
var  grid  =   new  Ext.grid.GridPanel({ 
el: 
' grid '
ds: ds, 
cm: cm, 
height: 
200
width: 
500  
}); 
grid.render(); 

Ext.onReady(GridBasic); 
// 开始执行 
< / script>

 

最终运行效果如:

clip_image008

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对应的代码如:

 

< 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({ 
url: 
' Home/GetData '
reader: 
new  Ext.data.JsonReader({ root:  ' data '  }, [ ' Name ' ' Id ' ' Adr ' ]) 
}); 
ds.load(); 
// 装配表格 
var  grid  =   new  Ext.grid.GridPanel({ 
el: 
' grid '
ds: ds, 
cm: cm, 
height: 
200
width: 
500  
}); 
grid.render(); 

Ext.onReady(GridBasic); 
// 开始执行 
< / script>

 

最终的效果如:

clip_image010

二、总结

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

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值