按项目修改X-Editable中的按钮模板

Modify Button template in X-Editable on a per item basis?

本文关键字：按钮 项目 修改 X-Editable      更新时间：2023-09-26

我正在尝试将自定义按钮模板与X=Editable jQuery Library一起使用。

我知道有一种方法可以使用全局方法设置按钮模板，该方法会影响页面上的所有表单字段。我想知道如何在每个项目的基础上使用自定义模板？

以下是DOCS页面和部分，其中显示了如何设置全局按钮模板：http://vitalets.github.io/x-editable/docs.html#global

上面写着：

$.fn.editableform.buttons

按钮模板。自动插入.editable-buttons。必须包含类.editable-submit和.editable-cancel
默认值：

<button type="submit" class="editable-submit">ok</button>
<button type="button" class="editable-cancel">cancel</button>

因此，您可以看到，您可以很容易地将按钮模板全局设置为JavaScript变量，如下所示
$.fn.editableform.buttons = 'button HTML here';

如何仅为1个特定的表单字段设置自定义按钮模板

我找到了这个解决方案，它可以帮我做到这一点。我想为特定的x可编辑对象提供一个文本发送按钮，而不是glyphicon ok。因此，如果弹出窗口出现，如果这个弹出窗口是针对我的按钮的，我会用MutationObserver进行监听：

var MutationObserver = MutationObserver || WebKitMutationObserver || MozMutationObserver;
var observer = new MutationObserver(function(mutations, observer) {
    mutations.forEach(function(mutation) {
        if($(mutation.target).find('.popover-title').text() === 'Title of my button' && $(mutation.target).find('.glyphicon-ok')){
            $(mutation.target).find('.editable-submit').html('process');
        }
    });
});
observer.observe(document, {
    subtree: true,
    attributes: true
});

不是很好，但很管用。

相关文章：