ext的GridPanel处置复合主键时只显示一条记录 _Web前端

ext的GridPanel处理复合主键时只显示一条记录

看了好多文章，

解决方法一：GridPanel增加属性

autoHeight:true

可惜，失败了。

解决方法二（最终方案）：

后台返回的数据有多条，分页栏PagingToolbar显示的记录总数也正确，可是当前显示第xx-xx条记录却始终都是显示第1-1条记录，gridpanel却只显示当前页的最后一条记录。

于是到网络上去搜相关信息，说是主键重复，只要主键不同就可以正常显示了。

原文如下：

?写道

解决：服务端返回的数据中每一条记录的id都是相同的，而JsonReader的idProperty默认配置是id,这就是出现问题的根源。你只要让每一条记录的id不同就行了。

?写道

这应该是Ext对json处理机制导致的问题，id这个名称可能是默认的主键，所以当这个字段相同的时候就视为相同数据，导致只显示一条，以后可以考虑主键字段不叫id（改写JSONReader的idProperty）或者保证id这个字段不重复

写道

reader数据源中的id是一样的值，如果id是相同的值，则ext的stroe会自动的过滤掉，则需将id："属性值"，去掉。

可惜，回头再去检查，可是发现json数据中的id字段没有重复，我的是复合主键。

firebug查看后台返回的数据，如下：

{
"data":
[
{"count":"4","endTime":"2012-10-17 10:59:00",
"id":{"stepNo":"1","workdate":"20121012"},
"info":"2012-10-17 10:40:00:步骤一成功","result":"0","startTime":"2012-10-17 10:59:00","stepName":"step1"},

{"count":"4","endTime":"2012-10-17 10:59:00",
"id":{"stepNo":"4","workdate":"20121012"},
"info":"2012-10-17 10:40:00:步骤二成功","result":"0","startTime":"2012-10-17 10:59:00","stepName":"step2"},

{"count":"4","endTime":"2012-10-17 10:59:00",
"id":{"stepNo":"5","workdate":"20121012"},
"info":"2012-10-17 10:40:00:步骤三成功","result":"0","startTime":"2012-10-17 10:59:00","stepName":"step3"}
],
"totalCount":3}

最终，解决如下：

 var gridStore = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({
            url: url.query
        }),
        reader: new Ext.data.JsonReader({
            root: 'data',
            totalProperty: 'totalCount',
            idProperty:'workdate'+'stepNo'   //最关键的一句话
        }, [{
            name: 'workdate',
            mapping: 'id.workdate'
        }, {
            name: 'stepNo',
            mapping: 'id.stepNo'
        }, {
            name: 'stepName',
            mapping: 'stepName'
        }, {
            name: 'startTime',
            mapping: 'startTime'
        }, {
            name: 'endTime',
            mapping: 'endTime'
        }, {
            name: 'result',
            mapping: 'result'
        }, {
            name: 'count',
            mapping: 'count'
        }, {
            name: 'info',
            mapping: 'info'
        }])
    });