html的table實現雙擊打開編輯框,失去焦點保存

html:html

<td ondblclick="zdyEditTableCell(this,'<s:property value="#l.id"/>','sums')"><s:property value="#l.sums" /></td>

JS:app

/**
 * html的table雙擊打開編輯框(原始的table的單元格td的ondblclick事件)
 * @param element 表格的td
 * @param id 指標indexItems的id值
 * @param field 表示的是indexItems的哪一個屬性值被修改
 */
function zdyEditTableCell(element, id,field) {
	if(id <= 0){
		return false;
	}
    var oldhtml = $.trim($(element).text());//原單元格里的值
    var str = "<input type='text' class='edit' name='test' style='width:90%' onblur='inputBlurFun(this,"+id+",\""+field+"\","+oldhtml+");' value='"+oldhtml+"'/>";
    
    $(element).text('');
    $(element).append(str);
    $(element).find('input[name="test"]').focus();
    $(element).find('input[name="test"]')[0].select();
}

/**
 * html的table的單元格失去焦點事件
 * @param input input輸入框
 * @param id 指標indexItems的id值
 * @param field 表示的是indexItems的哪一個屬性值被修改
 * @param oldhtml 原值
 * @returns {Boolean}
 */
function inputBlurFun(input,id,field,oldhtml){
    var text = $(input).val();
    $(input).text(text);
  //移除新增長的input元素
    var td = $(input).parent('td');
    $(input).remove();
    td.text(text);
    if(oldhtml == text){
    	//若是值沒有被改變,則不修改
    	var uid = $(this).attr('uid');
		changePrevFun(td,text,uid,false);
    	return false;
    }
    var url="./iface/changeIndexItems";
    var data = {};
    data['indexItemsObject.id'] = id;
    data['indexItemsObject.'+field+''] = text;
    data['id'] = eprjInfoId;
	$.post(url,data,function(data){
		var obj = eval("("+data+")");
		if(obj.returnCode == 1){
			$.easyui.messager.show({ icon: "info", msg: obj.message, position: "topCenter" ,timeout:3000}); 
			return false;
		}
		$.easyui.messager.show({ icon: "info", msg: obj.message, position: "topCenter" ,timeout:3000}); 
		 return false;
	});
    return false;
}
相關文章
相關標籤/搜索