为了账号安全,请及时绑定邮箱和手机立即绑定

使用jquery.内联编辑对文本区域进行内联编辑.js – 获取 id 并保存

使用jquery.内联编辑对文本区域进行内联编辑.js – 获取 id 并保存

炎炎设计 2022-09-23 17:36:35

我正在寻找一种简单的方法来在表格中实现内联编辑(使用Django)。到目前为止,我还没有测试像詹戈阵线詹戈内联编辑这样的东西。我已经发现,并非所有简单的解决方案都适合我。正如我在这里描述的那样jqInline编辑和内联编辑.jquery.js只使用唯一的选择器。

使用jQuery.可编辑(jquery.内联编辑.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


还怎么了?


查看完整描述

1 回答

?
守着星空守着你

TA贡献1480条经验 获得超8个赞

如果我可以建议使用HTML元素可编辑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>


创建自己的库

下面是一个示例,说明如何简单地创建自己的可重用函数:


// 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>

可编辑功能

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

选项对象:

性能:

classEditing:
字符串 - 要在焦点上添加的类(默认值:"is-editing")

classModified:
字符串 - 如果内容已更改,则要在焦点上添加的类(默认值:"is-modified")

方法:

onStart(event, UI)
函数 - 事件
参数上的触发器:触发回
调参数的事件:可编辑实例对象
绑定:绑定到关联的 HTML 元素"focusin"eventUIthis

onInput(event, UI)
函数 - 事件
参数上的触发器:触发回
调参数的事件:可编辑实例对象
绑定:绑定到关联的 HTML 元素"input"eventUIthis

onEnd(event, UI)
函数 - 事件
参数上的触发器:触发回
调参数的事件:可编辑实例对象
绑定:绑定到关联的 HTML 元素"focusout"eventUIthis

参数(可编辑实例)属性:UI

text 字符串 - 当前编辑的元素的文本内容
字符串 - 当前编辑的元素的内HTML
字符串 - 元素的文本在编辑
之前的内容 字符串 - 元素的内HTML 在编辑
布尔值之前 - 如果 innerHTML 不等于原始
- 静态(非实时) 元素
的节点列表 - 最新编辑的 HTML 元素htmltext_beforehtml_beforeisModifiedtrueelementselement


查看完整回答
反对 回复 6天前
  • 1 回答
  • 0 关注
  • 9 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信