extjs 保持用户在UI中对列顺序的更改与Excel中的相同

ifsvaxew  于 2023-10-18  发布在  其他
关注(0)|答案(1)|浏览(140)

用户可以在UI中重新排序列。如果用户导出选定的审计记录,则使用默认列顺序。我想将UI中的列顺序应用于导出的.xlsx文件。网格代码是ext.js,后端导出代码是C#
是否有可能实现上述目标?我们需要在前端或后端的哪些地方进行修改?

kyvafyod

kyvafyod1#

我认为ExtJs中没有任何内置功能或设置。但是,您可以使用任何自定义解决方法来实现该用例。请检查下面的代码,可能会有帮助!

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone', 'value'],
            data: [{
                name: 'Lisa',
                email: '[email protected]',
                phone: '000-000-0000',
                value: 7
            }, {
                name: 'Bart',
                email: '[email protected]',
                phone: '111-111-1111',
                value: 7
            }, {
                name: 'Homer',
                email: '[email protected]',
                phone: '222-222-2222',
                value: 8
            }, {
                name: 'Marge',
                email: '[email protected]',
                phone: '555-555-5555',
                value: 7
            }]
        });

        Ext.create('Ext.grid.Panel', {
            requires: ['Ext.grid.plugin.Exporter'],
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            columns: [{
                text: 'Col A(name)',
                dataIndex: 'name',
            }, {
                text: 'Col B(email)',
                dataIndex: 'email',
                flex: 1,
            }, {
                text: 'Col C(phone)',
                dataIndex: 'phone',
                flex: 1
            }, {
                text: 'Col D(value)',
                dataIndex: 'value',
                exportRenderer: true
            }],
            height: 300,
            width: 400,
            renderTo: Ext.getBody(),
            bbar: [{
                xtype: 'button',
                text: 'Modified Column Export',
                handler: function () {
                    var gridRef = Ext.ComponentQuery.query('grid')[0],
                        store = gridRef.getStore(),
                        OriginalColumns = gridRef.config.columns; //gridRef.headerCt.columnManager.getColumns();
                    var index = ['email', 'value', 'phone', 'name']; //Modified Order export
                    var newArr = [];
                    for (var i = 0; i < index.length; i++) {
                        for (var j = 0; j < index.length; j++) {
                            var ori_Col_Index = OriginalColumns[j];
                            if (ori_Col_Index.dataIndex == index[i]) {
                                newArr.push(ori_Col_Index);
                                break;
                            }
                        }
                    }
                    gridRef.reconfigure(store, newArr);
                    gridRef.saveDocumentAs({
                        type: 'xlsx',
                        charset: 'Shift-JIS',
                        title: 'ShuffleSample',
                        fileName: 'ShuffleSample.xlsx'
                    });
                    Ext.Function.defer(function () {
                        gridRef.reconfigure(store, OriginalColumns);
                    }, 5000);
                }
            }],
            plugins: [{
                ptype: 'gridexporter'
            }],

        });
    }
});

相关问题