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

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

效果图:

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

封装代码:

function wm_click_modify(config) {this.identify = config.identify;this.callback = config.callback;this.srcElement = null;this.id = null;this.field = null;this.input = null;this.signSize = typeof config.signSize == 'undefined' ? 1 : config.signSize;this.sign = typeof config.signObj == 'undefined' ? true : config.signObj;this.signColor = typeof config.signColor == 'undefined' ? '#f00' : config.signColor;this.dataType = null;this.datas = null;this.radio_value = null;this.select_value = null;this.selector = null;
}
wm_click_modify.prototype = {create: function () {var elem = document.querySelectorAll(this.identify)var that = this;for (i = 0; i < elem.length; i++) {if (that.sign == true) {elem[i].style.position = 'relative';elem[i].style.overflow = 'hidden';var div = document.createElement("div");div.style.position = 'absolute';div.style.backgroundColor = this.signColor;div.style.right = this.signSize * -2 + 'px';div.style.top = this.signSize * -2 + 'px';div.title = '双击空白区域可编辑'div.style.width = this.signSize * 4 + 'px';div.style.height = this.signSize * 4 + 'px';div.style.transform = "rotate(45deg)"elem[i].appendChild(div)}elem[i].addEventListener('dblclick', function (e) {that.dblclick_e(e);}, true)}},dblclick_e: function (e) {if (e.srcElement.nodeName.toLowerCase() == 'input' || e.srcElement.nodeName.toLowerCase() == 'textarea' || e.srcElement.nodeName.toLowerCase() == 'radio' || e.srcElement.nodeName.toLowerCase() == 'select') {return;}var input;var that = this;this.srcElement = e.srcElement;var id = e.srcElement.getAttribute('data-id');var field = e.srcElement.getAttribute('data-field');this.id = id;this.field = field;this.dataType = e.srcElement.getAttribute('data-datatype');var ohtml = e.srcElement.innerHTML;var ovalue = e.srcElement.innerText;var container_remove = document.getElementsByClassName('container_wm_click_modify');if (container_remove.length > 0) {for (var i = 0; i < container_remove.length; i++) {container_remove[i].parentNode.innerHTML = container_remove[i].getAttribute('ohtml');}}let offsetWidth = e.srcElement.offsetWidth == 0 ? 40 : e.srcElement.offsetWidth;let offsetHeight = e.srcElement.offsetHeight == 0 ? 100 : e.srcElement.offsetHeight;e.srcElement.innerHTML = '';var container = document.createElement('span')container.className = 'container_wm_click_modify';container.setAttribute('ohtml', ohtml);e.srcElement.appendChild(container);if (this.dataType == null || this.dataType == 'text' || this.dataType == '') {input = document.createElement("textarea");this.input = input;input.id = 'wm_click_create_input_' + field + '_' + id;input.style.borderColor = "#ccc";input.style.borderWidth = "1px"input.style.padding = "5px";//input.style.resize = 'none';input.style.width = offsetWidth + 'px';input.style.height = offsetHeight + 'px';input.setAttribute('ovalue', ovalue);input.setAttribute('ovalue_html', ohtml);input.value = ovalue;e.srcElement.appendChild(input)input.focus();input.onblur = function () {if (this.getAttribute('ovalue') != this.value) {console.log('提交')var newvalue = this.value;if (typeof that.callback != 'undefined') {that.callback({ id: id, field: field, value: newvalue })} else {console.log('未定义callback')e.srcElement.innerHTML = document.getElementById(field + '_' + id).value;}} else {console.log('不提交')e.srcElement.innerHTML = this.getAttribute('ovalue_html');}}} else if (this.dataType == 'radio') {var label, span, that = thisvar data_list = e.srcElement.getAttribute('data-datalist');if (data_list == '' || data_list == null) {return;}this.datas = JSON.parse(data_list);var tmp = document.createElement('input')//tmp.id = this.field + '_' + this.id;tmp.value = ovalue;tmp.type = 'hidden';tmp.setAttribute('ovalue_html', ohtml);tmp.setAttribute('ovalue', ovalue);this.input = tmp;container.appendChild(tmp)for (var k = 0; k < this.datas.length; k++) {label = document.createElement("label");label.style.marginRight = "10px"container.appendChild(label);input = document.createElement("input");input.type = "radio";input.name = field;input.value = this.datas[k].value;input.setAttribute('value_title', this.datas[k].title)if (ovalue == this.datas[k].title) {input.checked = true;input.focus();}input.style.marginRight = "6px";input.style.width = "24px";input.style.height = "24px";input.style.verticalAlign = "middle";span = document.createElement("span");span.innerHTML = this.datas[k].title;label.appendChild(span);label.insertBefore(input, span);var that = this;input.onclick = function (e) {var newvalue = this.getAttribute('value_title');that.radio_value = newvalue;if (newvalue != ovalue) {console.log('提交')tmp.value = newvalue;if (typeof that.callback != 'undefined') {that.callback({ id: id, field: field, value: this.value })} else {console.log('未定义callback')that.srcElement.innerHTML = ohtml;}} else {console.log('不提交')that.srcElement.innerHTML = ohtml;}}input.onblur = function (e) {console.log("on my god")}}} else if (this.dataType == 'select') {var label, span, that = thisvar data_list = e.srcElement.getAttribute('data-datalist');if (data_list == '' || data_list == null) {return;}this.datas = JSON.parse(data_list);var tmp = document.createElement('input')tmp.value = ovalue;tmp.type = 'hidden';tmp.setAttribute('ovalue_html', ohtml);tmp.setAttribute('ovalue', ovalue);this.input = tmp;container.appendChild(tmp)var selector = document.createElement('select');this.selector = selector;container.appendChild(selector)selector.style.padding = "2px";selector.style.fontSize = "18px"for (var k = 0; k < this.datas.length; k++) {selector.options.add(new Option(this.datas[k].title, this.datas[k].value))if (this.datas[k].title == ovalue) {selector.options[k].selected = true;}}selector.focus();selector.onchange = function (e) {var newvalue = selector.options[selector.selectedIndex].text;if (newvalue != ovalue) {that.select_value = newvalue;console.log('提交', newvalue)if (typeof that.callback != 'undefined') {that.callback({ id: id, field: field, value: this.value })} else {console.log('未定义callback')that.srcElement.innerHTML = ohtml;}}}selector.onblur = function (e) {that.srcElement.innerHTML = ohtml;}}},success: function () {try {if (this.dataType == null || this.dataType == 'text' || this.dataType == '') {this.srcElement.innerHTML = document.getElementById('wm_click_create_input_' + this.field + '_' + this.id).value;} else if (this.dataType == 'radio') {this.srcElement.innerHTML = this.radio_value} else if (this.dataType == 'select') {this.selector.onblur = null;this.srcElement.innerHTML = this.select_value;}} catch (e) {console.log('这里不要展示给用户。select在blur时已删除元素,因此会报错。而又必须在blur时干点什么')}if (this.sign == true) {var div = document.createElement("div");div.style.position = 'absolute';div.style.backgroundColor = this.signColor;div.style.right = this.signSize * -2 + 'px';div.style.top = this.signSize * -2 + 'px';div.style.width = this.signSize * 4 + 'px';div.style.height = this.signSize * 4 + 'px';div.style.transform = "rotate(45deg)"this.srcElement.appendChild(div)}},fail: function () {try {this.srcElement.innerHTML = this.input.getAttribute('ovalue_html');} catch (e) {}}
};

1、调用方法:

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

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

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

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

<div>sos</div>

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

 

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

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

如果是td那就要这样改:

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

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

new wm_click_modify({identify:"td[modify]", signObj: true, signSize:1.5, signColor:'green', callback: function(res){var that = this;var loading = msgbox.show('正在提交', 'loading')wm_ajax('/admin/Setting/edit.html',{data: {id:res.id,field:res.field,value:res.value},dataType: 'json',type: 'post',sync: true,success: function(data){console.log(data)if(data.code > 0){msgbox.close(loading)msgbox.show(data.msg, 'right');that.success()} else {msgbox.close(loading)msgbox.show(data.msg, 'error');that.fail();}},error: function(data){msgbox.close(loading)msgbox.show(data.msg, 'error');that.fail();}});}}).create();

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

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

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

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

第五个参数是回调函数  
 

callback:function(res){//在res中,包含以下内容: id(本条数据的记录id)、field(要修改的字段名)、value(新值)取值分别为:res.idres.fieldres.value}        

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

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

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

const that = this;
ajax({url:'',data: {id:res.id,field:res.field,value:res.value},success: function(data){if(data.code > 0){alert('修改成功');that.success()               //这是新添加的} else {that.fail();                 //这是新添加的}},error:function(e){alert("服务器错误,请稍候再试");that.fail();                     //这是新添加的}
})

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

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

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

假设原始html内容为:

<td>sos</td>

如果想让用户双击后变成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。

调用部分代码不变。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/205283.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[Java]JUC并发编程

JUC并发编程 一、什么是JUC 使用到 java.util 工具包、包、分类 二、线程和进程 进程&#xff1a;一个正在运行的程序&#xff0c;QQ.exe Music.exe 程序的集合&#xff1b; 一个进程往往可以包含多个线程&#xff0c;至少包含一个&#xff01; Java默认有两个线程&#x…

浅学指针(3)

系列文章目录 文章目录 系列文章目录前言系列文章目录前言1. 字符指针变量2. 数组指针变量那数组指针变量应该是&#xff1a;存放的应该是数组的地址&#xff0c;能够指向数组的指针变量。2.2 数组指针变量怎么初始化总结&#xff1a;函数名就是地址&#xff0c;&函数名和直…

ubuntu22.04在线安装redis,可选择版本

安装脚本7.0.5版本 在线安装脚本&#xff0c;默认版本号是7.0.5&#xff0c;可以根据需要选择需要的版本进行下载编译安装 sudo apt-get install gcc -y sudo apt-get install pkg-config -y sudo apt-get install build-essential -y#安装redis rm -rf ./tmp.log systemctl …

AI4S Cup学习赛-中枢神经系统药物研发:药物筛选与优化

赛题介绍 链接&#xff1a;Bohrium 案例广场 (dp.tech) 中枢神经系统类疾病长期以来存在着重要的临床未满足需求。据统计&#xff0c;在当前人口老龄化趋势下&#xff0c;阿兹海默&#xff08;AD&#xff09;、帕金森病&#xff08;PD&#xff09;等神经退行性疾病和脑癌、中…

MySQL主从复制架构

MySQL主从复制架构 一、MySQL集群概述 ##1、集群的主要类型 高可用集群&#xff08;High Available Cluster&#xff0c;HA Cluster&#xff09; 高可用集群是指通过特殊的软件把独立的服务器连接起来&#xff0c;组成一个能够提供故障切换&#xff08;Fail Over&#xff09…

【前端系列】前端存档术之keep-alive

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

电子学会C/C++编程等级考试2022年09月(三级)真题解析

C/C++等级考试(1~8级)全部真题・点这里 第1题:课程冲突 小 A 修了 n 门课程, 第 i 门课程是从第 ai 天一直上到第 bi 天。 定义两门课程的冲突程度为 : 有几天是这两门课程都要上的。 例如 a1=1,b1=3,a2=2,b2=4 时, 这两门课的冲突程度为 2。 现在你需要求的是这 n 门课…

如何设置Linux终端提示信息

如何设置Linux终端提示信息 1 方法一&#xff1a;只能在VSCode或者Pycharm终端显示提示信息2 方法二&#xff1a;只能在MobaXterm等远程软件上显示提示3 方法三&#xff1a;避免用户没看到上面的提示&#xff0c;上面两种都设置一下 在使用远程终端时&#xff0c;由于多用户使用…

Qt 软件调试(一) Log日志调试

终于这段时间闲下来了&#xff0c;可以系统的编写Qt软件调试的整个系列。前面零零星星的也有部分输出&#xff0c;但终究没有形成体系。借此机会&#xff0c;做一下系统的总结。慎独、精进~ 日志是有效帮助我们快速定位&#xff0c;找到程序异常点的实用方法。但是好的日志才能…

MATLAB | 官方举办的动图绘制大赛 | 第三周赛情回顾

MATHWORKS官方举办的迷你黑客大赛第三期(MATLAB Flipbook Mini Hack)的最新进展&#xff01;&#xff01; 很荣幸前三周都成为了阶段性获奖者~&#xff1a; https://ww2.mathworks.cn/matlabcentral/communitycontests/contests/6/entries/13382 https://ww2.mathworks.cn/mat…

实验一 SAS 基本操作和数据表的导入 2023-11-29

一、上机目的 熟悉SAS的集成环境并掌握它的基本操作。理解SAS程序的结构&#xff0c;理解其中的过程&#xff0c;过程选项&#xff0c;语句&#xff0c;语句选项等概念&#xff0c;掌握SAS编程技术。 二、上机内容 主要有SAS操作界面、SAS窗口操作、SAS菜单操作、SAS按钮操作…

【Java】泛型的简单使用

文章目录 一、包装类1.基本数据类型和对应的包装类2.自动装箱和自动拆箱3.手动装箱和手动拆箱 二、什么是泛型三、泛型的使用四、裸类型&#xff08;Raw Type&#xff09;五、泛型是如何编译的六、泛型的上界七、泛型方法总结 一、包装类 在了解泛型之前我们先了解什么是包装类…

对称加密与非对称加密的区别是什么?

对称加密与非对称加密的区别是什么&#xff1f; 对称加密概念&#xff1a;好处和坏处&#xff1a;基本原理 非对称加密概念&#xff1a;工作原理&#xff1a; 两者区别安全性处理速度密钥管理通信双方数量 对称加密 概念&#xff1a; 同一个密钥可以同时用来对信息进行加密和…

Flutter:多线程Isolate的简单使用

在flutter中如果要使用线程&#xff0c;需要借助Isolate来实现。 简介 在Flutter中&#xff0c;Isolate是一种轻量级的线程解决方案&#xff0c;用于在应用程序中执行并发任务。Isolate可以被认为是独立于主线程的工作单元&#xff0c;它们可以在后台执行任务而不会阻塞应用程…

vite项目配置vite.config.ts在打包过程中去除日志

在生产环境上&#xff0c;务必要将日志清除干净&#xff0c;其因有二&#xff0c;在webgis系统中&#xff0c;有很多几何数据&#xff0c;体积大、数量多&#xff0c;很容易引起系统卡顿&#xff1b;清除log后&#xff0c;系统看着舒服&#xff0c;协同开发有很多无聊的日志&am…

【Redis】前言--redis产生的背景以及过程

一.介绍 为什么会出现Redis这个中间件&#xff0c;从原始的磁盘存储到Redis中间又发生了哪些事&#xff0c;下面进入正题 二.发展史 2.1 磁盘存储 最早的时候都是以磁盘进行数据存储&#xff0c;每个磁盘都有一个磁道。每个磁道有很多扇区&#xff0c;一个扇区接近512Byte。…

【送书活动二期】Java和MySQL数据库中关于小数的保存问题

之前总结过一篇文章mysql数据库&#xff1a;decimal类型与decimal长度用法详解&#xff0c;主要是个人学习期间遇到的mysql中关于decimal字段的详解&#xff0c;最近在群里遇到一个小伙伴提出的问题&#xff0c;也有部分涉及&#xff0c;今天就再大致总结一下Java和MySQL数据库…

ArcGIS如何处理并加载Excel中坐标数据?

做GIS行业的各位肯定免不了跟数据打交道&#xff0c;其中数据的处理说复杂也复杂&#xff0c;因为我们要花时间去做数据的转换及调整工作&#xff0c;那说简单也简单&#xff0c;因为我们有很多的工具可以使用&#xff0c;那么今天我就给大家带来处理Excel中的GIS数据中的其中一…

Windows 10和11的一个专用的设置菜单,让清理空间变得方便快捷

需要在Windows电脑上释放一些磁盘空间吗?Windows 10和Windows 11都提供了一个专用的设置菜单,使过程更容易。从该菜单中,你可以查看设备上使用了多少空间以及内容类型。 Windows中的“存储”设置还允许你快速清除空间,并启用“存储感知”自动删除临时文件和回收站项目。这…

Toast UI Editor上传图片到Flask

Toast UI Editor国内文档几乎搜不到&#xff0c;国外文档也写得不是特别项目&#xff0c;没有太多举例的demo。一开始选择使用这个就是因为UI好看。不过看看源码把思路滤清了。 他会给把图片转成Base64&#xff0c;到时候发表单直接丢过去就行了&#xff0c;blob这个参数能拿到…