Extjs:使用存储获取csv文件

q1qsirdb  于 2022-11-04  发布在  其他
关注(0)|答案(1)|浏览(137)

有没有办法在ajax存储上获取csv文件?我想要的是获取csv文件,然后将其转换为JSON,但这是稍后的一部分。我尝试使用csv阅读器类型就像json,但我不认为这样的事情是可用的。如果可以直接在json中获得csv进行存储,那么这也应该可以工作,因为存储需要JSON的数据。请参考以下代码或小提琴:

Ext.application({
    name: 'Fiddle',

    launch: function () {

        //Store fetching json data
        var store = Ext.create(Ext.data.Store, {
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url: 'data.json',
                reader: {
                    type: 'json',
                    transform: function (data) {
                        Ext.create({
                                xtype: "textarea",
                                width: 200,
                                value: JSON.stringify(data),
                                renderTo: Ext.getBody()
                            });
                            return data;
                    }
                }
            }
        });

    //How to fetch csv file ?
        // var store = Ext.create(Ext.data.Store, {
        //     autoLoad: true,
        //     proxy: {
        //         type: 'ajax',
        //         url: 'SampleData.csv',
        //         reader: {
        //             //type: csv not available
        //             type: 'plaintext',
        //             transform: function (data) {
        //                 console.log(data);
        //                     return data;
        //             }
        //         }
        //     }
        // });
    }
});
csbfibhn

csbfibhn1#

我认为您必须实现一些自定义的阅读器,让我们称之为csvreader:

Ext.define('CsvReader', {
    extend: 'Ext.data.reader.Json',
    alias: 'reader.csvreader',

    getResponseData: function (response) {
        var characters = response.responseText.split('\n').reduce((akku, row) => {
            [name, email, phone] = row.split(',');
            akku.push({
                name: name,
                email: email,
                phone: phone
            });
            return akku;
        }, []);

        var json = {
            characters: characters
        };
        return json;
    }
});

Ext.application({
    name: 'Fiddle',

    launch: function () {

        //Store fetching json data
        var store = Ext.create(Ext.data.Store, {
            autoLoad: true,
            fields: ['name', 'email', 'phone'],
            proxy: {
                type: 'ajax',
                url: 'SampleData.csv',
                reader: {
                    type: 'csvreader',
                    rootProperty: 'characters'
                }
            }
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: store,
            renderTo: document.body,
            width: "100%",
            height: 300,

            columns: [{
                text: 'Name',
                dataIndex: 'name',
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            }, {
                text: 'Phone',
                dataIndex: 'phone',
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            }]
        });
    }
});

SampleData.csv文件的内容如下:

Lisa,lisa@simpsons.com,555-111-1224
Bart,bart@simpsons.com,555-222-1234
Homer,home@simpsons.com,555-222-1244
Marge,marge@simpsons.com,555-222-1254

相关问题