在做报表的时候,需要将grid的列数做成活的,列数有数据库里的字段确定,这据需要将grid的列数做成动态的,经过多次实验已成,如下:
后台返回的json:
{'action':true,'message':'error!','data':[
{'number':'1','text1': '3','info1': '4','special1': '5'}
],'columModle':[
{'header': '序号','dataIndex': 'number','width':40},
{'header': '编码','dataIndex': 'text1'},
{'header': '名称','dataIndex': 'info1'},
{'header': '金额','dataIndex': 'special1'}
],'fieldsNames':[{name: 'number'},
{name: 'text1'}, {name: 'info1'},
{name: 'special1'}]}
var cm = new Ext.grid.ColumnModel(json.columModle);
var ds = new Ext.data.JsonStore({
data:json.data,
fields:json.fieldsNames
});
var grid = new Ext.grid.GridPanel({
region: 'center',
split: true,
border:false,
cm:cm,
ds:ds
});
grid.render(document.body);
new Ext.Viewport({
layout: 'border',
split: true,
items: [grid]
});
对于Ext动态grid这个问题,好多人都问过我,还有就是如何做多行表头,就是表头有两行以上,其中一列跨下边几列,对于多行表头的问题在这一会半会会说不清楚,只能告诉大家需要自己写插件。咱们还是说说动态表头的问题。
简单的说就是:从后台拼出json字符串--->前台取得字符串,并转化为json----->根据json创建grid
1.从后台拼出json字符串
“{'action':true,'message':'error!','data':[
{'number':'1','text1': '3','info1': '4','special1': '5'}
],'columModle':[
{'header': '序号','dataIndex': 'number','width':40},
{'header': '编码','dataIndex': 'text1'},
{'header': '名称','dataIndex': 'info1'},
{'header': '金额','dataIndex': 'special1'}
],'fieldsNames':[{name: 'number'},
{name: 'text1'}, {name: 'info1'},
{name: 'special1'}]}”
2.前台取得字符串,并转化为json
Ext.Ajax.request({
url: '自己的url',
params: 'method=自己的方法',
method: 'POST',
success: function(rs,request){
var result = rs.responseText;//拿到结果集,此时为字符串
var json = Ext.util.JSON.decode(result);//将字符串转换为json类型
},
failure: function(rs,request){
}
});
3.根据json创建grid
Ext.Ajax.request({
url: '自己的url',
params: 'method=自己的方法',
method: 'POST',
success: function(rs,request){
var result = rs.responseText;//拿到结果集,此时为字符串
var json = Ext.util.JSON.decode(result);//将字符串转换为json类型
var cm = new Ext.grid.ColumnModel(json.columModle);
var ds = new Ext.data.JsonStore({
data:json.data,
fields:json.fieldsNames
});
var grid = new Ext.grid.GridPanel({
region: 'center',
split: true,
border:false,
cm:cm,
ds:ds
});
// grid.render(document.body);
new Ext.Viewport({
layout: 'border',
split: true,
items: [grid]
});
},
failure: function(rs,request){
}
});
注意的地方:首先grid必须在sucsess方法里实例,否则会报错,json数据也只在sucess方法里起作用。Ext的灵魂就是json很多控件都可以用以上方法实现。
分享到:
相关推荐
2. **列配置**:EXTGRID允许自定义列,包括列宽、标题、对齐方式、可排序性等,可以展示不同类型的数据,如文本、数字、日期等。 3. **分页**:EXTGRID支持分页功能,用户可以轻松浏览大量数据,提高性能。 4. **...
4. **启用CellEditing**:引入EXT JS的CellEditing插件,并将其添加到Grid Panel。通过配置`clicksToEdit`属性,我们可以设定用户需要点击单元格多少次才能启动编辑模式。 5. **监听事件**:为了处理数据的保存,...
1. **Ext JS Grid简介**:Ext JS Grid组件提供了一个可配置的表格视图,能够动态地加载和显示大量数据。它由多个部分组成,如Store(存储数据)、Columns(列定义)、Selection Model(选择模型)等。 2. **数据源...
1. **创建EXT Grid**:首先,你需要创建一个EXT Grid实例,定义列模型、数据源、以及任何其他必要的配置项。例如,你可以使用`Ext.create('Ext.grid.Panel', { ... })`来创建Grid,并设置`columns`,`store`等属性。...
Grid是一种用户界面元素,用于显示二维数据,每个数据行对应一个记录,列则代表数据的不同属性。在Ext JS 2.0中,Grid组件提供了丰富的交互性和定制性,如排序、过滤、编辑等功能。 分页机制的实现主要涉及两个部分...
在EXTJS中,动态GRID指的是可以实时调整列宽、列数甚至列结构的网格视图,以适应不同的数据需求和用户界面变化。 1. 动态列创建与删除: EXTJS的Grid Panel支持在运行时动态添加或移除列。这可以通过调用`columns....
- **reconfigure(Ext.data.Store store, Ext.grid.ColumnModel colModel)**: 重新配置数据存储器和列配置模型,通常用于动态改变表格的数据或列结构。 #### 三、Ext.grid.Column `Ext.grid.Column`代表了表格中的...
在IT行业中,ExtJS是一个广泛使用的JavaScript库,用于构建富客户端的Web应用程序。它提供了丰富的组件库,包括数据...在阅读这篇博客时,可以参照给出的"extgrid"文件,查看具体的代码实现,以便更好地理解和学习。
ExtGrid API 提供了丰富的功能,包括数据分页、排序、筛选、编辑以及自定义列等,使得开发人员可以轻松地创建动态、交互式的表格视图。 1. **数据绑定**:ExtGrid API 支持两种主要的数据绑定模式——Store 和 ...
var grid = Ext.create('Ext.grid.Panel', { title: '论坛帖子列表', store: store, // 绑定数据存储 columns: [ // 定义列配置 { text: '设备编号', dataIndex: 'deviceno', flex: 1 }, { text: '标题', ...
3. **生成GridPanel**:使用动态添加的列信息创建ColumnModel,进一步创建GridPanel并显示数据。 #### 2.2 Excel导出实现 在Ext中实现Excel导出,可以通过以下几种方式: 1. **导出当前Grid中的数据**:可以利用...
例如,为数字列添加过滤器: ```javascript { header: 'Age', dataIndex: 'age', filter: { type: 'number' } } ``` 4. **事件监听**: 为了响应用户对过滤器的操作,比如打开、关闭、更改过滤条件,你可以监听...
3. **表格(Grid)**:设置列配置,关联数据模型,并添加到页面布局中。 4. **分页工具栏(Pager)**:添加到Grid下方,与Store关联,自动处理分页逻辑。 在代码实现过程中,需要使用EXT JS的MVC(Model-View-...
- 首先,我们需要创建一个继承自EXTJS的`Ext.grid.GridView`的自定义View类。这个类将覆盖默认的渲染逻辑,以便在表格底部插入合计行。 - 在`GridSummary.js`文件中,我们可以定义这个类,并重写`onRender`方法,...
- **添加Filter UI**:在列头显示过滤器图标,可以通过`headerMenu`或`menuItems`配置项来控制过滤器菜单的显示。 - **监听Filter事件**:当用户应用过滤条件时,需要监听`filterchange`事件,以便在后台处理数据...
在EXT中,树(Tree)和表格(Grid)是两种重要的数据展示组件,它们可以单独使用,也可以结合成树表(TreeGrid)以同时展示层次结构和表格数据。 在EXT树表中,分页(Pagination)是一项关键功能,用于处理大量数据...
var grid = new Ext.grid.GridPanel({ ... viewConfig: { forceFit: true, enableGroupingMenu: true }, ... }); ``` ### 三、EXTJS 排序 排序是数据展示中非常重要的功能之一,EXTJS 提供了灵活的排序...
2. **数据绑定**:Ext JS的数据模型和Store机制允许我们将数据模型与UI组件(如Grid Panel)绑定,实现数据的实时更新,类似于Excel中的动态数据更新。 3. **公式和计算**:Excel的一大特点是其内置的公式和函数...
10. **异步加载**:配合`Store`的异步加载机制,Grid可以在需要时动态加载数据,减少初始加载时间。 在IDE如MyEclipse 5.5中开发EXTJS应用,开发者可以利用其内置的JavaScript编辑器和调试工具,提高代码编写和调试...