可编辑的网格 ExtJS，如何在网格上编辑行后更新数据库中的行

Posted 2023-02-26

【中文标题】可编辑的网格 ExtJS，如何在网格上编辑行后更新数据库中的行

【英文标题】：Editable Grid ExtJS, how to update row in database after editing row on grid

【发布时间】：2014-01-07 17:40:50

【问题描述】：

首先，对不起我的英语不太好！

我需要做下一件事情：ExtJS 3.4 Editable Grid (example)，它将使用 json 格式。输入源为 json 格式。我做到了，一切正常，就像在示例中一样。

我做到了：

数据从数据库下载到php中的数组 数组编码为json格式 可编辑的网格源是一个带有 json 消息的页面，现在一切正常。

现在我需要这样做：我需要在网格中更新单元格时更新数据库中的数据。

我该怎么做？在网上没有找到任何东西。 也许在delphi7中有一些像'OnCellEditting'这样的方法？

我的js代码：

Ext.onReady(function () 
    function formatDate(value) 
        return value ? value.dateFormat('M d, Y') : '';
    

    // shorthand alias
    var fm = Ext.form;

    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store (created below)
    var cm = new Ext.grid.ColumnModel(
        // specify any defaults for each column
        defaults: 
            sortable: false // columns are not sortable by default           
        ,
        columns: [
            header: 'ID',
            dataIndex: 'id',
            width: 30
        , 
            id: 'firstname',
            header: 'Firstname',
            dataIndex: 'firstname',
            width: 220,
            // use shorthand alias defined above
            editor: new fm.TextField(
                allowBlank: false
            )
        , 
            header: 'Lastname',
            dataIndex: 'lastname',
            width: 220,
            // use shorthand alias defined above
            editor: new fm.TextField(
                allowBlank: false
            )
        ]
    );

    // create the Data Store
    var store = new Ext.data.JsonStore(
        totalProperty: 'total', // total data, see json output
        root: 'results', // see json output
        url: '/grid/json',
        fields: [
            'firstname', 'lastname']
    );

    // create the editor grid
    var grid = new Ext.grid.EditorGridPanel(
        store: store,
        cm: cm,
        renderTo: 'grid-editable',
        width: 440,
        height: 300,
        autoExpandColumn: 'firstname', // column with this id will be expanded
        title: 'Edit Plants?',
        frame: true,
        clicksToEdit: 1
    );

    // manually trigger the data store load
    store.load(
        // store loading is asynchronous, use a load listener or callback to handle results

    );
);

【参考方案1】：

对您来说最简单的方法是在每次更改时发送一个 ajax 请求

    id: 'firstname',
    header: 'Firstname',
    dataIndex: 'firstname',
    width: 220,
    // use shorthand alias defined above
    editor: new fm.TextField(
        allowBlank: false,
        listeners : 
            change : function(field, e) 
                Ext.Ajax.request(
                    url: '/grid/save', // your backend url
                    method: 'POST',
                    params: 
                        'id': grid.getSelectionModel().selection.record.get('id'),
                        'firstname': field.getValue()
                    
                );
            
        
    )

但我认为您应该查看 extjs 示例并阅读更多关于 Store 与服务器通信的信息（例如与 REST）。

【讨论】：

非常感谢。有用！当我编辑发送到正确页面的单元格请求时，好的。很容易检查发送了哪些参数并在数据库上更新它们，但是！我需要 ID 来更新右行。我应该如何发送 db 中的行 ID 和参数？类似于 params: 'id': something_which_return_id, 'firstname': field.getValue()

我更新了我的答案，如果你需要的话请看看

你能看到行中的id吗？

好吧，我错了，是.getSelections()docs.sencha.com/extjs/3.4.0/#!/api/…

hidden: true 如果您对我的回答满意，请点赞