如何在表行中使用引导程序 x-editable？

Posted 2023-05-08

【中文标题】如何在表行中使用引导程序 x-editable？

【英文标题】：How to use bootstraps x-editable in table rows?

【发布时间】：2013-11-03 07:58:37

【问题描述】：

我想使用 bootstraps X-editable 插件。我在我的表中检索服务器端数据，我想在线编辑它们。如我所见，建议使用 X-editable 与 id 一起使用。是否可以处理多个数据？

文档：

<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>

$(document).ready(function() 
    $('#username').editable();
);

如果我有更多用户名怎么办？

【问题讨论】：

您不需要使用元素的 id 来初始化 x-editable。只需在您的a 标签中设置class="username"，然后使用$('.username').editable();

你是对的我做了一个测试jsfiddle.net/lgtsfiddler/FgqH6/1

【参考方案1】：

<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>

改成

<a href="#" class="username">superuser</a>

还有

$(document).ready(function() 
    $('#username').editable();
);

改成

$(document).ready(function() 
    $('.username').editable();
);

【讨论】：

谢谢。您也应该在 Laravel 应用程序中使用此功能

【参考方案2】：

如果您有更多用户名，最好更改该名称。 您可以设置可编辑的任何您想要的元素。只需制作一个选择器即可。 您可以使用 data-* 属性来做到这一点..

伟大的， 雨果·佩德罗萨

【参考方案3】：

使用 id 作为<table>：

<table id="user" class="table table-striped">
<tr><td>
<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>
</td></tr>
</table>

$(document).ready(function() 
    $('#user a').editable();
);

【讨论】：

这个不行，锚链接需要唯一，所以调用editable()时必须用class代替id；