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

 Seet琸琸 发布于 2023-02-05 13:15

首先,抱歉我的英语不是很好!

我需要制作下一个东西:ExtJS 3.4可编辑网格(示例),它将使用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

    });
});

Darin Kolev.. 5

最简单的方法是在每次更改时发送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).

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).

    2023-02-05 13:17 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有