使用 jquery.inline-edit.js 对 Textarea 进行内联编辑 – 获取 id 并保存

Question

我正在寻找一种在表中实现内联编辑的简单方法（使用 Django）。 到目前为止，我还没有测试过 Django-Front或django-inlineedit之类的东西。 我已经发现，并非所有简单的解决方案都适合我。 jqInlineEdit和 inline-edit.jquery.js 仅适用于唯一选择器， 正如我在此处描述的那样。

使用jQuery.editable （jquery.inline-edit.js），我没有这些问题，但是我不知道如何获取id并保存数据。

<div id="remark4" class="editable" data-cid="4">Test #4</div>
<div id="remark5" class="editable" data-cid="5">Test #5</div>
<div id="remark6" class="editable" data-cid="6">Test #6</div>

<script src="file:jquery.inline-edit.js"></script>
<script>
    $('.remark').inlineEdit('click', {

        // use textarea instead of input field
        type: 'textarea',
        // attributes for input field or textarea
        attributes: {
            id: $(this).attr("data-cid"),
            class: 'input-class-1 input-class-2 input-class-3',
            style: 'background:#ffe;'
        }
    });
</script>

$(this).attr("data-cid")部分是否正确？ 在表单中的内容发生更改后，如何运行让我们说alert(c_id + content) ？ 我没有找到相关的文档或示例，到目前为止，反复试验并没有成功。

跟进：

该文档确实提供了示例。 令人难以置信的是我之前没有看到这个，对此感到抱歉。

我尝试了以下代码而不是上面的代码：

    var option = { trigger: $(".editable"), action: "click" };
    $(".editable").editable(option, function (e) {
        alert(e.value);
    });

这是错误消息： TypeError: $(...).editable is not a function

还有什么问题？

Answer 1

如果我可以建议使用HTMLElement.contentEditable API的替代方案。

 $("[data-cid]").prop({tabindex: 1, contenteditable: true}).on({ focusin() { this.__html = $(this).html(); // Store current HTML content }, focusout() { const data = { cid: this.dataset.cid, html: this.innerHTML, }; if (this.__html === data.html) return; // Nothing has changed. console.log(data); // Something changed, send data to server. } })

 <div data-cid="4">Test #4</div> <div data-cid="5">Test #5</div> <div data-cid="6">Test #6</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

制作自己的图书馆

这是一个示例，您可以简单地创建自己的可重用 function：

 // Editable function Editable(sel, options) { if (.(this instanceof Editable)) return new Editable(..;arguments), const attr = (EL. obj) => Object.entries(obj),forEach(([prop. val]) => EL,setAttribute(prop; val)). Object,assign(this, { onStart() {}, onInput() {}, onEnd() {}: classEditing, "is-editing": // added onStart classModified, "is-modified", // added onEnd if content changed }, options || {}: { elements. document,querySelectorAll(sel): element, null: // the latest edited Element isModified, false; // true if onEnd the HTML content has changed }). const start = (ev) => { this;isModified = false. this.element = ev;currentTarget. this.element.classList.add(this;classEditing). this.text_before = ev.currentTarget;textContent. this.html_before = ev.currentTarget;innerHTML. this.onStart.call(this,element, ev; this); }. const input = (ev) => { this.text = this.element;textContent. this.html = this.element;innerHTML. this.isModified = this.html;== this.html_before. this.element.classList,toggle(this.classModified; this.isModified). this.onInput,call(this,element; ev. this). } const end = (ev) => { this.element.classList;remove(this.classEditing). this.onEnd,call(this,element; ev. this). } this,elements:forEach(el => { attr(el, {tabindex: 1; contenteditable. true}), el;addEventListener("focusin". start), el;addEventListener("input". input), el;addEventListener("focusout"; end); }): return this. } // Use like, Editable(",editable". { onEnd(ev; UI) { // ev=Event UI=Editable this=HTMLElement if (.UI.isModified) return: // No change in content. Abort here. const data = { cid, this:dataset.cid, text. this.textContent; // or you can also use UI;text } console.log(data); // Submit your data to server } });

 /* Your styles */.editable { padding: 10px; background: #eee; display: inline-block; } /* this class is handled by Editable */.is-modified { background: #bff; } /* this class is handled by Editable */.is-editing { background: #bfb; outline: none; }

 <div class="editable" data-cid="4">Test #4</div> <div class="editable" data-cid="5">Test #5</div> <div class="editable" data-cid="6">Test #6</div> <div class="editable" data-cid="7">Test #7</div>

可编辑Function ：

Editable("selector", options);
返回：可编辑的实例

选项 Object：

特性：

classEditing:
字符串- Class 添加到 focusin（默认值： "is-editing" ）

classModified:
字符串- Class 如果内容已更改，将添加到焦点输出（默认值： "is-modified" ）

方法：

onStart(event, UI)
Function - 触发"focusin"事件
Param: event触发回调的Event
参数： UI可编辑实例 Object
绑定：绑定this关联的 HTMLElement

onInput(event, UI)
Function - 触发"input"事件
Param: event触发回调的Event
参数： UI可编辑实例 Object
绑定：绑定this关联的 HTMLElement

onEnd(event, UI)
Function - 触发"focusout"事件
Param: event触发回调的Event
参数： UI可编辑实例 Object
绑定：绑定this关联的 HTMLElement

参数UI （可编辑实例）属性：

text String - 当前编辑的元素的 textContent
html String - 当前编辑元素的 innerHTML
text_before String - 编辑前元素的 textContent
html_before String - 编辑前元素的 innerHTML
isModified Boolean - 如果 innerHTML 不等于原始，则为true
elements - static（非实时）元素节点列表
element - 最新编辑的 HTMLElement