您的位置:首页 > 产品设计 > UI/UE

easyui datagrid 单元格编辑保存

2015-01-29 09:47 369 查看


项目中有运用到datagrid单元格编辑,要求分数和排序两列能编辑,失去焦点后保存更新的值。

$('#allList').datagrid({ //其中allList为列表的Id
url:app.approot+"paperRes/getPaperQuestionList/"+ptyid, //获取列表数据
handler:function(){ //接受改变的值
$('#allList').datagrid('acceptChanges');
},
onBeforeEdit: function (rowIndex,rowData) {
$("#selQuestionId").val(rowData.questionId);
},
onClickCell: onClickCell, //单击单元格触发事件,方法在下面
onAfterEdit:function(rowIndex, rowData, changes){ // 第三个参数是改变的值
// 以下是编辑后将新的值传到后台,本人项目需要,可以忽略....
if(changes.questionNo!=undefined&&changes.questionNo!='undefined'){
$.post(app.approot+'paperRes/updateQuestionNo/'+rowData.paperId+
'/'+rowData.questionId+'/'+changes.questionNo,function(result){
if(result.msgid=="1"){
$('#allList').datagrid('reload');
}else{
$.messager.alert("操作提示",result.msg,"info");
}

},"json");
}
if(changes.scoreItem!=undefined&&changes.scoreItem!='undefined'){
$.post(app.approot+'paperRes/updateQuestionScoreItem/'+rowData.paperId+
'/'+rowData.questionId+'/'+changes.scoreItem,function(result){
if(result.msgid=="1"){
$('#allList').datagrid('refreshRow', rowIndex);
}else{
$.messager.alert("操作提示",result.msg,"info");
$('#allList').datagrid('reload');
}

},"json");
}

}

});

//以下是官网针对单元格编辑扩展的方法

$.extend($.fn.datagrid.methods, {
//编辑单元格
editCell: function(jq,param){
return jq.each(function(){
var opts = $(this).datagrid('options');
var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));//获取列
for(var i=0; i<fields.length; i++){
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor1 = col.editor;
if (fields[i] != param.field){//如果不是选中的单元格  editor置空
col.editor = null;
}
}
$(this).datagrid('beginEdit', param.index);
for(var i=0; i<fields.length; i++){
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor = col.editor1;
}
});
}
});

var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){return true}//如果为undefined的话,为真,说明可以编辑
if ($('#allList1').datagrid('validateRow', editIndex)){
$('#allList1').datagrid('endEdit', editIndex);  //判断是否有开启编辑的行,如果有则把开户编辑的那行结束编辑
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickCell(index, field){
if (endEditing()){ //如果编辑列返回undefined
$('#allList1').datagrid('selectRow', index)
.datagrid('editCell', {index:index,field:field});
editIndex = index;
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息