Ext的表格控件如何绑定
1. XML数据源
假设我们有一个数据源是以XML的形式存在的,我们需要从里面取出数据并绑定在界面。XML的结构如下:
其绑定部分代码比上节的简单多了,最少不用定义数据源了,只需要告诉Ext要的数据在哪里去取即可,实现代码如:
url:指定XML文件的存放位置,写相对路径。然后需要把读取器换成XmlReader,并在第一个参数里面告诉Ext开始解析的每条数据的根节点,根据本文提供的XML文件,每条数据的根节点是“stu”,后面的就不用解释了,和前面的一样。
效果如:
最后需要注意的是,本例包括以后的例子需要部署到服务器上运行,才能出现结果,不能双击网页文件查看效果,因为要和服务器交互。
2. JSON格式数据
首先得明白什么是JSON格式,json是js本身的一种数据格式,他是数据存储中最快的一种格式,现在已经广泛应用于互联网产品中,如腾讯的开心农场,数据传输就用的是json。
josn的数据组织结构{key:value,key1:value1,...n},比较难懂,一般各种语言都提供了json转换方法,可以直接调用,省的大家拼字符串。
下面举例说明json的写法,拿一个一组数据为例:
最外层是一对花括弧表示数据开始和结束,里面有一个节点叫“data”表示根结点,后面跟“[]”表示子节点的数据,再里面就是具体的键值对数据表示形式了,每个数据用英文逗号隔开,每条数据都用花括弧括起来。
然后我们来解析他,根据我们上节所说,现在的数据源变成json格式,那么解析器也得变成JsonReader,只需要改动这一处即可,修改后的代码如下:
最终运行效果如:
3. 使用动态语言绑定
PHP:
PHP本身就有处理函数:json_encode(数组)使用的时候只需把数据库中查询出来的数据已数组形式传递进去,然后输出即可,实现代码如:
前台页面也只需要更改数据源为输出数据的文件名即可,完整代码如:
和前面学习过的基本一样。
绑定结果如:
ASP.NET:
使用asp.net就更简单了,传统的asp.net直接在提供数据的页面的page_load事件下输出即可,使用asp.net内置的处理对象JavaScriptSerializer,使用方法如:新建一个提供数据用的页面data.aspx,在后台写上如下代码:
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对应的代码如:
Controller对应的代码如:
注:MVC2出于对网站数据的保护,默认禁止通过get的请求返回JsonResult数据,你可以在返回Json时,传入第二个参数 JsonRequestBehavior.AllowGet。
View对应的代码如:
最终的效果如:
页是Ext自带的一个工具条功能,需要此功能时,可以打开设置相应的参数即可,后台查询数据的方式和传统方式相同,可以使用分页SQL,也可以使用分页存储过程,将查询到的数据以json的形式输出即可。
附:json格式示例:
这个是带分页输出的json样本,意思是后台程序要做的仅仅只是将要展示的数据构建成json也就是Ext认识的格式,然后告诉前台去哪里获取这些数据即可。而构建方式每种语言各有不同,基本都提供了转换的方法或组件。PHP中有json_encode,JAVA中有JSONArray,JSONObject等,C#提供了JavaScriptSerializer和MVC中的Json方法,都可以构建出合法的json格式。如本例中的asp.net就是这么构建的:
本段代码中用到的JavaScriptSerializer需要引入命名空间using System.Web.Script.
Serialization;方可使用。
同样,asp.net MVC中将集合转换为json的代码以及如Json方法的使用如:
本段代码需要解释两点:
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,后台的输出工作完成了,下来就看前台怎么接收和显示了。不管后台框架如何变化,前台的显示和解析是一样的,需要指定数据从何获取,以什么样的方式获取,对应的字段显示在对应的列标题中,如果需要分页的话还得把分页控件显示出来,然后传入分页参数。
先看解析数据源:
HttpProxy 使用 HTTP 协议,通过 Ajax 去后台取数据,构造它时需要设置 url等参数。Reader中用的是JsonReader表示用什么方式去解析,参数中的root意思是内容部分从哪个节点开始解析,totalProperty表示总的记录数是多少,用于分页计算,这两个参数是平行关系。再往后的代码就是映射关系了。
解析完数据源,就需要按照要求装配表格了,需要这次装配的时候记得显示分页条:
Ext.PagingToolbar是Ext专用的分页条控件,需要设置页码和提示信息等。最后一行的意思是表格第一次加载时查询哪些记录,当然参数名就在这里固定下来,点击下一页仍然使用这里定义的两个属性。
完整显示代码如:
有些情况下会遇到解析不出来或表单提交不上去的现象,比如目录配置或端口配置,那是由于Ext找不到数据源了,可以使用下面的方法解决掉:
前台接收用url: '<%:ViewData["PostUrl"]%>/Home/GuestBooks',
后台将配置好的路径输出:ViewData["PostUrl"] = "http://" + Request.Url.Host + ":" + Request.Url.Port;//提供表单提交路径。
最终完成的效果如:
Ext的表格控件如何绑定的更多相关文章
- Ext入门学习系列(五)表格控件(3)
上节学习了Ext中如何绑定服务器端传递的数据.分别用asp.net和asp.net MVC.PHP.XML为例.本节主要介绍绑定之后的分页功能. 一.Ext的表格控件如何绑定? 分页是Ext自带的一个 ...
- Ext入门学习系列(五)表格控件(2)
上节学习了Ext中表格控件,从创建,到定义数据源.绑定显示,大体明白了一个基本的表格控件是怎么实现的.而我们用表格控件多用于从各种数据源接收数据并显示出来,并不是写死的.本章我们就不同数据源的不同实现 ...
- Ext入门学习系列(五)表格控件(1)
上节学习了Ext面板控件,为后面的各个控件学习奠定基础,在此基础上本章将学习网络开发最期待的功能——表格控件. 我们都知道网络编程语言中,除了.net其他的基本没有提供网格控件,而最近的asp.net ...
- 在GridControl表格控件中实现多层级主从表数据的展示
在一些应用场景中,我们需要实现多层级的数据表格显示,如常规的二级主从表数据展示,甚至也有多个层级展示的需求,那么我们如何通过DevExpress的GridControl控表格件实现这种业务需求呢?本篇 ...
- Ext表格控件
表格控件其实也就是帮我们完成了数据的填充工作而已,具体的数据源.要显示的列,列的定制.数据源中的哪条数据显示在哪个列中等属性还是需要我们自己手动配置的,所以我们分下面几步来完成网格控件的数据绑定: 1 ...
- Silverlight项目笔记5:Oracle归档模式引起的异常&&表格控件绑定按钮
1.Oracle归档模式产生日志文件引起数据库异常 连接数据库失败,提示监听错误,各种检查监听配置文件,删除再添加监听,无果. sqlplus下重启数据库数据库依然无果,期间碰到多个错误提示: ORA ...
- SNF快速开发平台MVC-各种级联绑定方式,演示样例程序(包含表单和表格控件)
做了这么多项目,经常会使用到级联.联动的情况. 如:省.市.县.区.一级分类.二级分类.三级分类.仓库.货位. 方式:有表单需要做级联的,还是表格行上需要做级联操作的. 实现:实现方法也有很多种方式. ...
- Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx
Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...
- 深入浅出ExtJS 第三章 表格控件
3.1 表格的特性简介 >.Ext中的表格功能:包括排序/缓存/拖动/隐藏某一列/自动显示行号/列汇总/单元格编辑等实用功能; >.表格由类Ext.grid.GridPanel定义,继承自 ...
随机推荐
- IP地址及子网--四种IP广播地址
国际规定:把所有的IP地址划分为 A,B,C,D,E. 类默认子网掩码:A类为 255.0.0.0; B类为 255.255.0.0; C类为 255.255.255.0.子网掩码是一个32位地址,用 ...
- csu 1806 & csu 1742 (simpson公式+最短路)
1806: Toll Time Limit: 5 Sec Memory Limit: 128 MB Special JudgeSubmit: 256 Solved: 74[Submit][Sta ...
- hdu 1597(矩阵快速幂)
1597: 薛XX后代的IQ Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 228 Solved: 55[Submit][Status][Web Bo ...
- C++如何取得int型的最大最小值
转:http://www.cnblogs.com/alex4814/archive/2011/09/12/2174173.html 當題目涉及到求最大最小值時,最初的比較數字就應當設置爲INT_MAX ...
- webapi调用post时自动匹配参数
[HttpPost] public async Task<string> Post() { dynamic model = await Request.Content.ReadAsAsyn ...
- virtualenv python的虚拟环境
官网:https://virtualenv.pypa.io/en/stable/userguide/ virtualenv通过创建独立Python开发环境的工具, 来解决依赖.版本问题 基本使用: d ...
- ctime, atime与mtime释疑
每个档案都有属性及内容.除了档案内容很重要外,时间标记也非常重要--系统管理员可以藉由时间标记进行备份.例行性检查:使用者可以从时间标记找出重要的档案,硬碟的I/O也依靠时间标记(time flag) ...
- Typo: In word 拼写检查
Settings->Inspections > Spelling > Typo 评写检查,
- Python之路【第三篇】:文件操作
一.文件操作步骤 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 歌名:<大火> 演唱:李佳薇 作词:姚若龙 作曲:马奕强 歌词: 有座巨大的停了的时钟 倾倒在赶 ...
- Node.js后台开发初体验
Node.js是什么 Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质时对Chrome V8引擎进行了封装 Node.js安装 ...