首页 > 解决方案 > 煎茶过滤器网格列

问题描述

我正在尝试找出如何过滤列,以便找到一个特定的楼层值(或例如所有值为“2”的楼层),并通过单击特定按钮按升序/降序对它们进行排序。我写了这段代码,但它不起作用,因为当我在过滤器中写一个值时,他没有给我任何行(如果我尝试使用“type:'string'”):

{
   text: "Floor",
   dataIndex: 'attributes',
   filter:{
       type: 'number',
       value : 'floor'
   },
   renderer: function (value) {
      return value['floor'];
   },

}

在此处输入图像描述

在此处输入图像描述

我应该如何更改我的代码以使其正常工作?

标签: extjsfilterfiltering

解决方案


您需要更改dataIndex为非嵌套列。

您可以在模型中添加逻辑字段,例如:

 {
    name: "floor", "mapping": "attributes.floor"
}

在列中:

{
   text: "Floor",
   dataIndex: 'floor',
   filter:{
       type: 'number'
   }
}

已编辑 - 查看小提琴:https ://fiddle.sencha.com/#view/editor&fiddle/30gr

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!');

        var store = Ext.create("Ext.data.Store", {
            fields: [{
                "name": "name",
                "type": "string"
            }, {
                "name": "floor",
                "mapping": function (data) {
                    console.log(data);
                    if (data && data.attributes && Ext.isNumber(data.attributes.floor)) {
                        return data.attributes.floor;
                    }
                    return null
                }
            }],
            data: [{
                "name": "A1",
                "attributes": {
                    "floor": 1
                }
            }, {
                "name": "B1",
                "attributes": {
                    "floor": 1
                }
            }, {
                "name": "A2",
                "attributes": {
                    "floor": 2
                }
            }, {
                "name": "A3",
                "attributes": {
                    "floor": 3
                }
            }, {
                "name": "ANU",
                "attributes": {
                    "floor": null
                }
            }, {
                "name": "AN"
            }]
        });

        Ext.create("Ext.grid.Panel", {
            renderTo: Ext.getBody(),
            width: 400,
            height: 500,
            store: store,
            columns: [{
                "dataIndex": "name",
                "text": "Name"
            }, {
                "dataIndex": "floor",
                "text": "Floor"
            }]
        })
    }
});

推荐阅读