关于Ext的EditorGridPanel实时修改数据后保存到数据库的一点心得

EditorGridPanel并不难,我想很多人都可以写出来,但是对于修改数据后怎样保存到数据库我想还是有好多人不太明白,下面我关于这一点就我个人的见解说一下,这里首先的配置好可以修改的列

 

var colM = new Ext.grid.ColumnModel([{
        header: "编号",
        dataIndex: "id",
        sortable: true,
        width: 40
    }, {
        header: "广告版面",
        dataIndex: "ad_bm",
        sortable: true,
        editor: new Ext.form.TextField({
            allowBlank: false
        })
    }, {
        header: "广告规格",
        dataIndex: "ad_gg",
        sortable: true,
        width: 180,
        editor: new Ext.form.TextField({
            allowBlank: false
        })
    }, {
        header: "客户名称",
        dataIndex: "ad_kh",
        sortable: true,
        width: 150,
        editor: new Ext.form.TextField({
            allowBlank: false
        })
    }, {
        header: "广告单价",
        dataIndex: "ad_dj",
        renderer: zhMoney,
        sortable: true,
        editor: new Ext.form.NumberField({
            allowBlank: false,
            allowNegative: false,
            maxValue: 100000
        })
   
    }, {
        header: "交款情况",
        dataIndex: "ad_jkqk",
        sortable: true,
        editor: new Ext.form.ComboBox({
            typeAhead: true,
            triggerAction: 'all',
            transform: 'combox',
            lazyRender: true,
            listClass: 'x-combo-list-small'
        })
    }, {
        header: "交款日期",
        dataIndex: "ad_jkrq",
        sortable: true,
        width: 150,
        renderer: formatDate,
        editor: new Ext.form.DateField({
            format: 'Y-m-d',
            disabledDaysText: 'Plants are not available on the weekends'
        })
    }, {
        header: "业务员",
        dataIndex: "ad_ywy",
        sortable: true,
        editor: new Ext.form.ComboBox({
            typeAhead: true,
            triggerAction: 'all',
            displayField: 'name',
            valueField: 'value',
            store: g_select_user,
            lazyRender: true,
            editable: true,
            listClass: 'x-combo-list-small'
        })
    }, {
        header: "期数",
        dataIndex: "ad_qs",
        sortable: true,
        renderer: _qishu,
        editor: new Ext.form.NumberField({
            allowBlank: false,
            allowNegative: false,
            minValue: 1
        })
    }, {
        header: "删除",
        dataIndex: "id",
        width: 50,
        renderer: _select
    }]);

然后把它放到EditorGridPanel中就可以实现双击修改了,那么怎么知道数据被修改了?
这就需要EditorGridPanel的afteredit事件来监听

 

grid.on("afteredit", afterEdit, grid);

 

这就使得当表被修改后出发afterEdit函数,下来我们看这个函数

 

function afterEdit(obj){
        var r = obj.record;//获取被修改的行
        var l = obj.field;//获取被修改的列
        var id = r.get("id");
        if (l == "ad_jkrq")
            var lie = Ext.util.Format.date(r.get(l), "Y-m-d");
        else
            var lie = r.get(l);
            Ext.Ajax.request({
            url: '_action.php?action=edit',
            params: "id=" + id + "&name=" + l + '&value=' + lie
        });
    }

 

这里我的列的dataIndex取名和数据库中的列名相同,方便处理,然后使用

 

Ext.Ajax.request({
            url: '_action.php?action=edit',
            params: "id=" + id + "&name=" + l + '&value=' + lie
        });

 

把被修改的列的名字及dataIndex,和修改后的数据通过params传递到_action.php?action=edit进行处理
看对应的php处理代码,红色部分为重点,到了这里我想大家应该明白前面为什么要dataIndex要与数据库列名相同了吧.

 

if($_GET['action']=="edit"){
   $id=$_POST['id'];
   $name=$_POST['name'];
   $value=$_POST['value'];
   if($name=="ad_jkrq")$value=strtotime($value);
   $db->exec("update dingdan set [color=Red]$name='$value' [/color]where id=$id");
}

 

当然我这里的接受数据的变量都没有初始化,以后注意.