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");
}
当然我这里的接受数据的变量都没有初始化,以后注意.