本文欢迎转载，转载请注明：转载自中国学网： []
用户还关注
可能有帮助GridPanel 折叠/展开行
Ext.Net GridPanel的行支持折叠/展开功能，这个功能个人觉得还说很有用处的，尤其是数据中包含图片等内容的时候。
下面来看看效果：
使用行折叠/展开功能之后，在Ext.Net GridPanel的行头会出现一个展开图标，点击图标以后能够将这一行展开：
使用XTemplate实现行折叠/展开
这是最简单的一种实现，在上一篇文章： 中的代码基础上我们在GridPanel的定义中加入下面的代码：
&ext:RowExpander runat="server"&
&Template runat="server"&
&b&姓名：&/b&&span&{Name}&/span&
&b&年龄：&/b&&span&{Age}&/span&
&/Template&
&/ext:RowExpander&
&/Plugins&
这里面使用到了Template，这里面包含了我们展开后要显示的内容，数据就是当前行的数据。
从服务器获取展开时显示的数据
通常情况下我们不会一次将所有数据都获取到客户端，而是通过异步加载的方式按需获取要显示的数据在Ext.Net GridPanel中，如果要在展开的时候从服务器获取数据，我们需要完成如下代码。
第一步：为了配合演示，先为我们的Model添加一个Time属性，我们通过异步的方式去服务器端获取当前时间：
&ext:Model ID="UserInfoModel" runat="server" IDProperty="ID"&
&ext:ModelField Name="ID" Type="Int"&&/ext:ModelField&
&ext:ModelField Name="Name" Type="String"&&/ext:ModelField&
&ext:ModelField Name="Gender" Type="String"&&/ext:ModelField&
&ext:ModelField Name="Age" Type="Int"&&/ext:ModelField&
&ext:ModelField Name="Time" Type="String"&&/ext:ModelField&
&/ext:Model&
第二步：修改我们的RowExpander定义，我们需要将Template定义在Bin下，并为RowExpander添加事件：
&ext:XTemplate runat="server" ID="tplDetail"&
&b&姓名：&/b&&span&{Name}&/span&
&b&年龄：&/b&&span&{Age}&/span&
&b&时间：&/b&&span&{Time}&/span&
&/ext:XTemplate&
&ext:RowExpander runat="server"&
&Listeners&
&Expand Handler="MyApp.onExpand(record.data, #{tplDetail}, #{ctDetail})"&&/Expand&
&/Listeners&
&Component&
&ext:Container runat="server" ID="ctDetail" /&
&/Component&
&/ext:RowExpander&
&/Plugins&
第三步：定义服务器端的DirectMethod方法：
[DirectMethod]
public static string GetDetail(string name)
return DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
第四步：定义客户端的Expand方法：
var MyApp = {
onExpand: function (data, template, container) {
if (data.Time) return;
App.direct.GetDetail(data.Name, {
success: function (time) {
data.Time =
template.overwrite(container.getEl(), data);
eventMask : { showMask : true }
通过上面这几个步骤，我们就完成了异步获取并显示的功能。效果如下：
GridPanel Selection
接下来是Ext.Net的GridPanel的另外一个功能：选择。
我们在GridPanel最开始的用法中已经见识过如何使用选择功能，今天我们这片笔记将更加详细的介绍Ext.Net GridPanel的Selection功能。
Ext.Net GridPanel Selection包括三种：
RowSelectionModel：行选择模型
CheckboxSelectionModel：带有复选框的行选择模型
CellSelectionModel：单元格选择模型
默认情况下，GridPanel使用RowSelectionModel，能够进行单选，如果要GridPanel能够进行多选，需要在GridPanel中添加属性：
&ext:GridPanel runat="server" ID="grid"
ColumnLines="true" Width="500" Height="200"
MultiSelect="true"&
下面我们来分别看一下这三种模型的用法
RowSelectionModel
效果如下：
实现代码：
&ext:GridPanel runat="server" ID="grid"
ColumnLines="true" Width="500" Height="200"
MultiSelect="true"&
在RowSelectionModel的配置中，属性Mode表示选择的类型，分别是Single（单选）、Multi（多选）和Simple（简单多选）
单选和多选的区别很明显，我们来说一下Multi和Simple的区别：
multi：多选，但需要使用键盘Ctrl、Shift来配合完成。在实际使用的过程中你会发现，单纯的鼠标单击并不能实现多选，需要同时按下Ctrl键才能多选，如果要选择一个区域，则可以同时按下Shift键。
Simple：多选，不需要Ctrl或Shift键的配合。只使用鼠标即可实现多选。
CheckboxSelectionModel
效果如图：
代码如下：
&ext:CheckboxSelectionModel runat="server"
Mode="Multi" InjectCheckbox="1"&
&/ext:CheckboxSelectionModel&
Mode属性与RowSelectionModel中的Mode属性功能相同，不在赘言。
InjectCheckbox属性用来决定Checkbox列显示在什么位置（第几列），默认为0，从第0列开始。
CellSelectionModel
效果如图：
代码如下：
&ext:CellSelectionModel runat="server"&&/ext:CellSelectionModel&
我试了一下，好像是只能选中一个单元格。
查了ExtJS API以后发现确实只能选择一个单元格，它同样也有一个Mode属性，但这个属性只有一个可用值：Single。
客户端获取选择的值
由于这系列比较偏重服务器端的处理，所以这个地方简单的说一下客户端获取值的方法，代码如下：
var selectedRows = grid.getSelectionModel().getSelection();
grid是我们的GridPanel，首选获取它的选择模型，得到模型之后，再从选择模型中得到选中的内容。
服务器端获取选择的值
对于服务器端来说，我们可以用同样的思路来获取选中的值。
var selectionModel = grid.GetSelectionModel() as RowSelectionM
if (selectionModel.SelectedRows.Count == 0)
X.MessageBox.Alert("提示", "没有选中行").Show();
string ids = string.E
foreach (var item in selectionModel.SelectedRows)
ids += "," + item.RecordID;
ids = ids.Trim(',');
X.MessageBox.Alert("提示", ids).Show();
注意：如果Store所关联的Model没有设置IDProperty，将导致无法获取RecordID
上面的代码是针对RowSelectionModel和CheckboxSelectionModel来说的，如果是CellSelectionModel，我们还可以获取到单元格的值等内容：
var cellModel = grid.GetSelectionModel() as CellSelectionM
//获取记录ID
var recordId = cellModel.SelectedCell.RecordID;
//获取单元格值
var cellValue = cellModel.SelectedCell.V
//获取列名称
var columnName = cellModel.SelectedCell.N
//获取列号
var columnIndex = cellModel.SelectedCell.ColI
//获取行号
var rowIndex = cellModel.SelectedCell.RowI
&可编辑的GridPanel
Ext.Net GridPanel 有两种编辑模式：编辑单元格和编辑行。
单元格编辑：
可以看出，单元格编辑的时候，只有单元格会进入编辑模式，而行编辑模式中则对编辑行的所有可编辑字段统一进行编辑。
要对Ext.Net GridPanel进行编辑，需要进行两步配置：
配置列的编辑控件（TextField、NumberField、DateField等）
配置编辑插件（CellEditing、RowEditing）
配置Grid列的编辑控件
在我们的例子中，只对姓名和年龄进行编辑，姓名使用的是TextField控件，年龄使用NumberField控件，列的配置如下：
&ColumnModel&
&ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server"&&/ext:RowNumbererColumn&
&ext:Column runat="server" ID="columnID" Width="100" Text="ID" DataIndex="ID"&&/ext:Column&
&ext:Column runat="server" ID="columnName" Width="200" Text="姓名" DataIndex="Name"&
&ext:TextField runat="server"&&/ext:TextField&
&/ext:Column&
&ext:Column runat="server" ID="columnGender" Width="50" Text="性别" DataIndex="Gender"&&/ext:Column&
&ext:NumberColumn runat="server" ID="columnAge" Width="60" Text="年龄" DataIndex="Age" Format=""&
&ext:NumberField runat="server" MinValue="18" MaxValue="150"&&/ext:NumberField&
&/ext:NumberColumn&
&/Columns&
&/ColumnModel&
配置Grid编辑插件
ExtJS中有两种Grid的编辑插件，我们将使用代码贴出来。
单元格编辑：
&ext:CellEditing runat="server" ClicksToEdit="1"&&/ext:CellEditing&
&/Plugins&
&ext:RowEditing runat="server" ClicksToEdit="1"&&/ext:RowEditing&
&/Plugins&
通过上面两个配置，我们已经可以使用Ext.Net GridPanel的编辑功能了。
阅读(...) 评论()查看: 1937|回复: 5
最后登录公司苏州软件园注册时间阅读权限100精华1积分1084帖子
性别男贡献90 相册
群:&群:&群:&我玩的应用:
&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN&&
&html&
& & &head&
& & &meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
& & &title&Row Editing Grid Example&/title&
& & &link rel=&stylesheet& type=&text/css& href=&ext-4.0.2a/resources/css/ext-all.css& /&
& & &link rel=&stylesheet& type=&text/css& href=&ext-4.0.2a/examples/shared/example.css& /&
& & &link rel=&stylesheet& type=&text/css& href=&ext-4.0.2a/examples/ux/css/CheckHeader.css& /&
& & &script type=&text/javascript& src=&ext-4.0.2a/bootstrap.js&&&/script&
& & &script type=&text/javascript& src=&ext-4.0.2a/locale/ext-lang-zh_CN.js&&&/script&
& & &script type=&text/javascript&&
& && &
Ext.Loader.setConfig({
& & enabled: true
});
Ext.Loader.setPath('Ext.ux', 'ext-4.0.2a/examples/ux');
Ext.require([
& & 'Ext.grid.*',
& & 'Ext.data.*',
& & 'Ext.util.*',
& & 'Ext.state.*',
& & 'Ext.form.*',
& & 'Ext.ux.CheckColumn'
]);
Ext.onReady(function(){
& & // Define our data model
& &Ext.define('Employee', {
& && &&&extend: 'Ext.data.Model',
& && &&&fields: [
& && && & {name:'userName',type:'string',sortable:true},
& && && & {name:'userAddress',type:'string',sortable:true},
& && && & {name:'userPermissions',type:'auto',sortable:true}
& && &&&]
& & });
& & var store = Ext.create('Ext.data.Store', {& &
& && &&&model: 'Employee',
& && &&&proxy: {
& && && && &type: 'ajax',
& && && && & url:'/ExportJCPTDataWeb/tUser.do',
& && &reader: {
& && &&&type: 'json'
& && &},
& && &writer:{
& && &&&type:'json'
& && &}& && &
& && &&&},
& && & autoLoad: true
& & });
& & var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
& && &&&clicksToMoveEditor: 1,
& && &&&autoCancel: false
& & });
& & // create the grid and specify what field you want
& & // to use for the editor at each column.
& & var grid = Ext.create('Ext.grid.Panel', {
& && &&&store: store,
& && &&&columns: [{
& && && && &header: '姓名',
& && && && &dataIndex: 'userName',
& && && && &flex: 1,
& && && && &id:'myGrid',
& && && && &editor: {
& && && && && & allowBlank: false
& && && && &}
& && &&&}, {
& && && && &header: '邮箱地址',
& && && && &dataIndex: 'userAddress',
& && && && &flex: 1,
& && && && &editor: {
& && && && && & allowBlank: false,
& && && && && & vtype: 'email'
& && && && &}
& && &&&}, {
& && && && &xtype: 'checkcolumn',
& && && && &header: '是否激活',
& && && && &dataIndex: 'userPermissions',
& && && && &width: 60,
& && && && &editor: {
& && && && && & xtype: 'checkbox',
& && && && && & cls: 'x-grid-checkheader-editor'
& && && && &}
& && &&&}],
& && &&&renderTo: 'editor-grid',
& && &&&width: 600,
& && &&&height: 400,
& && &&&title: '中石油物流系统集成组监控联系人列表',
& && &&&frame: true,
& && &&&// inline buttons
& && &&&dockedItems: [{
& && && && &xtype: 'toolbar',
& && && && &dock: 'bottom',
& && && && &ui: 'footer',
& && && && &layout: {
& && && && && & pack: 'center'
& && && && &},
& && && && &items: [{
& && && && && & minWidth: 80,
& && && && && & text: 'Save',
& && && && && & handler:function(saveButton){
& && && && && && &var grid = saveButton.ownerCt.ownerCt;
& && && && && && &//得到数据集合
& && && & var store = grid.getStore();
& && && & //数值与后台同步
& && && & store.sync();
& && && & //得到被改掉的数据records
& && && & var records = store.getUpdatedRecords();
& && && & alert(records);
& && && & Ext.Array.each(records,function(model){
& && && && &data.push(Ext.JSON.encode((model.data)));
& && && & });
& && && & //得到数据集合
& && && & var store = grid.getStore();
& && && & var data = [];
& && && & alert(data.join(&,&));
& && && & //得到被改掉的数据records
& && && & var records = store.getUpdatedRecords() ;
& && && & Ext.Array.each(records,function(model){
& && && && &data.push(Ext.JSON.encode((model.data)));
& && && && &mit();
& && && & });
& && && && && & }
& && && && &},{
& && && && && & minWidth: 80,
& && && && && & text: 'Reset',
& && && && && & handler:function(){
& && && & var grid = this.ownerCt.ownerCt;
& && && & var store = grid.getStore();
& && && & store.load();
& && && && && & }
& && && && &}]
& && &&&}, {
& && && && &&&xtype: 'toolbar',
& && && && &&&items: [{
& && && && &&&text: '添加用户',
& && && && &&&iconCls: 'employee-add',
& && && && &&&handler : function() {
& && && && && && &rowEditing.cancelEdit();
& && && && && && &// Create a record instance through the ModelManager
& && && && && && &var r = Ext.ModelManager.create({
& && && && && && && & userName: '用户名',
& && && && && && && & userAddress: '.cn',
& && && && && && && & userPermissions:1
& && && && && && &}, 'Employee');
& && && && && && &&&store.insert(0, r);
& && && && && && &&&rowEditing.startEdit(0, 0);
& && && && &}
& && && &&&}, '-', {
& && && && && & itemId: 'removeEmployee',
& && && && && & text: '移除用户',
& && && && && & iconCls: 'employee-remove',
& && && && && & handler: function() {
& && && && && && &&&var sm = grid.getSelectionModel();
& && && && && && &&&rowEditing.cancelEdit();
& && && && && && &&&store.remove(sm.getSelection());
& && && && && && &&&if (store.getCount() & 0) {
& && && && && && && && &sm.select(0);
& && && && && && &&&}
& && && && && & },
& && && && && & disabled: true
& && && && &}]
& && && & }],
& && &&&plugins: [rowEditing],
& && &&&listeners: {
& && && && &'selectionchange': function(view, records) {
& && && && && & grid.down('#removeEmployee').setDisabled(!records.length);
& && && && &}
& && &&&}
& & });
});
& & &/script&
& & &style type=&text/css&&
.employee-add {
&&background-image: url('ext-4.0.2a/examples/shared/icons/fam/user_add.gif') !
}
.employee-remove {
&&background-image: url('ext-4.0.2a/examples/shared/icons/fam/user_delete.gif') !
}
&/style&
& & &/head&
& & &body bgcolor=&grey&&
& & &div id=&editor-grid& align=&center& &&/div&
&/body&
&/html& 复制代码
最后登录公司苏州软件园注册时间阅读权限100精华1积分1084帖子
性别男贡献90 相册
群:&群:&群:&
哪位大虾帮忙看看什么问题
最后登录注册时间阅读权限0精华4积分2220帖子
性别男贡献72 相册
提示: 作者被禁止或删除 内容自动屏蔽
最后登录公司苏州软件园注册时间阅读权限100精华1积分1084帖子
性别男贡献90 相册
群:&群:&群:&
我看看，怎么这个出现了两次了，我的代码上没有出现两次呀
最后登录公司苏州软件园注册时间阅读权限100精华1积分1084帖子
性别男贡献90 相册
群:&群:&群:&
重复代码我删掉了，但是还是得不到数据，但是能把小箭头去掉了
最后登录注册时间阅读权限0精华4积分2220帖子
性别男贡献72 相册
提示: 作者被禁止或删除 内容自动屏蔽
经常参与各类话题的讨论，发帖内容较有主见
经常帮助其他会员答疑
长期对论坛的繁荣而不断努力，或多次提出建设性意见
USPCAT又一力作。
讲师不拖泥带水，详细讲解了20种常用的设计模式的理论和用法。
Powered byExtjs4 之grid组件
grid表格是extjs的核心组件之一，它提供了展示大量数据的最佳途径。Grid组件的重要特性包括：智能渲染、标准布局、数据视图、特性支持、虚拟滚动和编辑改进，这些特性共同缔造了功能强大的4.0grid组件。
智能渲染：在extjs4.0之前的版本中采用了&最小公分母&的策略来支持各种丰富的特性，这种方式会对每一个表格产生大量的标签，而这些标签对于简单表格来说是不必要的，而在4.0中默认的表格只会产生很少的标签，对于复杂的功能采用附加特性的方式实现，这对于提高数据的展示速度和表格的性能起到了巨大的作用。
标准布局：在ExtJs4.0中改变了原来直接处理内部标签和样式的布局方式，而是将表格划分为不同的组成部分，并使他们有机结合起来，这样就统一了表格和框架的渲染流程。
数据视图：在ExtJs4.0中新的gridView扩展自标准的DataView数据视图，这不但减少了代码冗余并且可以更简单的进行自定义。
特性支持：在ExtJs4.0之前的版本可以通过插件或者继承的方式对表格组件的功能进行扩展，但是这种扩展方式很难实现功能的灵活组合。4.0中使用了性的Grid基类Ext.grid.Feature，它提供了灵活定义表格特性的基础，任何Feature类都可以修改表格模版，来装饰或改变grid视图生成的标签。在新的grid类中RowWrap、RowBody和Grouping都是通过Feature方式实现的。
虚拟滚动：在ExtJs4.0中原生支持了渲染时数据的缓存，提供了一个虚拟的按需加载的数据视图，grid现在可以非常容易地支持几百条甚至几千条数据展示而不需要分页，这大大改进了grid的数据处理能力。
编辑改进：在ExtJs4.0之前的版本中开发者不得不使用editGrid类来支持表格的编辑功能，这很大程度上限制了程序的灵活性，在ExtJs4.0中提供了全新的编辑插件，它可以应用于任何grid实例。
1、表格面板grid
grid表格组件实在客户端展示大量数据的优秀途径，可以看作一个增强版的table，它使得获取、排序、过滤、分组、数据变得异常简单。
grid中主要集成了两大部分，分别是用于处理数据的Store和用于渲染的Columns。
下面一个简单的示例最简单的表格配置
可以看我另一篇文章 ,一个简单的grid &文章在这里
Ext.onReady(function(){
& & & & //创建表格数据
& & & & var datas = [
& & & & & & [100,'张三',24],
& & & & & & [200,'李四',30],
& & & & & & [300,'王五',29]
& & & & ];
& & & & //创建Grid表格组件
& & & & Ext.create('Ext.grid.Panel',{
& & & & & & title : '简单Grid表格示例',
& & & & & & renderTo: Ext.getBody(),
& & & & & & width:200,
& & & & & & height:130,
& & & & & & frame:true,
& & & & & & viewConfig: {
& & & & & & & & forceFit : true,
& & & & & & & & stripeRows: true//在表格中显示斑马线
& & & & & & },
& & & & & & store: {//配置数据源
& & & & & & & & fields: ['id','name','age'],//定义字段
& & & & & & & & proxy: {
& & & & & & & & & & type: 'memory',//Ext.data.proxy.Memory内存代理
& & & & & & & & & & data : datas,//读取内嵌数据
& & & & & & & & & & reader : 'array'//Ext.data.reader.Array解析器
& & & & & & & & },
& & & & & & & & autoLoad: true//自动加载
& & & & & & },
& & & & & & columns: [//配置表格列
& & & & & & & & {header: &id&, width: 30, dataIndex: 'id', sortable: true},
& & & & & & & & {header: &姓名&, width: 80, dataIndex: 'name', sortable: true},
& & & & & & & & {header: &年龄&, width: 80, dataIndex: 'age', sortable: true}
& & & & & & ]
& & & & });
表格组件的主要配置项和方法如下表所示
表1-1 Ext.grid.Panel主要配置项
配置项 参数类型 说明
columns Array 一个表格列配置对象的数组，每一个列配置对象都包括了header（列头）和数据来源的定义
columnLines Boolean 设置为true则显示纵向表格线，默认为false
forceFit Boolean 设置为true则强制列填充满可以利用的空间
hideHeaders Boolean 设置为true则隐藏列标题
scroll String/Boolean 设置表格滚动条，有效值包括both(垂直和水平滚动),horizontal(水平滚动)和vertical(垂直滚动).true等效于both,false等效none,默认值为true.
scrollDelta Number 设置鼠标滚轮滚动事的像素量，默认为40像素
sorttableColumns Boolean 设置为false则禁止通过表格中标题中的菜单项排序
表1-1 Ext.grid.Panel主要方法
方法名 说明
getSelectionModel:Ext.selection.Model 获取选择模式
getStore:Ext.data.Store 获取表格的数据集
getView:Ext.view.Table 获取表格的视图对象
hideHorzontalScroller:void 隐藏水平滚动条
hideVerticalScroller:void 隐藏垂直滚动条
scrollByDeltaX(Number deltaX):void 水平滚动表格,正数向右滚动,负数向左滚动,deltaX为滚动像素
scrollByDeltaY(Number deltaY):void 垂直向下滚动,deltaY为滚动像素
setScrollTop(Number deltaY):void 垂直向上滚动,deltaY为滚动像素
showHorzontalScroller:void 显示水平滚动条
showVerticalScroller:void 显示垂直滚动条
2、表格列Column
Ext.grid.column.Column类定义了表格内部与列相关的配置，其中包括列标题和数据展示的相关内容，下表中列出了该类的主要配置项
表2-1Ext.grid.column.Column主要配置项
配置项 参数类型 说明
align String 设置列标题和数据的对齐方式，默认为left
columns Array 设置组列，数组中的列将作为一组处理，组列不能排序但是可以隐藏和移动，组内的列可以移出组外，当所有的子列都被移出后组列将被自动销毁
dataIndex String 设置列与数据集中的数据对应关系，值为数据模型中的字段名称
draggable Boolean 设置列头是否可以移动，默认为true
flex Number 设置列宽占所有flex和的比例
groupable Boolean 设置在使用Ext.grid.feature.Grouping分组特性的情况下是否禁用该列在标题菜单中的分组功能
header String 设置列标题
hideable Boolean 设置为false则阻止用户隐藏该列，默认为true
menuDisabled Boolean 设置为true则禁用标题菜单，默认为fakse
renderer Function 设置列的自定义渲染函数
sortable Boolean 设置是否允许进行排序，默认为true，它将根据Ext.data.Store.remoteSort判断进行本地排序还是远程排序
text String 设置列标题，header配置优先
width Number 设置列宽
Column类有7个便利子类，为常用的数据类型提供了便利的展示方式，他们分别是：
Ext.grid.column.Boolean 布尔列
Ext.grid.column.Number 数字列
Ext.grid.column.Action 动作列
Ext.grid.column.Template 模版列
Ext.grid.RowNumber 行号列
Ext.tree.Column 树结构列（后面介绍）
2.1 布尔列Ext.grid.column.Boolean
Ext.grid.column.Boolean 定义了在表格列中显示布尔值的方式
表2-2 Ext.grid.column.Boolean只要配置项
配置项 参数类型 说明
falseText String 设置渲染false值对应的文本，默认为false
trueText String 设置渲染true值对应的文本，默认为true
undefinedText String 设置渲染undefined值对应的文本，默认为空字符串
2.2 数字列Ext.grid.column.Number
Ext.grid.column.Number 定义了在表格中展示数字值的方式。
配置项format，参数类型String，设置Ext.util.Format.number函数格式化字符串，默认为0，000.00
2.3 日期列Ext.grid.column.Date
format & &String & & &设置Date.format函数的格式化字符串，默认为Ext.data.defaultFormat
示例代码：
Ext.onReady(function(){
& & & & //创建表格数据
& & & & var datas = [
& & & & & & ['张三',true,new Date(),2500],
& & & & & & ['李四',false,new Date(),1500],
& & & & & & ['王五',false,new Date(),1000]
& & & & ];
& & & & //创建Grid表格组件
& & & & Ext.create('Ext.grid.Panel',{
& & & & & & title : 'Ext.grid.column.Column示例',
& & & & & & renderTo: Ext.getBody(),
& & & & & & width:300,
& & & & & & height:150,
& & & & & & frame:true,
& & & & & & store: {
& & & & & & & & fields: ['name','leader','birthday','salary'],
& & & & & & & & proxy: {
& & & & & & & & & & type: 'memory',
& & & & & & & & & & data : datas,
& & & & & & & & & & reader : 'array'//Ext.data.reader.Array解析器
& & & & & & & & },
& & & & & & & & autoLoad: true
& & & & & & },
& & & & & & columns: [//配置表格列
& & & & & & & & {header: &姓名&, width: 50, dataIndex: 'name'},
& & & & & & & & {header: &组长&, width: 50, dataIndex: 'leader',&
& & & & & & & & & & xtype: 'booleancolumn',//Ext.grid.column.Boolean布尔列
& & & & & & & & & & trueText: '是',
& & & & & & & & & & falseText: '否'
& & & & & & & & },
& & & & & & & & {header: &生日&, width: 100, dataIndex: 'birthday',&
& & & & & & & & & & xtype : 'datecolumn',//Ext.grid.column.Date日期列
& & & & & & & & & & format : 'Y年m月d日'//日期格式化字符串
& & & & & & & & },
& & & & & & & & {header: &薪资&, width: 50, dataIndex: 'salary',&
& & & & & & & & & & xtype: 'numbercolumn',//Ext.grid.column.Number数字列
& & & & & & & & & & format:'0,000'//数字格式化字符串
& & & & & & & & }
& & & & & & ]
& & & & });
2.4 动作列 Ext.grid.column.Action
Ext.grid.column.Action 将渲染一个图标或一系列图标到表格的单元格中，并为每一个图标创建响应函数。
配置项 参数类型 说明
altText String 设置应用于image元素上的alt属性，默认为空字符串
getClass Function 设置返回图标样式的函数
handler Function 设置图标点击事件的响应函数，该函数将被传入以下参数：&
view：TableView 表格视图&
rowIndex：Number 行索引&
colIndex:Number 列索引&
item：Object 条目&
e：Event点击事件对象
icon String 获取图标资源的url地址，默认为Ext.BLANK_IMAGE_URL
iconCls String 设置应用于图标的样式
items Array 包含多个图标定义的数组
scope Object 设置handler和getClass函数的作用域，默认为Column
stopSelection Boolean 默认为true阻止当动作发生时，当前行被选中
tooltip String 设置工具提示信息，需要初始化Ext.tip.QuickTipManager
{header: &操作&, width: 70,&
& & & & & & & & & & xtype: 'actioncolumn',//Ext.grid.column.Action动作列
& & & & & & & & & & items: [{
& & & & & & & & & & & & icon: 'images/edit.gif',//指定编辑图标资源的URL&
& & & & & & & & & & & & handler: function(grid, rowIndex, colIndex) {
& & & & & & & & & & & & & & //获取被操作的数据记录
& & & & & & & & & & & & & & var rec = grid.getStore().getAt(rowIndex);
& & & & & & & & & & & & & & alert(&编辑 & + rec.get('name'));
& & & & & & & & & & & & }
& & & & & & & & & & },{
& & & & & & & & & & & & icon: 'images/del.gif',//指定编辑图标资源的URL&
& & & & & & & & & & & & handler: function(grid, rowIndex, colIndex) {
& & & & & & & & & & & & & & var rec = grid.getStore().getAt(rowIndex);
& & & & & & & & & & & & & & alert(&删除 & + rec.get('name'));
& & & & & & & & & & & & } & & & & & & & &
& & & & & & & & & & },{
& & & & & & & & & & & & icon: 'images/save.gif',//指定编辑图标资源的URL&
& & & & & & & & & & & & handler: function(grid, rowIndex, colIndex) {
& & & & & & & & & & & & & & var rec = grid.getStore().getAt(rowIndex);
& & & & & & & & & & & & & & alert(&保存 & + rec.get('name'));
& & & & & & & & & & & & } & & & & & & & &
& & & & & & & & & & }]
& & & & & & & & }
2.5 模板列 Ext.grid.column.Template
Ext.grid.column.Template提供了通过模版渲染单元格内容的方式
tpl &String/XTemplate & &设置一个XTemplate模版对象或模版定义，模版数据将被传入其中
& & header: &描述&, width: 100,
& & xtype: 'templatecolumn',//Ext.grid.column.Template数字列
& & tpl : '{name}&tpl if=&leader == false&&不&/tpl&是组长'
2.6 行号列 Ext.grid.RowNumber
text &String &设置显示在标题中的文本或html代码段，默认值为&#160
width &Number &设置行号列的宽度，默认为23像素
2.7 自定义渲染函数
单元格渲染函数renderer是表格列的一项重要内容，可用来处理表格中的原始值，并将格式化后的结果返回，返回值决定了数据在单元格中的表现形式。灵活使用该函数可以实现个性化的数据展示效果。传入自定义渲染函数的参数有：
value：Mixed 当前单元格的值
metadata：Object 包含当前单元格信息的数据对象，由于设置单元格的样式和属性，该对象包含的属性有：
tdCls：String 应用到单元格TD元素上的样式名称
tdAttr： String 一个html属性定义字符串
style：String &应用到单元格TD元素上的样式字符串
record：Ext.data.Model 当前数据记录对象，其中包含了与该单元格处于同一行的其他列的数据。
rowIndex： Number 当前单元格的行索引
colInde： Number 列索引
store ：Ext.data.Store 包含表格所有数据的数据集对象
view：Ext.view.View 当前的表格视图。
3、选择模式Selection
选择模式用来处理数据视图中记录的选择状态，Ext.selection.Model是选择模式的基类，它的子类包括Ext.selection.CellModel（单元格选择模式），Ext.selection.CheckboxModel（复选框选择模式）和Ext.selection.RowModel（行选择模式）。
3.1 选择模式Ext.selection.Model
Ext.selection.Model是选择模式的基类，它定义了子类需要实现的接口，这个类不能直接被创建。
表3-1 Ext.selection.Model主要配置项
配置项 参数类型 说明
allowDeselect Boolean 设置是否允许用户在数据视图中执行撤选操作，该配置只在single单选模式下生效，默认为false
mode String 设置选择模式，有效值包括 SINGLE 单选，SIMPLE简单选择和MULTI多选，默认为SINGLE单选
表3-2 Ext.selection.Model 主要方法
方法名 说明
delslect(Ext.data.Model/Index records,Boolean supressEvent):void 执行撤选操作，records 数据记录或索引的数组，suppressEvent 是否抑制select事件
getLastSelected : Object 获取最近选择的记录数组
getSelection: Array 获取当前选中的记录数组
getSleectionMode: String 获取当前的选择模式
hasSelect: Boolean 获取是否有记录在被选择的状态
isFocused(Object rec):void 检查指定记录是否为最近选中的记录
isLocked(): Boolean 取得当前选择区域是否被锁定
isSelected(Record/Number record): Boolean 检查指定记录是否被选中
select(Model/Index records ,Boolean keepExiting ,Boolean suppressEvent) : void 选中记录 records 数据记录或索引的数组，keepExisting 保持，suppressEvent 是否抑制select事件
selectRange(Model/Number startRow,Model/Number endRow , [Boolean keepExisting],Object dir): void 选择范围内的所有行，startRow 开始索引，endRow 结束索引，keepExisting： true表示保持已有的选择，false则取消已有的选择
setLocked(Boolean locaked) : void 设置是否锁定当前的选择状态，locked：true表示锁定，false解锁
3.2 单元格选择模式 Ext.selection.CellModel
Ext.selection.CellModel是一个简单的选择模式，用于选择表格中的单一单元格。
getCurrentPosition(): Object 得到当前选择的单元格，如果没有选择单元格则返回null
selectByPosition(pos) :void &选中指定位置的单元格，pos为位置信息，格式为{row:2,column:2}
3.3 行选择模式 Ext.selection.RowModel
表3-3 Ext.selection.RowModel主要配置项
配置项 参数类型 说明
enableKeyNav Boolean 设置是否启用键盘导航，默认为true
simpleSelect Boolean 设置在行选择模式下是否启用简单选择模式，如果启用则不需要按下crtl键只需通过鼠标点击就可以实现多选
multiSelect Boolean 设置在行选择模式下是否支持多选
示例代码：
simpleSelect : true,//启用简单选择功能&
& & & & & & multiSelect : true,//支持多选
& & & & & & selType: 'rowmodel',//设置为单元格选择模式Ext.selection.RowModel
& & & & & & tbar : [{
& & & & & & & & text : '取得所选行',
& & & & & & & & handler : function(){
& & & & & & & & & & var msg = '';
& & & & & & & & & & var rows = grid.getSelectionModel().getSelection();
& & & & & & & & & & for(var i = 0; i & rows. i++){
& & & & & & & & & & & & msg = msg + rows[i].get('name') + '\n';
& & & & & & & & & & }
& & & & & & & & & & alert(msg);
& & & & & & & & }
& & & & & & }]
3.4 复选框选择模式 Ext.selection.CheckboxModel
Ext.selection.CheckboxModel扩展自Ext.selection.RowModel 其配置项如下;
checkOnly & & & & & Boolean & 设置为true则只能通过点击checkbox列进行选择，默认为false
injectCheckbox & Mixed & & &设置注入复选框的位置，有效值可以是一个数字，false，会字符串first，last，默认为0
需要注意的是，Ext.selection.CheckboxModel没有注册selection命名空间下的别名，导致不能直接使用，因此需要编写别名注册代码，示例如下：
//注册复选框选择模式别名为selection.checkboxmodel
Ext.ClassManager.setAlias('Ext.selection.CheckboxModel','selection.checkboxmodel');
multiSelect : true,//支持多选
selModel: {
& & elType : 'checkboxmodel'//复选框选择模式Ext.selection.CheckboxModel
4、表格特性 Feature
Ext.grid.feature.Feature是一类针对Ext.grid.Panel的特殊插件，它提供了一些扩展点。其子类包括：
Ext.grid.feature.RowBody &表格行体
Ext.grid.feature.Summary 表格汇总
Ext.grid.feature.Grouping 表格分组
Ext.grid.feature.GroupingSummary 分组汇总
4.1 表格行体 Ext.grid.feature.RowBody&
行体特性为表格追加了tr标签，它跨越了原始表格的所有列。该特性在表格中展示一些描述性的特殊信息时非常有用，行体在默认状态下是隐藏的，如果需要展示行体必须覆盖geyAdditionalData方法。
使用行体会自动在表格视图中暴露已rowbody为前缀的事件，示例如下：
features: [Ext.create('Ext.grid.feature.RowBody',{
& & & & & & & & getAdditionalData: function(data, idx, record, orig) {
& & & & & & & & & & var headerCt = this.view.headerCt,
& & & & & & & & & & & & colspan &= headerCt.getColumnCount();//获取表格的列数
& & & & & & & & & & return {
& & & & & & & & & & & & rowBody: record.get('introduce'),//指定行体内容
& & & & & & & & & & & & rowBodyCls: 'rowbodyColor',//指定行体样式
& & & & & & & & & & & & rowBodyColspan: colspan//指定行体跨列的列数
& & & & & & & & & & };
& & & & & & & & }
& & & & & & })]
4.2 表格汇总 Ext.grid.feature.Summary
表格汇总特性将在表格的底部显示一个汇总行，关于汇总行有2点需要注意：
1、汇总值的计算，汇总值需要根据表格的每一列进行计算，计算方式通过column中的summaryType配置项进行指定，内置的汇总计算类型包括：count 计数；sum &求和；min 最小值；max 最大值；average 平均值。
2、汇总值的渲染，与column的渲染方式相同，汇总值的渲染支持summaryRenderer函数，该函数是可选的，传入函数的参数有：
value{Object}:合计值
data{Objject}:包含所有合计值的行数据
field{String}:进行求和计算的字段名
示例代码：
Ext.onReady(function(){
& & & & //创建表格数据
& & & & var datas = [
& & & & & & ['张三',2500],
& & & & & & ['李四',1500]
& & & & ];
& & & & //创建Grid表格组件
& & & & Ext.create('Ext.grid.Panel',{
& & & & & & title : 'Ext.grid.feature.Summary示例',
& & & & & & renderTo: Ext.getBody(),
& & & & & & width:300,
& & & & & & height:150,
& & & & & & frame:true,
& & & & & & store: {
& & & & & & & & fields: ['name','salary','introduce'],
& & & & & & & & proxy: {
& & & & & & & & & & type: 'memory',
& & & & & & & & & & data : datas,
& & & & & & & & & & reader : 'array'//Ext.data.reader.Array解析器
& & & & & & & & },
& & & & & & & & autoLoad: true
& & & & & & },
& & & & & & features: [{
& & & & & & & & ftype: 'summary'//Ext.grid.feature.Summary表格汇总特性
& & & & & & }],
& & & & & & columns: [//配置表格列
& & & & & & & & {header: &姓名&, flex: 1, dataIndex: 'name',&
& & & & & & & & & & summaryType: 'count',//求数量
& & & & & & & & & & summaryRenderer: function(value){
& & & & & & & & & & & & return '员工总数：'+value
& & & & & & & & & & }
& & & & & & & & },
& & & & & & & & {header: &薪资&, flex: 1, dataIndex: 'salary',&
& & & & & & & & & & summaryType: 'average',//求平均值
& & & & & & & & & & summaryRenderer: function(value){
& & & & & & & & & & & & return '平均薪资：'+value
& & & & & & & & & & }
& & & & & & & & }
& & & & & & ]
& & & & });
4.3 表格分组 Ext.grid.feature.Grouping
表格分组特性将表格按照分组的方式进行聚合展示，在每一个分组标题之下展示与之匹配的数据记录，分组之后的数据可以展开或收缩，该特性有以下3点需要注意的地方：
新增事件：包括 groupclick、groupdblclick、groupcontextmenu、groupexpand、groupcollapse。
标题栏扩展：标题菜单中会增加分组相关功能，通过enableGroupingMenu配置项来控制该功能是否启用。
定义分组标题：功过groupHeaderTpl可以定义分组标题显示模版。
表4-1Ext.grid.feature.Grouping 主要配置项
配置项 参数类型 说明
depthToIndent Number 设置分组数据的缩进，默认为17像素
enableGroupingMenu Boolean 设置是否启用标题菜单中的分组功能，默认为true
enableNoGroups Boolean 设置是否允许用户关闭分组，默认为true
groupByText String 设置显示在分组菜单中的分组功能名称，默认为group By This Field
groupHeaderTpl String 设置分组标题模板，默认为Group:{name}
hideGroupedHeader Boolean 设置是否隐藏分组标题，默认为false
showGroupsText String 设置标题菜单中是否分组显示文字说明，默认为 show in groups
startCollapsed Boolean 设置分组是否默认收缩，默认为false
示例代码：
Ext.onReady(function(){
& & & & //创建表格数据
& & & & var datas = [
& & & & & & ['张三','男',29],['李四','女',30],
& & & & & & ['王五','男',27],['赵六','女',31]
& & & & ];
& & & & //创建Grid表格组件
& & & & Ext.create('Ext.grid.Panel',{
& & & & & & title : 'Ext.grid.feature.Grouping示例',
& & & & & & renderTo: Ext.getBody(),
& & & & & & width:300,
& & & & & & height:150,
& & & & & & frame:true,
& & & & & & store: {
& & & & & & & & fields: ['name','sex','age'],
& & & & & & & & groupField: 'sex',//设置分组字段
& & & & & & & & proxy: {
& & & & & & & & & & type: 'memory',
& & & & & & & & & & data : datas,
& & & & & & & & & & reader : 'array'//Ext.data.reader.Array解析器
& & & & & & & & },
& & & & & & & & autoLoad: true
& & & & & & },
& & & & & & features: [Ext.create('Ext.grid.feature.Grouping', {
& & & & & & & & groupByText : '用本字段分组',
& & & & & & & & showGroupsText : '显示分组',
& & & & & & & & groupHeaderTpl: '性别: {name} ({rows.length})', //分组标题模版
& & & & & & & & startCollapsed: true //设置初始分组是否收起&
& & & & & & })],
& & & & & & columns: [//配置表格列
& & & & & & & & {header: &姓名&, flex: 1, dataIndex: 'name'},
& & & & & & & & {header: &性别&, flex: 1, dataIndex: 'sex'},
& & & & & & & & {header: &年龄&, flex: 1, dataIndex: 'age'}
& & & & & & ]
& & & & });
4.4 分组汇总 Ext.grid.feature.GroupingSummary
分组汇总特性结合了Grouping分组和summary汇总两个特性的特点，它在每一个分组下增加一行显示汇总数据，其相关配置可以参考Grouping和summary的配置项。
5、表格插件plugin
为了扩展表格组件已有功能，除了前面介绍的特性之外，extjs还提供了表格的扩展插件，通过插件实现表格的编辑，拖拽等功能。
单元格编辑插件：Ext.grid.plugin.CellEditing
行编辑插件：Ext.grid.plugin.RowEditing
拖拽插件： Ext.grid.plugin.DragDrop
5.1 单元格编辑插件 Ext.grid.plugin.CellEditing
Ext.grid.plugin.CellEditing插件为grid组件注入了单元格级别的编辑功能，同一时间只能有一个单元格处于编辑状态，表单字段作为编辑器，如果表格中的某列没有指定编辑器则该列不能被编辑。其主要配置项如下：
clicksToEdit & Number & 设置点击单元格进入编辑模式的点击次数，默认为2
示例代码如下：
Ext.onReady(function(){
& & & & //初始化提示信息
& & & & Ext.QuickTips.init();
& & & & //创建表格数据
& & & & var datas = [
& & & & & & ['张三',new Date(),2500],
& & & & & & ['李四',new Date(),1500],
& & & & & & ['王五',new Date(),1000]
& & & & ];
& & & & //创建Grid表格组件
& & & & Ext.create('Ext.grid.Panel',{
& & & & & & title : 'Ext.grid.plugin.CellEditing示例',
& & & & & & renderTo: Ext.getBody(),
& & & & & & width:300,
& & & & & & height:150,
& & & & & & frame:true,
& & & & & & store: {
& & & & & & & & fields: ['name','birthday','salary'],
& & & & & & & & proxy: {
& & & & & & & & & & type: 'memory',
& & & & & & & & & & data : datas,
& & & & & & & & & & reader : 'array'//Ext.data.reader.Array解析器
& & & & & & & & },
& & & & & & & & autoLoad: true
& & & & & & },
& & & & & & plugins: [
& & & & & & & & Ext.create('Ext.grid.plugin.CellEditing', {
& & & & & & & & & & clicksToEdit: 1//设置鼠标单击1次进入编辑状态
& & & & & & & & })
& & & & & & ],
& & & & & & selType: 'cellmodel',//设置为单元格选择模式
& & & & & & columns: [//配置表格列
& & & & & & & Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}),
& & & & & & & {header: &姓名&, width: 50, dataIndex: 'name',
& & & & & & & & & & editor: {//文本字段
& & & & & & & & & & & & xtype:'textfield',
& & & & & & & & & & & & allowBlank:false
& & & & & & & & & & }
& & & & & & & & },
& & & & & & & & {header: &生日&, width: 100, dataIndex: 'birthday',&
& & & & & & & & & & xtype : 'datecolumn',//Ext.grid.column.Date日期列
& & & & & & & & & & format : 'Y年m月d日',//日期格式化字符串
& & & & & & & & & & editor: {//日期字段
& & & & & & & & & & & & xtype:'datefield',
& & & & & & & & & & & & allowBlank:false
& & & & & & & & & & }
& & & & & & & & },
& & & & & & & & {header: &薪资&, width: 50, dataIndex: 'salary',&
& & & & & & & & & & xtype: 'numbercolumn',//Ext.grid.column.Number数字列
& & & & & & & & & & format:'0,000',//数字格式化字符串
& & & & & & & & & & editor: {//数字字段
& & & & & & & & & & & & xtype:'numberfield',
& & & & & & & & & & & & allowBlank:false
& & & & & & & & & & }
& & & & & & & & }
& & & & & & ]
& & & & });
保存编辑后的数据有2中基本方式
1.监听表格的edit事件，在每一次编辑后该事件都会触发，在事件处理函数中奖修改后的数据保存到服务器中，例如：
grid.on('edit',onEdit,this);
function onEdit(e){
& & //执行ajax请求将数据提交至服务器
& & mit();
2、建立单独的数据保存处理函数，该函数有用户决定何时触发，在函数中获取所有修改过的表格数据，一次性将多条修改后的数据同步到服务器。
5.2 行编辑插件：Ext.grid.plugin.RowEditing
Ext.grid.plugin.RowEditing为grid组件注入了行级别的编辑功能，编辑开始时会显示一个小的浮动面板，每一个配置了编辑器的表格列都将以字段的形式显示在面板上，没有配置编辑器的列将以文本的形式显示在面板中。其配置项有
autoCancel &Boolean & 设置在切换所编辑的行时是否自动取消任何未确定的数据修改，默认为true。
clicksToMoveEditor Number &设置编辑器移动到新行鼠标需要点击的次数，默认同clicksToEdit的值一致
errorSummary &Boolean & &设置是否显示一个展开所有字段验证信息的工具提示，默认为true
修改上节的代码，将编辑器模式切换为行编辑模式。
&plugins: [
& & & &//行编辑模式
& & Ext.create('Ext.grid.plugin.RowEditing', {
& & clicksToEdit: 1
5.3 拖拽插件： Ext.grid.plugin.DragDrop
Ext.grid.plugin.DragDrop 插件为表格视图提供了拖放功能，它自动创建了特殊的DragZone和Ext.dd.DropZone实例来协作完成拖放功能。
ddGroup & & & & & & String & & & & & & & & & & & &设置拖放组名称，拖放操作只能在相同的组内进行，默认为TreeDD
dragGroop & & & & & String & & & & & & & & & & & 设置拖拽组名称
dropGroup & & & & &String & & & & & & & & & & & &设置释放组名称
enableDrag & & & & &Boolean & & & & & & & & & 设置是否启用拖动功能，默认为true
enableDrop & & & & &Boolean & & & & & & & & & 设置是否启用释放功能，默认为true
示例代码：
viewConfig: {
& & & & & & & & plugins: [
& & & & & & & & & & //行编辑模式
& & & & & & & & & & Ext.create('Ext.grid.plugin.DragDrop',{
& & & & & & & & & & & & dragGroup: 'grid1',//拖拽组名称
& & & & & & & & & & & & dropGroup: 'grid2'//拖放组名称
& & & & & & & & & & })
& & & & & & & & ]
& & & & & & },
viewConfig: {
& & & & & & & & plugins: [
& & & & & & & & & & //行编辑模式
& & & & & & & & & & Ext.create('Ext.grid.plugin.DragDrop',{
& & & & & & & & & & & & dragGroup: 'grid2',//拖拽组名称
& & & & & & & & & & & & dropGroup: 'grid1'//拖放组名称
& & & & & & & & & & })
& & & & & & & & ]
& & & & & & }
6、表格分页
当表格数据量比较大时，对数据进行分页显示是常见的处理方法，在extjs中分页只需要引入分业工具栏Ext.toolbar.Paging就可以实现基本的分页功能。示例如下：
Ext.onReady(function(){
& & & & var itemsPerPage = 2;//指定分页大小
& & & & & &
& & & & var store = Ext.create('Ext.data.Store', {
& & & & & & autoLoad: {start: 0, limit: itemsPerPage},
& & & & & & fields:['id', 'name', 'age'],
& & & & & & pageSize: itemsPerPage, //设置分页大小
& & & & & & proxy: {
& & & & & & & & type: 'ajax',
& & & & & & & & url: 'jsonServer.', &//请求的服务器地址
& & & & & & & & reader: {
& & & & & & & & & & type: 'json',
& & & & & & & & & & root: 'rows',
& & & & & & & & & & totalProperty: 'results'
& & & & & & & & }
& & & & & & }
& & & & });
& & & & //创建Grid表格
& & & & Ext.create('Ext.grid.Panel',{
& & & & & & title : 'Ext.toolbar.Paging示例',
& & & & & & renderTo: Ext.getBody(),
& & & & & & width:400,
& & & & & & height:150,
& & & & & & frame:true,
& & & & & & store: store,
& & & & & & columns: [//配置表格列
& & & & & & & & {header: &id&, width: 30, dataIndex: 'id', sortable: true},
& & & & & & & & {header: &姓名&, width: 80, dataIndex: 'name', sortable: true},
& & & & & & & & {header: &年龄&, width: 80, dataIndex: 'age', sortable: true}
& & & & & & ],
& & & & & & bbar: [{
& & & & & & & & xtype: 'pagingtoolbar',
& & & & & & & & store: store, & //这里需要指定与表格相同的store
& & & & & & & & displayInfo: true，
& & & & & & & & displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
& & & emptyMsg: &当前查询条件无数据,请重新查询&
& & & & & &&
& & & & & & }]
& & & & });
服务器端返回的数据格式为:
{results:6 ,rows:[{ id : 0 , name : 'tom' , age : 24 },{ id : 1 , name : 'jack' , age : 18 }]}
您对本文章有什么意见或着疑问吗？请到您的关注和建议是我们前行的参考和动力&&
您的浏览器不支持嵌入式框架，或者当前配置为不显示嵌入式框架。