广西网站建设招标公司,wap网站建设免费,深圳网站建设公司哪里好,html5开发环境前面发过一个版本了#xff0c;后来又追加了些功能。重新发一版。新版支持select和radio。
效果图#xff1a; 右上角带有绿标的#xff0c;是可以修改的单元格。如果不喜欢显示绿标#xff0c;可以传递参数时指定不显示#xff0c;如果想改为其它颜色#xff0c;也可以…前面发过一个版本了后来又追加了些功能。重新发一版。新版支持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 1pxinput.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 10pxcontainer.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 18pxfor (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里的代码也要做些修改。
原来你的代码是这样写的
divsos/div
假如这个内容是数据库中id为3的记录字段名为name的内容现在我们想双击这个DIV可以修改修改完后再提交到后端。我们要这样来修改 div modify data-id3 data-fieldnamesos/div
事实上并不局限于div。在table中的td也可以这样来弄。理论上在哪都行这取决于选择器能否正确选择要修改的元素。
如果是td那就要这样改
td modify data-id3 data-fieldnamesos/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即指定指示器大小。取值可以为11.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内容为
tdsos/td
如果想让用户双击后变成select需要这样修改
td modify data-id3 data-fieldgender data-datalist[{value:0, title:不知道},{value:1, title:男},{value:2, title:女}] data-datatypeselectsostd
其中data-id和data-field和上面一样一个指定数据表的id(唯一索引)一个指定字段名。后面datalist就是一个数据列表用户可以选择里面的数据。data-datatype 指定元素类型这里的值取的是select意思是说当用户双击后会变成select让用户选择data-datalist中的数据。如果想用radio那只需要把data-datatype的值设置为radio即可。
因为radio没有blur事件,封装代码虽然处理了这种情况但是还是不如select更方便。所以2者选一的话建议使用select。
调用部分代码不变。
