easyui-datagrid 编辑单元格

在做itoo成绩的时候，有个需求是教师判分，学生成绩有两部分组成：平时成绩和期末成绩，然后根据两种成绩比例算出总成绩。现在是有了平时成绩和成绩比例，输入期末成绩，计算出总成绩，并且把输入的期末成绩和计算的总成绩更新到数据库中。主要应用了单击单元格进行编辑，编辑完成之后，失去焦点则保存数据。如果数据没有变化，失去焦点则不更新数据库。

页面效果是这样的：

期末成绩的单元格是可以编辑的：

输入数据，并失去焦点之后：

如何实现的：

html：

[html] view plain copy

<table id="dg" title="学生作业" class="easyui-datagrid"
style="width: 100%; height: 90%">
</table>

生成easyUI-datagrid表格的js：

[javascript] view plain copy

$('#dg').datagrid({
url:'${pageContext.request.contextPath}/queryStudentAnswer',
queryParams:{"schoolcalendarId":termId},
onClickCell: onClickCell,
onAfterEdit:onAfterEdit,
rownumbers:true,
pagination:'true',
fitColumns:'true',
singleSelect:'true',
columns:[[
/* {field:'ck',checkbox:true}, */
{field:'id',hidden:true},
{field:'studentId',hidden:true},
{field:'resultId',hidden:true},
{field:'daliyResultRate',hidden:true},
{field:'daliyResult',hidden:true},
{field:'code',width:30,align:'center',title:'学号'},
{field:'name',width:30,align:'center',title:'姓名'},
{field:'teachClassName',width:30,align:'center',title:'班级'} ,
{field:'questionTime',width:40,align:'center',title:'留作业时间'},
{field:'questionName',width:50,align:'center',title:'作业名称'},
{field:'answerName',width:50,align:'center',title:'答案名称'},
{field:'preview',width:30,align:'center',title:'预览',formatter: function (value, row, index) { return preview(value, row, index)}} ,
{field:'finalRate',width:30,align:'center',title:'期末成绩比例'} ,
{field:'finalResult',editor:'text',width:30,align:'center',title:'期末成绩'} ,
{field:'totalResult',width:30,align:'center',title:'总分'}
]]
});

（注意期末成绩这个字段的“editor”属性应该设置成“text”，这样才可以执行下面的方法）

单击单元格和失去焦点，提交数据的js：

[javascript] view plain copy

<script type="text/javascript">
var editIndex = undefined;
function endEditing() {//该方法用于关闭上一个焦点的editing状态
if (editIndex == undefined) {
return true
}
if ($('#dg').datagrid('validateRow', editIndex)) {
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
//点击单元格事件：
function onClickCell(index,field,value) {
if (endEditing()) {
if(field=="finalResult"){
$(this).datagrid('beginEdit', index);
var ed = $(this).datagrid('getEditor', {index:index,field:field});
$(ed.target).focus();
}
editIndex = index;
}
$('#dg').datagrid('onClickRow')
}
//单元格失去焦点执行的方法
function onAfterEdit(index, row, changes) {
var updated = $('#dg').datagrid('getChanges', 'updated');
if (updated.length < 1) {
editRow = undefined;
$('#dg').datagrid('unselectAll');
return;
} else {
// 传值
submitForm(index, row, changes);
}
}
//提交数据
function submitForm(index, row, changes) {
// alert( row.resultId+"--"+changes.finalResult)daliyResultRate;
var resultId=row.resultId;//成绩id
if(resultId==""){
$.messager.alert('提醒', '没有录入该学生平时成绩！');
$("#dg").datagrid('reload');
return;
}
var daliyResultRate=row.daliyResultRate;//平时成绩比例
var daliyResult=row.daliyResult;//平时成绩
var finalRate=row.finalRate;//期末比例
var finalRusult=changes.finalResult;//期末成绩
var r =/^-?[1-9]/;//判断输入的是正整数
if(!r.test(finalRusult)){
$.messager.alert('提醒', '请输入正整数！');
return;
}
var totalRusult=Math.round(daliyResultRate*daliyResult+finalRate*finalRusult);//总成绩
$.ajax({
type : "get",
async : false,
url : "${pageContext.request.contextPath}/updateResult",
data : {
"resultId" : resultId,
"finalResult" : finalRusult,
"totalResult":totalRusult
},
success : function(data) {
if(data==true){
//alert("保存成功");
$("#dg").datagrid('reload');
}
}
})
}
</script>

特别注意的是单元格的"beginEdit"和"endEdit"方法调用的时机。

这样就可以实现了单元格编辑保存的效果了。

easyui-datagrid 编辑单元格

猜你喜欢