• js双击修改元素内容并提交到后端封装实现

    前面发过一个版本了，后来又追加了些功能。重新发一版。新版支持select和radio。

    效果图：

    右上角带有绿标的，是可以修改的单元格。如果不喜欢显示绿标，可以传递参数时指定不显示，如果想改为其它颜色，也可以传递参数时指定颜色。如果觉得标记符号太小，可以通过signSize设置其大小。例如 1， 1.5， 2， 3 都可以。必须 为数字。

    封装代码：

    1. function wm_click_modify(config) {
    2. 	this.identify = config.identify;
    3. 	this.callback = config.callback;
    4. 	this.srcElement = null;
    5. 	this.id = null;
    6. 	this.field = null;
    7. 	this.input = null;
    8. 	this.signSize = typeof config.signSize == 'undefined' ? 1 : config.signSize;
    9. 	this.sign = typeof config.signObj == 'undefined' ? true : config.signObj;
    10. 	this.signColor = typeof config.signColor == 'undefined' ? '#f00' : config.signColor;
    11. 	this.dataType = null;
    12. 	this.datas = null;
    13. 	this.radio_value = null;
    14. 	this.select_value = null;
    15. 	this.selector = null;
    16. }
    17. wm_click_modify.prototype = {
    18. 	create: function () {
    19. 		var elem = document.querySelectorAll(this.identify)
    20.  
    21. 		var that = this;
    22. 		for (i = 0; i < elem.length; i++) {
    23. 			if (that.sign == true) {
    24. 				elem[i].style.position = 'relative';
    25. 				elem[i].style.overflow = 'hidden';
    26. 				var div = document.createElement("div");
    27. 				div.style.position = 'absolute';
    28. 				div.style.backgroundColor = this.signColor;
    29. 				div.style.right = this.signSize * -2 + 'px';
    30. 				div.style.top = this.signSize * -2 + 'px';
    31. 				div.title = '双击空白区域可编辑'
    32. 				div.style.width = this.signSize * 4 + 'px';
    33. 				div.style.height = this.signSize * 4 + 'px';
    34. 				div.style.transform = "rotate(45deg)"
    35. 				elem[i].appendChild(div)
    36. 			}
    37. 			elem[i].addEventListener('dblclick', function (e) {
    38. 				that.dblclick_e(e);
    39. 			}, true)
    40. 		}
    41. 	},
    42. 	dblclick_e: function (e) {
    43. 		if (e.srcElement.nodeName.toLowerCase() == 'input' || e.srcElement.nodeName.toLowerCase() == 'textarea' || e.srcElement.nodeName.toLowerCase() == 'radio' || e.srcElement.nodeName.toLowerCase() == 'select') {
    44. 			return;
    45. 		}
    46. 		var input;
    47. 		var that = this;
    48. 		this.srcElement = e.srcElement;
    49. 		var id = e.srcElement.getAttribute('data-id');
    50. 		var field = e.srcElement.getAttribute('data-field');
    51. 		this.id = id;
    52. 		this.field = field;
    53. 		this.dataType = e.srcElement.getAttribute('data-datatype');
    54. 		var ohtml = e.srcElement.innerHTML;
    55. 		var ovalue = e.srcElement.innerText;
    56.  
    57. 		var container_remove = document.getElementsByClassName('container_wm_click_modify');
    58. 		if (container_remove.length > 0) {
    59. 			for (var i = 0; i < container_remove.length; i++) {
    60. 				container_remove[i].parentNode.innerHTML = container_remove[i].getAttribute('ohtml');
    61. 			}
    62. 		}
    63. 		let offsetWidth = e.srcElement.offsetWidth == 0 ? 40 : e.srcElement.offsetWidth;
    64. 		let offsetHeight = e.srcElement.offsetHeight == 0 ? 100 : e.srcElement.offsetHeight;
    65. 		
    66. 		e.srcElement.innerHTML = '';
    67. 		var container = document.createElement('span')
    68. 		container.className = 'container_wm_click_modify';
    69. 		container.setAttribute('ohtml', ohtml);
    70. 		e.srcElement.appendChild(container);
    71. 		if (this.dataType == null || this.dataType == 'text' || this.dataType == '') {
    72. 			input = document.createElement("textarea");
    73. 			this.input = input;
    74. 			input.id = 'wm_click_create_input_' + field + '_' + id;
    75. 			input.style.borderColor = "#ccc";
    76. 			input.style.borderWidth = "1px"
    77. 			input.style.padding = "5px";
    78. 			//input.style.resize = 'none';
    79. 			
    80.  
    81. 			input.style.width = offsetWidth + 'px';
    82. 			input.style.height = offsetHeight + 'px';
    83. 			input.setAttribute('ovalue', ovalue);
    84. 			input.setAttribute('ovalue_html', ohtml);
    85. 			input.value = ovalue;
    86. 			e.srcElement.appendChild(input)
    87. 			input.focus();
    88. 			input.onblur = function () {
    89. 				if (this.getAttribute('ovalue') != this.value) {
    90. 					console.log('提交')
    91. 					var newvalue = this.value;
    92. 					if (typeof that.callback != 'undefined') {
    93. 						that.callback({ id: id, field: field, value: newvalue })
    94. 					} else {
    95. 						console.log('未定义callback')
    96. 						e.srcElement.innerHTML = document.getElementById(field + '_' + id).value;
    97. 					}
    98. 				} else {
    99. 					console.log('不提交')
    100. 					e.srcElement.innerHTML = this.getAttribute('ovalue_html');
    101. 				}
    102. 			}
    103. 		} else if (this.dataType == 'radio') {
    104. 			var label, span, that = this
    105. 			var data_list = e.srcElement.getAttribute('data-datalist');
    106. 			if (data_list == '' || data_list == null) {
    107. 				return;
    108. 			}
    109. 			this.datas = JSON.parse(data_list);
    110. 			var tmp = document.createElement('input')
    111. 			//tmp.id = this.field + '_' + this.id;
    112. 			tmp.value = ovalue;
    113. 			tmp.type = 'hidden';
    114. 			tmp.setAttribute('ovalue_html', ohtml);
    115. 			tmp.setAttribute('ovalue', ovalue);
    116. 			this.input = tmp;
    117.  
    118. 			container.appendChild(tmp)
    119.  
    120. 			for (var k = 0; k < this.datas.length; k++) {
    121. 				label = document.createElement("label");
    122. 				label.style.marginRight = "10px"
    123.  
    124. 				container.appendChild(label);
    125. 				input = document.createElement("input");
    126. 				input.type = "radio";
    127. 				input.name = field;
    128. 				input.value = this.datas[k].value;
    129. 				input.setAttribute('value_title', this.datas[k].title)
    130. 				if (ovalue == this.datas[k].title) {
    131. 					input.checked = true;
    132. 					input.focus();
    133. 				}
    134.  
    135. 				input.style.marginRight = "6px";
    136. 				input.style.width = "24px";
    137. 				input.style.height = "24px";
    138. 				input.style.verticalAlign = "middle";
    139. 				span = document.createElement("span");
    140. 				span.innerHTML = this.datas[k].title;
    141. 				label.appendChild(span);
    142. 				label.insertBefore(input, span);
    143. 				var that = this;
    144. 				input.onclick = function (e) {
    145. 					var newvalue = this.getAttribute('value_title');
    146. 					that.radio_value = newvalue;
    147. 					if (newvalue != ovalue) {
    148. 						console.log('提交')
    149. 						tmp.value = newvalue;
    150. 						if (typeof that.callback != 'undefined') {
    151. 							that.callback({ id: id, field: field, value: this.value })
    152. 						} else {
    153. 							console.log('未定义callback')
    154. 							that.srcElement.innerHTML = ohtml;
    155. 						}
    156. 					} else {
    157. 						console.log('不提交')
    158. 						that.srcElement.innerHTML = ohtml;
    159. 					}
    160. 				}
    161. 				input.onblur = function (e) {
    162. 					console.log("on my god")
    163. 				}
    164. 			}
    165. 		} else if (this.dataType == 'select') {
    166. 			var label, span, that = this
    167. 			var data_list = e.srcElement.getAttribute('data-datalist');
    168. 			if (data_list == '' || data_list == null) {
    169. 				return;
    170. 			}
    171. 			this.datas = JSON.parse(data_list);
    172.  
    173. 			var tmp = document.createElement('input')
    174. 			tmp.value = ovalue;
    175. 			tmp.type = 'hidden';
    176. 			tmp.setAttribute('ovalue_html', ohtml);
    177. 			tmp.setAttribute('ovalue', ovalue);
    178. 			this.input = tmp;
    179. 			container.appendChild(tmp)
    180.  
    181. 			var selector = document.createElement('select');
    182. 			this.selector = selector;
    183. 			container.appendChild(selector)
    184. 			selector.style.padding = "2px";
    185. 			selector.style.fontSize = "18px"
    186. 			for (var k = 0; k < this.datas.length; k++) {
    187. 				selector.options.add(new Option(this.datas[k].title, this.datas[k].value))
    188. 				if (this.datas[k].title == ovalue) {
    189. 					selector.options[k].selected = true;
    190. 				}
    191. 			}
    192. 			selector.focus();
    193. 			selector.onchange = function (e) {
    194. 				var newvalue = selector.options[selector.selectedIndex].text;
    195. 				if (newvalue != ovalue) {
    196. 					that.select_value = newvalue;
    197.  
    198. 					console.log('提交', newvalue)
    199. 					if (typeof that.callback != 'undefined') {
    200. 						that.callback({ id: id, field: field, value: this.value })
    201. 					} else {
    202. 						console.log('未定义callback')
    203. 						that.srcElement.innerHTML = ohtml;
    204. 					}
    205. 				}
    206. 			}
    207. 			selector.onblur = function (e) {
    208. 				that.srcElement.innerHTML = ohtml;
    209. 			}
    210. 		}
    211. 	},
    212. 	success: function () {
    213. 		try {
    214. 			if (this.dataType == null || this.dataType == 'text' || this.dataType == '') {
    215. 				this.srcElement.innerHTML = document.getElementById('wm_click_create_input_' + this.field + '_' + this.id).value;
    216. 			} else if (this.dataType == 'radio') {
    217. 				this.srcElement.innerHTML = this.radio_value
    218. 			} else if (this.dataType == 'select') {
    219. 				this.selector.onblur = null;
    220. 				this.srcElement.innerHTML = this.select_value;
    221. 			}
    222. 		} catch (e) {
    223. 			console.log('这里不要展示给用户。select在blur时已删除元素，因此会报错。而又必须在blur时干点什么')
    224. 		}
    225. 		if (this.sign == true) {
    226. 			var div = document.createElement("div");
    227. 			div.style.position = 'absolute';
    228. 			div.style.backgroundColor = this.signColor;
    229. 			div.style.right = this.signSize * -2 + 'px';
    230. 			div.style.top = this.signSize * -2 + 'px';
    231. 			div.style.width = this.signSize * 4 + 'px';
    232. 			div.style.height = this.signSize * 4 + 'px';
    233. 			div.style.transform = "rotate(45deg)"
    234. 			this.srcElement.appendChild(div)
    235. 		}
    236.  
    237. 	},
    238. 	fail: function () {
    239. 		try {
    240. 			this.srcElement.innerHTML = this.input.getAttribute('ovalue_html');
    241. 		} catch (e) {
    242.  
    243. 		}
    244. 	}
    245. };

    1、调用方法：

    new wm_click_modify(json格式的参数).create();

    可以看到，主要就是json格式的参数这一块怎么写。后面会说，先说说前置工作。

    html里的代码也要做些修改。

    原来你的代码是这样写的：

    sos

    假如这个内容是数据库中id为3的记录字段名为name的内容，现在我们想双击这个DIV可以修改，修改完后再提交到后端。我们要这样来修改：

     

    <div modify data-id="3" data-field="name">sosdiv>

    事实上，并不局限于div。在table中的td也可以这样来弄。理论上在哪都行，这取决于选择器能否正确选择要修改的元素。

    如果是td那就要这样改：

    <td modify data-id="3" data-field="name">sostd>

     html内容已经准备好了。下面我们要让双击修改效果生效，调用上面封装的代码。以表格元素td为例。js代码如下：

    1. new wm_click_modify({identify:"td[modify]", signObj: true, signSize:1.5, signColor:'green', callback: function(res){
    2.             var that = this;
    3.             var loading = msgbox.show('正在提交', 'loading')
    4.             
    5.             wm_ajax('/admin/Setting/edit.html',{
    6.                 data: {
    7.                     id:res.id,
    8.                     field:res.field,
    9.                     value:res.value
    10.                 },
    11.                 dataType: 'json',
    12.                 type: 'post',
    13.                 sync: true,
    14.                 success: function(data){
    15.                     console.log(data)
    16.                     if(data.code > 0){
    17.                         msgbox.close(loading)
    18.                         msgbox.show(data.msg, 'right');
    19.                         that.success()
    20.                     } else {
    21.                         msgbox.close(loading)
    22.                         msgbox.show(data.msg, 'error');
    23.                         that.fail();
    24.                     }
    25.                 },
    26.                 error: function(data){
    27.                     msgbox.close(loading)
    28.                     msgbox.show(data.msg, 'error');
    29.                     that.fail();
    30.                 }
    31.             });
    32.         }}).create();

    第一个参数是 identify，即指定选择器的选择。凡是能被querySelector 选择的写法均受支持。示例代码中写的是td[modify]，即带modify属性的td元素。必须传递。

    第二个参数是signObj，即指定是否显示可编辑指示器。就是那个小绿点。如果未指定这个参数，则默认显示。

    第三个参数signSize，即指定指示器大小。取值可以为1，1.5, 2 等这些数字。如果未指定这个参数，默认为1

    第四个参数是signColor，即指定指示器颜色。取值为css颜色代码，例如： 'red'    '#f00'  都可以。如果未指定这个参数，默认为红色

    第五个参数是回调函数  
     

    1. callback:function(res){
    2.  
    3.     //在res中，包含以下内容： id(本条数据的记录id)、field(要修改的字段名)、value（新值）
    4.  
    5.     取值分别为：
    6.  
    7.     res.id
    8.  
    9.     res.field
    10.  
    11.     res.value
    12.  
    13. }        

    系统判断内容是否有修改，如果有修改，会回调这个函数，您需要在这个函数中写提交后端的代码，如果没有修改，不会回调这个函数。

    2、回调函数里的代码怎么写？

    回调函数一般就是用ajax往后端提交，有一点需要注意，当后端返回到前端处理结果之后，还需要调用一下封装代码中的一个方法。伪代码如下：

    1. const that = this;
    2. ajax({
    3.     url:'',
    4.     data: {
    5. 		id:res.id,
    6. 		field:res.field,
    7. 		value:res.value
    8. 	},
    9.     success: function(data){
    10.         if(data.code > 0){
    11.             alert('修改成功');
    12.             that.success()               //这是新添加的
    13.         } else {
    14.             that.fail();                 //这是新添加的
    15.         }
    16.     },
    17.     error:function(e){
    18.         alert("服务器错误，请稍候再试");
    19.         that.fail();                     //这是新添加的
    20.     }
    21. })

    懂ajax的应该看明白了。就是加了  that.success()  和that.fail()。必须要调用，否则页面上的内容不会改变。这样，后端就收到了要修改哪条记录的哪个字段，新值是多少。

    上面是对纯文本内容的修改，假如要修改的是性别呢，我们希望用户只选择男或女，并不希望输入其它内容。还有就是特殊的内容一般也只让选择不让手动修改。我们来看看select和radio的用法。

    从html的修改开始。还是以table的td为例。

    假设原始html内容为：

    <td>sostd>

    如果想让用户双击后变成select，需要这样修改：

    <td modify data-id="3" data-field="gender" data-datalist='[{"value":"0", "title":"不知道"},{"value":"1", "title":"男"},{"value":"2", "title":"女"}]' data-datatype="select">sos<td>

    其中data-id和data-field和上面一样，一个指定数据表的id(唯一索引)，一个指定字段名。后面datalist就是一个数据列表，用户可以选择里面的数据。data-datatype 指定元素类型，这里的值取的是select，意思是说当用户双击后，会变成select让用户选择data-datalist中的数据。如果想用radio，那只需要把data-datatype的值设置为radio即可。

    因为radio没有blur事件,封装代码虽然处理了这种情况，但是还是不如select更方便。所以，2者选一的话建议使用select。

    调用部分代码不变。

  • 相关阅读:
    二维码怎么做列表？点击可跳转其他内容
    顺序读写函数的介绍：fscanf & fprintf
    “深入理解机器学习性能评估指标：TP、TN、FP、FN、精确率、召回率、准确率、F1-score和mAP”
    【Spark】PySpark DataFrame
    falco 【3】 default macro
    C++goto语句
    《web课程设计》用HTML CSS做一个简洁、漂亮的个人博客网站
    01 初识HTML5
    【技术分享】堆叠交换机替换指导
    Herodotus——无需bridge借助Storage proof实现的以太坊跨层数据访问
  • 原文地址：https://blog.csdn.net/superfans98/article/details/134550769