仅显示从 ExtJS 3.x 中的外部 JSON 填充的列

Posted 2023-02-26

【中文标题】仅显示从 ExtJS 3.x 中的外部 JSON 填充的列

【英文标题】：Only show columns that are filled from external JSON in ExtJS 3.x

【发布时间】：2014-06-01 12:21:53

【问题描述】：

我在 ExtJS 中解析外部 JSON 源，并希望在 ExtJS 网格中显示数据。 这已经很完美了。

存在可预测的最大字段集，但在大多数情况下，某些字段为空/不在 JSON 中。如果一个字段根本没有填写，它不应该被隐藏。

ExtJS 3.x 中是否有动态隐藏它的功能？

到目前为止我的代码：

var store = new Ext.data.JsonStore(
    url     : '/data/all.json',
    storeId : 'mainStore',
    fields  : ['name', 'company', 'country']
);
store.load()


var columns = [];
    var colModel = new Ext.grid.ColumnModel([
        header: 'Name', sortable: true, dataIndex: 'name', filterable: true, hidden: false, filter: type: 'string',
        header: 'Company', sortable: true, dataIndex: 'company', filterable: true, hidden: false, filter: type: 'string',
        header: 'Country', sortable: true, dataIndex: 'country', filterable: true, hidden: false, filter: type: 'string',

    ]);

我的 JSON 可能如下所示：

这应该显示所有字段。

[ "name": "Jon Doe", "company": "ACME Inc.", "country": "Mexico",
"name" : "Jane Doe", "company" : "ACME Ltd", "country" : "USA"]

这应该只显示姓名和公司。

[ "name": "Jon Doe", "company": "ACME Inc.",
"name" : "Jane Doe", "company" : "ACME Ltd"]

这应该会再次显示所有字段。

[ "name": "Jon Doe", "company": "ACME Inc.",
"name" : "Jane Doe", "company" : "ACME Ltd", "country" : "USA"]

非常感谢您的帮助。

【参考方案1】：

您可以创建一个评估数据并返回布尔值的函数。

var showOrHideColumns = function(columnName) 
    var records = store.getRange(),
        hidden = false;

    Ext.each(records, function(itm, idx) 
        if (!itm.get(columnName)) 
            hidden = true;
            break;
        
    );

    return hidden;
;

并在标题中使用上述功能。您可能需要检查代码中方法的范围。

 header: 'Name', hidden: showOrHideColumns 

注意：以上代码未经测试。