前面发过一个版本了，后来又追加了些功能。重新发一版。新版支持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 = this
var 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 = this
var 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.id
res.field
res.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。
调用部分代码不变。
