js双击修改内容
来源:原创
时间:2016-08-08
作者:脚本小站
分类:JS/JQuery
/** * 双击修改 * @param o object this对象 * @param url string 修改调用的url,格式为: 模块/控制器/方法 例:__MODULE__/flink/set_field * @param msg string 修改后的提示信息 * * 在引用元素中加上 id="" field="" 两个属性 * * 前台使用示例: ondblclick="doubleClickUpdate(this,'__MODULE__/article/set_field')" * 旧的改新的后台需要改这几处,post改为get,val改为value */ function doubleClickUpdate(o,url,msg){ if(o.children.length >= 1){return false;} var id = o.id; var field = o.getAttribute('field'); var con = o.innerHTML; var w = o.offsetWidth-3; var h = o.offsetHeight-5; o.innerHTML = "<input id="+id+field+" style='width:"+w+"px;height:"+h+"px;border:0px solid #fff;outline:0;' value='"+con+"'>"; var update_input = document.getElementById(id+field); update_input.focus(); update_input.onblur = function (){ var val = update_input.value; if(typeof msg == 'undefined'){ this.parentNode.innerHTML = val; }else{ this.parentNode.innerHTML = msg; } //如果新旧值相同则不作为 if(con == val){return;} var ajax; if(window.XMLHttpRequest){ ajax = new XMLHttpRequest(); }else{ ajax = new ActiveXObject('Microsoft.XMLHTTP'); } ajax.open('GET',url+'/id/'+id+'/field/'+field+'/value/'+val,true); ajax.send(); } }
$(function (){ $(document).on('dblclick','.ajax_update',function (){ _Object = $(this); Url = '/article/Other/setFlinkField'; var oldVal = $(this).html(); var newVal = null; id = _Object.attr('_id'); field = _Object.attr('field'); if(_Object.children('input').length == 0){ width_ = _Object[0].offsetWidth-3; height_ = _Object[0].offsetHeight-5; S = "style='width:"+width_+"px;height:"+height_+"px;border:0px solid #fff;outline:0;'"; $(this).html('<input type="text" '+S+' id="'+id+field+'" value="'+oldVal+'"/>'); } input = $("#"+id+field); input.focus(); input.on('blur keyup',function (e){ var e = e || window.event; if(e.type == 'keyup' && e.keyCode != 13){return false;} newVal = input.val(); _Object.html(newVal); if(oldVal != newVal){ $.post(Url,{id:id,field:field,value:newVal},function (data,status){ if(status == 'success'){ if(data.status == 1){ _Object.addClass('bk2'); setTimeout(function (){_Object.removeClass('bk2');},100); }else{ _Object.addClass('red'); setTimeout(function (){_Object.removeClass('red');},100); } }else{ alert('网络错误'); } }); } }); }); });
双击使用textarea查看内容
$(document).on('dblclick','.dbclick',function (){ var thisObject = $(this); if(thisObject.children('textarea').length != 0) return null; var con = thisObject.children().html(); var width = thisObject.children().width(); var height = null; var brLength = null; var conLength = con.length; var singleHeight = 15; // 每一行的高度 var lineMaxNum = 29; //每行最大文字数目 console.log(conLength); if(temp = con.match(/\n/ig)){ brLength = temp.length;length; //换行个数 } if(brLength == null && conLength <= lineMaxNum){ height = singleHeight; }else if(brLength == null && conLength > lineMaxNum){ height = Math.ceil(conLength/lineMaxNum)*singleHeight; if(height > 200){ height = 200; } }else if(brLength > 0){ height = singleHeight*(brLength + 1); if(height > 200){ height = 200; } } var textareaObject = $('<textarea></textarea>'); textareaObject.css({height:height,width:width-4,display:'block',resize:'none',border:0,outline:0}).html(con); thisObject.html(textareaObject); textareaObject.focus(); textareaObject.on('blur',function (){ thisObject.html('<div style="max-height:20px;outline:0;" class="w_400 oh">'+con+'</div>'); }); });