datagrid editor 上、下、回车键自定义

1. datagrid editor取值/赋值:


//以numberbox为例

//1. 取值

vared=$('#cjlr_dg').datagrid('getEditor', {index:index,field:field});

varpscj_oldValue=$(ed.target).numberbox('getValue');

//2. 赋值

$(ed.target).numberbox('setValue',0);


2. 一个完整的成绩表格编辑功能;编辑完成后将最新的值存储到后台;

 · 如果之前有值,清空之后,回车,将显示之前的值;

 ·  如果之前无值,清空之后,回车,将显示“为录入”;

 ·  如果之前有值,改变值之后,回车,将显示最新改变的值;

 ·  用到的小知识点:

(1)、将数值转换为整数:parseInt(zcj)

(2)、将数值转换为带一位小数的数值:parseFloat(zcj).toFixed(1)

(3)、三元表达式: 条件 ? 条件成立执行此语句 :条件不成立执行此语句;

(4)、字符串截取:str.subString(1,10); - 截取的为str的索引值从1到9之间的字符(索引值是从0开始的);

(5)、将字符转为数组:str.split(",");  - 以逗号为分割点,转换为数组;

//datagrid editor - 点击上键表示“+1”,点击下键表示“-1”,点击回车表示“编辑完成”;

//定义命名空间对象,因为页面较多,避免冲突

nameSpace.ns("CJGL.cjlr");

CJGL.cjlr = {

    //定义此命名空间对象中的所有全局变量

bl: {

cjlr_grade_Name: '',

cjlr_grade_value: 0

},

init: function(){//初始化函数

var dg = $('#cjlr_dg').datagrid({//给datagrid组件赋值

url: "/cjlrxsxx/getStudents",

queryParams: { ... },

    onLoadSuccess: function(data){ ... },

onClickCell: function(index,field,value){//当点击datagrid editor中的单元格时触发此事件

      //获取特定的编辑器,options参数有2个属性:index:行索引。field:字段名。

var ed = $('#cjlr_dg').datagrid('getEditor', {index:index,field:field});

//获取编辑框的值

var pscj_oldValue = $(ed.target).numberbox('getValue');

//将编辑框的字段名存储到全局变量中

CJGL.cjlr.bl.cjlr_grade_Name = field;

//获取到编辑框的值是空的还是有数值,空的的话将“未录入”存入变量中,非空将获取到的编辑框的值存入变量中(当键盘未做任何编辑,将内容清空的时候用到此处变量)

pscj_oldValue == "" ? CJGL.cjlr.bl.cjlr_grade_value = "未录入" : CJGL.cjlr.bl.cjlr_grade_value = pscj_oldValue;

//键盘上/下/enter事件触发

$('.datagrid-editable .textbox,.datagrid-editable .datagrid-editable-input,.datagrid-editable .textbox-text').bind('keydown', function(e){

var code = e.keyCode || e.which;

ed = $('#cjlr_dg').datagrid('getEditor', {index:index,field:field});

//获取编辑框的值;

pscj_oldValue = $(ed.target).numberbox('getValue');

CJGL.cjlr.bl.cjlr_grade_Name = field;

pscj_oldValue == "" ? CJGL.cjlr.bl.cjlr_grade_value = "未录入" : CJGL.cjlr.bl.cjlr_grade_value = pscj_oldValue;

if(code == 13){//回车键 - 结束编辑

$('#cjlr_dg').datagrid('acceptChanges');

$('#cjlr_dg').datagrid('endEdit', index);

}else if(code == 38){//上键 - 加1

if(!pscj_oldValue){

$(ed.target).numberbox('setValue',0);

pscj_oldValue = $(ed.target).numberbox('getValue');

}

var newValue_cj = parseInt(pscj_oldValue) + 1;

$(ed.target).numberbox('setValue',newValue_cj);

return false;

}else if(code == 40){//下键 - 减1

var newValue_cj = parseInt(pscj_oldValue) - 1;

$(ed.target).numberbox('setValue',newValue_cj);

return false;

}

});

},

onAfterEdit: function(index,row,changes){//结束编辑

        CJGL.cjlr.bl.cjlrxsxxId = row.openid;

if(JSON.stringify(changes).length >2){//改变了值

var changeValue = JSON.stringify(changes);

var changeName = changeValue.substring(1, changeValue.length-1).split(":")[0].replace(/\"/g, "");

var changeText = changeValue.substring(1, changeValue.length-1).split(":")[1].replace(/\"/g, "");

if(changeText.length == 0){//录入值为空 - 填入"未录入"或之前数值

row[CJGL.cjlr.bl.cjlr_grade_Name] = CJGL.cjlr.bl.cjlr_grade_value;

//更新表格

$('#cjlr_dg').datagrid('updateRow',{

index: index,

row: row

});

$('#cjlr_dg').datagrid('refreshRow', index);

}else{//改变的值为非空,有数值

//是否保留一位小数,来判断单元格的值的格式;

row.sfblywxs == 1 ? (row[changeName] = parseFloat(changeText).toFixed(1)) : (row[changeName] = parseInt(changeText));

row.pscj == "未录入" ? (row.sfblywxs == 1 ? row.pscj = 0.0 : row.pscj = 0) : (row.sfblywxs == 1 ? row.pscj = parseFloat(row.pscj) : row.pscj = parseInt(row.pscj));

row.kscj == "未录入" ? (row.sfblywxs == 1 ? row.kscj = 0.0 : row.kscj = 0) : (row.sfblywxs == 1 ? row.kscj = parseFloat(row.kscj) : row.kscj = parseInt(row.kscj));

//总成绩 = 60%的考试成绩 + 40%的平时成绩;

var zcj = row.kscj * 0.6 + row.pscj * 0.4;

row.sfblywxs == 1 ? zcj = parseFloat(zcj).toFixed(1) : zcj = parseInt(zcj);

row.cjzfs = zcj;

//更新修改过的单元行

$('#cjlr_dg').datagrid('updateRow',{

index: index,

row: row

});

$('#cjlr_dg').datagrid('refreshRow', index);

//保存平时成绩/考试成绩

CJGL.cjlr.save(row.pscj, row.kscj);

}

$('#cjlr_dg').datagrid('updateRow',{

index: index,

row: row

});

$('#cjlr_dg').datagrid('refreshRow', index);

//保存平时成绩/考试成绩

if(row.pscj<0 || row.kscj<0){

$.messager.alert('提示信息','请录入正确的成绩分数!');

$('#cjlr_dg').datagrid("reload");

}else{

CJGL.cjlr.save(row.pscj, row.kscj);

}

}

}

});

dg.datagrid('enableCellEditing');//让表格拥有编辑功能;


$(function(){

CJGL.cjlr.init();//调用页面初始化函数;

});

你可能感兴趣的:(datagrid editor 上、下、回车键自定义)