在使用easyui的updateRow方法会刷新当前行的时候会结束编辑,这里可以使用
$('#fylb').datagrid('updateColumnField',{index: rowIndex,row: data})来代替
$('#fylb').datagrid('updateRow',{index: rowIndex,row: data})即可
data为修改之后的行记录:
/**
*自定义的修改列值方法
*datagrid 列表的JQUERY对象
*data 是一个object对象,构成:{index: rowIndex,row: data}
*调用方式:datagrid('updateColumnField',{index: rowIndex,row: data});
*/
$.extend($.fn.datagrid.methods, {
updateColumnField: function(datagrid,data) {
datagrid.each(function(){
//获取缓存中的配置数据
var gridObj=$.data(this,"datagrid");
var opts=gridObj.options;
//获取行数据
var row=opts.finder.getRow(this,data.index);
data.row=data.row||{};
var update=true;
//更新页面显示值
if(update){
var tr=opts.finder.getTr(this,data.index);
var view=opts.view.renderRow.call(opts.view,this,["attr1"],true,data.index,data.row);
var inputs = tr.find('td').find('input');
var flag = true;
/* var flag = false;
//加上这里代码,会在失去焦点保存的时候,出现问题,此时已经没有input框在编辑(如果向下左右跳到另外的编辑框,这么写是正确的)
inputs.each(function(){
if($(this).hasClass('datagrid-editable-input')){
flag = true;
}
});*/
if(flag){
//找到所有需要更新值的列
tr.find('div').each(function(i){
if(data.row[$(this).parent().attr('field')]!=undefined){
if($(this).attr('class').indexOf('datagrid-editable')!=-1){
/* var ed=$.data(this,"datagrid.editor");
//更新编辑框显示值(正在被编辑的值不变,否则会更新当前编辑框的值)
if(ed!=undefined){
ed.actions.setValue(ed.target,data.row[$(this).parent().attr('field')]);
}else{
$(this).html(data.row[$(this).parent().attr('field')]);
} */
}else{
var field = $(this).parent().attr('field');
var trueVal = data.row[field];
var columnOption = datagrid.datagrid('getColumnOption',field);
//如果是下拉框,显示和提交的值不同的话,这里需要做特殊处理
if(columnOption.editor && columnOption.editor.type.indexOf('combo') >=0 && $.isFunction(columnOption.formatter)){
//如果有formatter函数,则利用返回值,改变下拉框的显示值
var formatterFunReturnVal = columnOption.formatter(trueVal,data.row);
$(this).html(formatterFunReturnVal);
}else if(columnOption.editor && columnOption.editor.type.indexOf('checkbox') >=0 && $.isFunction(columnOption.formatter)){
//如果有formatter函数,则利用返回值,改变复选框的显示值
var formatterFunReturnVal = columnOption.formatter(trueVal,data.row);
$(this).html(formatterFunReturnVal);
}else{
//更新显示值非编辑框显示值(注意这里只是显示值,而不是实际值,实际值的更新行记录会更新的,不用担心)
$(this).html(trueVal);
}
}
}
});
}
}
//更新行记录(datagrid获取行的时候实际上是从这里获取的)
var t = $.util.parseJquery(datagrid[0]);
rows = t.datagrid("getRows");
rows[data.index] = data.row;
});
}
}); 附上完整的datagrid的单元格编辑代码,如下:
datagrid的双击编辑单元格事件:
onDblClickCell: function(rowIndex, field, value){
var id=$(this).attr("id");
id="#"+id;
return onClickRow(rowIndex, field, value,id);
},
/**
* 单击单元格修改数据之后保存调用此方法
*/
function save(rowIndex,row,changes,id){
zdyAfterEdit(row,changes,rowIndex,id);
var saveData=new Array();
saveData[0]=row;
saveData[1]=changes;
return saveData;
}
/**
* 单击单元格编辑之前调用此事件,用来保存原来没有修改之前的行记录
*/
var oldArray = new Array();
function zdyBeforeEdit(rowIndex,id){
var row = $(id).datagrid('getRowData',rowIndex);
var array={
'displayCode':row.displayCode,
'itemName':row.itemName,
'unit':row.unit,
'num':row.num,
'price':row.price,
'sums':row.sums,
'remark':row.remark,
};
oldArray[row.id]=array;
}
/**
* 编辑完单元格数据之后发送url请求之前调用
*/
function zdyAfterEdit(row,changes,rowIndex,id){
var array=oldArray [row.id];
var t=false;
for(var name in array)
{
if (array[name]!=row[name])
{
t=true;
break;
}
}
if (t)
{
if(row.id && row.id!=-1){
data["id"] = row.id;
}
for (var key in row)
{
if (!$.isArray(row[key]) && !$.isFunction(row[key])
&& (typeof row[key]) == "object")
{
continue;
}
data["object."+key]=row[key];
}
var url="./iface/modify";
$.post(url,data,function(data){
var obj=eval('('+data+')');
if (obj && obj.returnCode==1)
{
//后台成功返回,需要刷新当前行记录
updateFy(obj.data.id,obj.data);
return;
}
top.$.messager.alert('错误',obj.message,'error');
});
}
}
/**
* 不结束编辑刷新当前航
*/
function updateFy(id,data,row)
{
var rowData;
var rows = $('#fylb').datagrid('getRows');
if(id){
for(var i = 0;i<rows.length;i++){
if(rows[i].id == id){
rowData = rows[i];
break;
}
}
}
if(!rowData)
return;
var rowIndex = $('#fylb').datagrid('getRowIndex', rowData);
$('#fylb').datagrid('updateColumnField',{index: rowIndex,row: data});
//updateRow会更新行记录之后会结束编辑
// $('#fylb').datagrid('updateRow',{index: rowIndex,row: data});
// $('#fylb').datagrid('acceptChanges');
}公用方法:
var clickFun = undefined;//复选框的单击事件(定额消耗页面dexh.jsp的"锁定"复选框的单击函数)
var editNumCell = undefined;
var zdyBeforeEdit = undefined;
var zdyCheckField = undefined;
var showNumValue = undefined;
var comboboxValue = {};
var checkNumPosition = undefined;
var EditorFields = [];
var selectIndexs = {firstSelectRowIndex : 0,lastSelectRowIndex : 0};
var inputFlags = {isShiftDown : false,isCtrlDown : false,isAltDown : false};
var reloadFlag = undefined;//该标记如果为true,表示会刷新整个页面,那么按键编辑就需要放到onLoadSuccess中去执行
var clickFunFlag = undefined;//因为在写的过程中碰到了重名的函数,而这个页面被很多JSP引用,所以不好更改,这里选择给同名函数加标识
//开启编辑单元格状态
function beginEditCell(target, options) {
var opts = $.data(target, "datagrid").options;
var tr = opts.finder.getTr(target, options.index);
var row = opts.finder.getRow(target, options.index);
_initCellEditor(target, options.index, options.field);
_outerWidthOfEditable(target);
//$.validateRow(target, options.index);暂时先不使用,不知道该方法作用
}
function _initCellEditor(target, _index, _field) {
var opts = $.data(target, "datagrid").options;
var tr = opts.finder.getTr(target, _index);
var row = opts.finder.getRow(target, _index);
tr.children("td:visible").each(function () {
var cell = $(this).find("div.datagrid-cell");
var field = $(this).attr("field");
var col = $(target).datagrid("getColumnOption", field);
if (col && col.editor) {
if(col.editor.type!='checkbox'){
EditorFields.push(field);
}
}
if (field == _field) {//找到与传递参数相同field的单元格
if (col && col.editor) {
var editorType, editorOp;
if (typeof col.editor == "string") {
editorType = col.editor;
} else {
editorType = col.editor.type;
editorOp = col.editor.options;
}
var editor = opts.editors[editorType];
if (editor) {
var html = cell.html();
var outerWidth = cell._outerWidth();
cell.addClass("datagrid-editable");
cell._outerWidth(outerWidth);
cell.html("<table border=\"0\" cellspacing=\"0\" cellpadding=\"1\"><tr><td></td></tr></table>");
cell.children("table").bind(
"click dblclick contextmenu",
function (e) {
e.stopPropagation();
});
$.data(cell[0], "datagrid.editor", {
actions: editor,
target: editor.init(cell.find("td"),
editorOp),
field: field,
type: editorType,
oldHtml: html
});
}
}
tr.find("div.datagrid-editable").each(function () {
var field = $(this).parent().attr("field");
$('.datagrid-editable')[0].style['height']="auto";//设置包裹该editorde的div的样式
var ed = $.data(this, "datagrid.editor");
var edType = ed.type;
var trueVal = row[field];
/*if(edType.indexOf('number') >=0){
trueVal = trueVal*10000/10000;
}*/
ed.actions.setValue(ed.target, trueVal);
});
}
});
}
//为可编辑的单元格设置外边框
//来自jquery.easyui.1.8.0.js的 function _4d8()方法
function _outerWidthOfEditable(target) {
var dc = $.data(target, "datagrid").dc;
dc.view.find("div.datagrid-editable").each(function () {
var _this = $(this);
var field = _this.parent().attr("field");
var col = $(target).datagrid("getColumnOption", field);
_this._outerWidth(col.width);
var ed = $.data(this, "datagrid.editor");
if (ed.actions.resize) {
ed.actions.resize(ed.target, _this.width());
}
});
}
//关闭编辑单元格状态
function endEditCell(target, options) {
var opts = $.data(target, "datagrid").options;
var updatedRows = $.data(target, "datagrid").updatedRows;
var insertedRows = $.data(target, "datagrid").insertedRows;
var tr = opts.finder.getTr(target, options.index);
var row = opts.finder.getRow(target, options.index);
// //与beginEditCell相呼应,暂时取消
// if (!tr.hasClass("datagrid-row-editing")) {//行不能编辑时,返回
// return;
// }
// tr.removeClass("datagrid-row-editing");
var _535 = false;
var _536 = {};
tr.find("div.datagrid-editable").each(function () {
var _537 = $(this).parent().attr("field");
var ed = $.data(this, "datagrid.editor");
var type = ed.type;
var _538 = "";
if(type == 'numberbox'){
//如果是数字框,则获取下一个隐藏的input元素
_538 = ed.target.next().val();
}else if(type.indexOf('combo') >=0){
_538 = ed.target.combo('getValue');
}else {
_538 = ed.actions.getValue(ed.target);
}
if (row[_537] != _538) {
row[_537] = _538;
_535 = true;
_536[_537] = _538;
}
});
if (_535) {
if (_45f(insertedRows, row) == -1) {
if (_45f(insertedRows, row) == -1) {
updatedRows.push(row);
}
}
}
_destroyCellEditor(target, options);
$(target).datagrid("refreshRow", options.index);
//这里是主动调用onAfterEdit()中的方法,但是已经把onAfterEdit()中的内容抽取出来,如果值改变,那么onAfterEditing(rowIndex,row,changes,id)即可,所以这里不需要调用datagrid的onAfterEdit()方法
//opts.onAfterEdit.call(target, options.index, row, _536);
}
function _45f(a, o) {
for (var i = 0, len = a.length; i < len; i++) {
if (a[i] == o) {
return i;
}
}
return -1;
}
//销毁单元格编辑器
function _destroyCellEditor(target, options) {
var opts = $.data(target, "datagrid").options;
var tr = opts.finder.getTr(target, options.index);
tr.children("td").each(function () {
var field = $(this).attr("field");
if (field == options.field) {//找到与传递参数相同field的单元格
var cell = $(this).find("div.datagrid-editable");
if (cell.length) {
var ed = $.data(cell[0], "datagrid.editor");
if (ed.actions.destroy) {
ed.actions.destroy(ed.target);
}
cell.html(ed.oldHtml);
$.removeData(cell[0], "datagrid.editor");
cell.removeClass("datagrid-editable");
cell.css("width", "");
}
}
});
}
$.extend($.fn.datagrid.methods, {
beginEditCell: function (target, options) {
return target.each(function () {
beginEditCell(this, options);
});
},
endEditCell: function (target, options) {
return target.each(function () {
endEditCell(this, options);
});
}
});
/**
* 开启单击单元格
* rowIndex 表示行索引
* field 表示当前被编辑的单元格的field字段
* value 当前被编辑的单元格的初始值
* id 表示datagrid的id值
*/
_rowIndex = undefined;
_field = undefined;
_rowId=undefined;
function onClickRow(rowIndex, field, value,id) {
EditorFields = [];
$(':checkbox').bind("focus",function(){
$(this).css('outline','none');
});
if(zdyBeforeEdit!=undefined && $.isFunction(zdyBeforeEdit)){
zdyBeforeEdit(rowIndex,id);
}
var columnOption=$(id).datagrid("getColumnOption",field);
if(columnOption && columnOption.readonly == true)
return false;
if ((_rowIndex != rowIndex || _field != field) || typeof(reloadFlag) != "undefined") {
if(reloadFlag){
reloadFlag = undefined;//该标记是用来标识是否按键操作放在页面加载完成(reload)之后执行,这里已经执行,所以需要把该值重新置为undefined
}
if (endEditing(id)){
$(id).datagrid('clearSelections');
$(id).datagrid('clearChecked');
//如果是复选框,虽然勾选状态被取消了,但是复选框看起来还是勾选的,这里利用QUERY去除虚拟的勾选状态
$(id).parent().find("td[field=ck] input").prop('checked',false);
$(id).datagrid('selectRow',rowIndex);
$(id).datagrid('beginEditCell', {index: rowIndex, field: field});
//去除当前被编辑的单元格之外的编辑框的错误信息提示的图标
$(".validatebox-invalid").removeClass("validatebox-invalid");
var ed = $(id).datagrid('getEditor', {index:rowIndex,field:field});
if(ed == null){
_destroyCellEditor($(id)[0],{index:rowIndex,field:field});/*必须要先销毁再点击,否则会出现一个div中有多个编辑框*/
onClickRow(rowIndex, EditorFields[0], value,id);
return false;
}
_field = field;
_rowIndex = rowIndex;
_rowId = id;
// 去掉小数点后多余的0
if(!isNaN($(ed.target).val()) && $(ed.target).val().length>0)
{
$(ed.target).val(parseFloat($(ed.target).val()));
}
//有时候下拉框要点击才能出来,这里写两个
// $(ed.target).focus().select();
$(".datagrid-editable-input").focus().select();
var row=$(id).datagrid("getRowData",rowIndex);
if(zdyCheckField!=undefined && $.isFunction(zdyCheckField)){
zdyCheckField(row,field);
$(".datagrid-editable-input")[0].select();
}
var changes={};
$(".datagrid-editable-input").blur(function(){
//下拉框失去焦点的时候,让其他列被后台改变的值不在发生变化(列num为3,price为5,sums为15,后台返回请求之后值变成了15,下拉框面板消失的时候值还是15,不会变成未改变之前的)
var refreshRow = $(id).datagrid("getRowData",rowIndex);
//1.拖动滚动条,那么会立即失去焦点,执行"blur"事件,此时再点击面板选项,才会进入"onHidePanel"中
//2.没有拖动滚动条,而是点击面板选项导致失去焦点,会先进入"blur",再进入"onHidePanel"
//3.如果没有拖动下拉框的滚动条,直接点击其他地方(即失去焦点),那么会先进入"onHidePanel"中,然后再执行失去焦点事件"blur"(但是在onHidePanel()方法中,已经做了销毁编辑框,那么input框已经没有了,就不会再执行所谓的失去焦点事件了,如果在onHidePanel中没有销毁编辑框,那么在隐藏面板之后,还会进入blur事件)
//其实下拉框可以这么做:失去焦点销毁编辑框,只有在隐藏面板的时候才销毁编辑框,保存数据
if(ed.type=="combobox" && typeof(zdyCheckField)!=undefined){
comboboxValue.id = id;
comboboxValue.rowIndex = rowIndex;
comboboxValue.field = field;
changes['status'] = "p";
comboboxValue.row = refreshRow;
comboboxValue.changes = changes;
comboboxValue.value = $(".datagrid-editable-input:eq(0)").val();
}else{
_destroyCellEditor($(id)[0],{index:rowIndex,field:field});
//原来的记录的值
var oldVal=row[field];
if(showNumValue!=undefined){
//乘以数量后的值
oldVal = showNumValue;
}
var newVal=this.value;
if(oldVal!=newVal){//值有改变
changes[field]=newVal;
//此时值已经有刷新
//根据失去焦点后该列改变后的值再刷新行
refreshRow[field] = newVal;
//后台返回的值有可能会改变该row的其他的值,而不仅仅是改变field这个值(像改变num,同时会改变sums),所有这里不使用row,而使用即时查找的refreshRow了
// row[field]=newVal;
changes["status"]="P";
onAfterEditing(rowIndex,refreshRow,changes,id);
}
_rowIndex = undefined;
_field = undefined;
_rowId = undefined;
}
});
var rows=$(id).datagrid("getRows");
//$(ed.target).unbind("keydown").bind('keydown', function(){}这个是下拉选框的键盘事件,所以上下方向键默认是下拉面板的上下记录
$(".datagrid-editable-input").unbind('keydown').bind('keydown', function()//这个是input框,而不会是下拉面板
{
//
stopBubble();
var keyCode = window.event.keyCode;
if(keyCode==13||keyCode==37||keyCode==38||keyCode==39||keyCode==40){
switch (keyCode) {
case 13:/*enter*/
$(this).blur();
endEditing(id);
event.returnValue=false;
if(typeof(eprjType) != 'undefined' && eprjType ==3){
//新增单价工程禁止键盘操作
return false;
}
if(rowIndex<rows.length-1){
if(typeof(checkNumPosition)!=undefined && $.isFunction(checkNumPosition)){
//如果为true,表示需要跳到num这个field的表格
var a = checkNumPosition(field);
if(a){
if(editNumCell!=undefined && $.isFunction(editNumCell) && field!="num"){
editNumCell(rowIndex,value,id);
}
}else{
if(typeof(reloadFlag) == "undefined"){
onClickRow(rowIndex+1,field,value,id);
}else{
_rowIndex = rowIndex+1;
_field = field;
_rowId= id;
}
}
}else{
if(typeof(reloadFlag) == "undefined"){
onClickRow(rowIndex+1,field,value,id);
}else{
_rowIndex = rowIndex+1;
_field = field;
_rowId= id;
}
}
}else{
$(id).parents('.datagrid-view').find(":checkbox").focus();
//这个$('a:eq(0)')为"增加"按钮
// $('a:eq(0)').focus();
}
break;
case 37:/* Left ←*/
$(this).blur();
//停止正在被编辑的表格
endEditing(id);
//禁止默认键盘事件
event.returnValue=false;
if(typeof(eprjType) != 'undefined' && eprjType ==3){
//新增单价工程禁止键盘操作
return false;
}
if(field!=EditorFields[0]){
//找到该editor并获取焦点
var prevfiled = getOtherEditField(field,-1);
onClickRow(rowIndex,prevfiled,value,id);
}
break;
case 38:/* up ←*/
$(this).blur();
endEditing(id);
event.returnValue=false;
if(typeof(eprjType) != 'undefined' && eprjType ==3){
//新增单价工程禁止键盘操作
return false;
}
if(typeof(reloadFlag) == "undefined"){
if(rowIndex>0){
onClickRow(rowIndex-1,field,value,id);
}else{
$(id).parents('.datagrid-view').find(":checkbox").focus();
}
}else{
_rowIndex = rowIndex-1;
_field = field;
_rowId= id;
}
break;
case 39:/* right ←*/
$(this).blur();
endEditing(id);
event.returnValue=false;
if(typeof(eprjType) != 'undefined' && eprjType ==3){
//新增单价工程禁止键盘操作
return false;
}
if(field!=EditorFields[EditorFields.length-1]){
//setTimeout(function(){},100);//这里不需要阻断,因为此时该段代码需要放在save()之前执行
var nextfield = getOtherEditField(field,1);
onClickRow(rowIndex,nextfield,value,id);
}
break;
case 40:/*Down ↓*/
$(this).blur();
endEditing(id);
event.returnValue=false;
if(typeof(eprjType) != 'undefined' && eprjType ==3){
//新增单价工程禁止键盘操作
return false;
}
if(typeof(reloadFlag) == "undefined"){
if(rowIndex<rows.length-1){
onClickRow(rowIndex+1,field,value,id);
}else{
$(id).parents('.datagrid-view').find(":checkbox").focus();
}
}else{
_rowIndex = rowIndex+1;
_field = field;
_rowId= id;
}
break;
}
};
if(keyCode == 27){/*esc */
_destroyCellEditor($(id)[0],{index:rowIndex,field:field,});
_rowIndex = undefined;
_field = undefined;
_rowId=undefined;
};
});
};
}
return true;
}
function endEditing(id) {
if (_rowIndex == undefined || _field == undefined || id == undefined) {
comboboxValue = {};
return true;
}
$(id).datagrid('endEditCell', {index: _rowIndex, field: _field});
_rowIndex = undefined;
_field = undefined;
_rowId = undefined;
comboboxValue = {};
return true;
}
function afterEdit(rowIndex, rowData, changes,id){
//如果没有新增项,该代码可以不写(更新的时候去掉数字后面多余的0)
for(var key in rowData){
if (!$.isArray(rowData[key]) && !$.isFunction(rowData[key])
&& (typeof rowData[key]) == "object")
{
continue;
}
var value = rowData[key];
if(value && !isNaN(value)){
value = value*100000/100000;
rowData[key] = value;
}
}
$(id).datagrid('updateRow',{
index: rowIndex,
row: rowData
});
$(id).datagrid('acceptChanges');
//重名函数加判断
if(!clickFunFlag){
if(clickFun && $.isFunction(clickFun)){
clickFun();
}
}
}
function onAfterEditing(rowIndex,row,changes,id){
var saveData=save(rowIndex,row,changes,id);
row=saveData[0];
changes=saveData[1];
afterEdit(rowIndex,row,changes,id);
}
1022
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
