问题:在做一个项目时,后台通过json传入前台数据,但是后台打印的是三条数据,前台只显示一条数据。
json格式如下:
{"sqksm":[{"carbonLayerNum":1,"endArea":0,"endTime":"","id":0,"shiHouEndArea":0,"shiHouStartArea":0,"startArea":0,"start Time":"","treeId":32,"treeName":"黑松","tree_lm_ksm_rate":0},{"carbonLayerNum":2,"endArea":0,"endTime":"","id":0,"shiHouEn dArea":0,"shiHouStartArea":0,"startArea":0,"startTime":"","treeId":33,"treeName":"紫杉","tree_lm_ksm_rate":0},{"carbonLaye rNum":2,"endArea":0,"endTime":"","id":0,"shiHouEndArea":0,"shiHouStartArea":0,"startArea":0,"startTime":"","treeId":34," treeName":"铁杉","tree_lm_ksm_rate":0}],"total":3}
前台代码如下:
var jixian_kusismu_store = new Ext.data.JsonStore({ url:'listXiangMuShiQianKusiMu.do',/**请求用户数据库*/ totalProperty : 'total', root:'sqksm', fields : [/**用到的json域*/ { name : 'id' },{ name:'treeId' },{ name:'treeName' },{ name:'carbonLayerNum' },{ name:'startTime' },{ name:'endTime' },{ name: 'tree_lm_ksm_rate' },{ name:'startArea' },{ name:'endArea' } ] }); jixian_kusismu_store.load({ params : { start : 0, limit : 20 } });
细心的人可发现:传回的数据的json数据的id都是0,导致extjs无法找到主键,这是是extjs的一个bug。 在grid的getStore的load的回调函数中,用getCount到到的是一条数据。也就是服务端返回了多条数据,但是extjs只解释了一条数据,同样,extjs也不能解析符合主键。
解决方法:回传数据id为主键即可。
{"sqksm":[{"carbonLayerNum":1,"endArea":0,"endTime":"","id":12,"shiHouEndArea":0,"shiHouStartArea":0,"startArea":0,"star tTime":"","treeId":32,"treeName":"黑松","tree_lm_ksm_rate":0},{"carbonLayerNum":2,"endArea":0,"endTime":"","id":13,"shiHou EndArea":0,"shiHouStartArea":0,"startArea":0,"startTime":"","treeId":33,"treeName":"紫杉","tree_lm_ksm_rate":0},{"carbonLa yerNum":2,"endArea":0,"endTime":"","id":14,"shiHouEndArea":0,"shiHouStartArea":0,"startArea":0,"startTime":"","treeId":3 4,"treeName":"铁杉","tree_lm_ksm_rate":0}],"total":3}
相关推荐
在ExtJs中,GridPanel是用于展示数据的常用组件,它可以提供丰富的功能,如排序、分页、筛选等。在实际应用中,我们经常需要监听用户的交互行为,比如双击行进行进一步的操作。本篇文章将深入讲解如何在ExtJs ...
在实际应用中,我们经常需要在GridPanel底部显示一行“合计”行,以便对某一列或多列的数据进行求和或其他统计操作。这篇博文“给Extjs的GridPanel增加‘合计’行”将指导我们如何实现这一功能。 首先,我们需要...
displayMsg: '显示第{0}条到第{1}条记录,一共{2}条', displayInfo: true }); ``` 创建了一个`PagingToolbar`实例,设置了每页显示的记录数和分页信息的显示方式。 7. **创建GridPanel** ```javascript ...
ExtJS GridPanel是Sencha ExtJS框架中的一个核心组件,用于创建数据网格,展示大量结构化数据。在本文中,我们将深入探讨GridPanel的操作,包括其功能、配置选项以及如何扩展GridPanel以满足复杂需求。 首先,...
ExtJS表格面板(GridPanel)是Sencha Ext JS框架中的一个核心组件,它用于展示大量结构化数据。在本文中,我们将深入探讨如何创建并使用一个完整的ExtJS GridPanel实例,以及与其相关的源码和工具。 首先,让我们...
例如,在ExtJS中,我们可以创建一个新的`Ext.toolbar.Toolbar`实例,并将其附加到`gridPanel`的顶部或底部。 ```javascript var toolbar = Ext.create('Ext.toolbar.Toolbar', { dock: 'top', // 或者 'bottom' ...
数据的原始值,对应于数据模型中的一条记录的某个字段。 7. **rowIndex** 和 **colIndex**: 这两个属性分别表示单元格所在的行索引和列索引,它们用于定位 GridPanel 中的特定单元格。 8. **store**: 除了...
列信息由类Ext.grid.ColumnModel定义,这是一个数组,其中每一个元素代表一个列,包含列头显示文本(header)、列对应的记录集字段(dataIndex)、列是否可排序(sortable)、列的渲染函数(renderer)、宽度(width)、格式化...
Ext GridPanel 主要有以下几个组成部分: 1. **Store**:存储数据的模型。 2. **Column Model**:定义列的信息。 3. **View**:显示数据的视图。 4. **Selection Model**:处理选中行的逻辑。 5. **Renderer**:...
- `grid` 是EXTJS GridPanel的一个实例,它配置了数据存储`store`、列模型`cloumn`,以及其他样式和交互属性如`stripeRows`, `trackMouseOver`,以及高度和宽度等。 6. **渲染Grid**: - 最后,`grid` 渲染到页面...
在GridPanel中,每一行数据代表一个记录,而我们希望在每行数据后面添加一组操作按钮,以便用户可以对单个记录进行操作。 要实现这个功能,我们需要做以下几个关键步骤: 1. **配置列模型**:在GridPanel的配置中...
EXTJS 是一个流行的JavaScript库,用于构建桌面级的Web应用程序。在EXTJS中,属性设置是创建和定制组件的关键部分。这里我们将深入探讨EXTJS 3.1版本中涉及的一些属性设置、数据存储以及选择操作。 首先,我们来看...
你可以遍历Store中的每一条记录,将每个字段的值用逗号连接起来,然后每行数据之间用换行符分隔。 3. **创建隐藏的`<a>`标签**:为了触发文件下载,EXTJS4可以创建一个隐藏的`<a>`标签,其`href`属性设置为生成的...
`pgBar`是实例化的分页工具栏,设置每页显示15条记录,并关联到`ds`数据存储。`displayInfo`和`displayMsg`等配置提供了页面信息的显示。 3. **事件监听**:`ds`数据存储在`beforeload`事件触发时,会更新请求参数...
这两个参数用于实现分页,`start`表示从哪一条记录开始,`limit`则表示一次加载多少条记录。 例如,`start: 0, limit: 5`意味着加载第0条至第4条记录。每次用户翻页,`start`值会递增`limit`的值,以获取下一页的...
- **多选功能**:启用 GridPanel 的多选功能,以便一次删除多条记录。 - **确认提示**:在实际删除前弹出确认对话框。 - **更新数据**:删除选中的数据行,并从 Store 中移除对应的数据项。 #### 五、高级技巧 1...
5. **事件监听**:在ExtJS的GridPanel中,可以监听`load`事件来更新UI,显示新加载的数据。同时,分页条会根据store的状态自动更新,用户可以通过点击页码或使用导航按钮切换页面。 6. **自定义分页栏**:如果需要...
工作流设计器的前台界面很可能使用了EXTJS的GridPanel、FormPanel等组件,提供了一个友好的用户界面,用于展示、编辑和管理工作流的相关信息。 描述中提到的"画图部分采用的是VML+JS",这里的VML(Vector Markup ...
这个简单的示例展示了如何利用ExtJs从服务器获取JSON数据,并使用分页策略在GridPanel中显示。在实际项目中,你可能还需要考虑错误处理、用户交互、性能优化等方面的问题,以构建更加健壮和用户友好的数据展示界面。