Question

所以我有一个包含大约100条记录的数据库，这些记录显示在你应该编辑它们的网站上。

此时生成的结果如下所示：

<div class="col-md-4 col-sm-6 col-xs-12"><a href="#" id="permission" data-type="text" data-pk="1" data-url="test.php" data-title="Enter permission">bukkit.command.help</a></div>
<div class="col-md-4 col-sm-6 col-xs-12"><a href="#" id="permission" data-type="text" data-pk="2" data-url="test.php" data-title="Enter permission">essentials.afk</a></div>
<div class="col-md-4 col-sm-6 col-xs-12"><a href="#" id="permission" data-type="text" data-pk="3" data-url="test.php" data-title="Enter permission">essentials.list</a></div>
<div class="col-md-4 col-sm-6 col-xs-12"><a href="#" id="permission" data-type="text" data-pk="4" data-url="test.php" data-title="Enter permission">essentials.sethome.bed</a></div>
<div class="col-md-4 col-sm-6 col-xs-12"><a href="#" id="permission" data-type="text" data-pk="5" data-url="test.php" data-title="Enter permission">essentials.tpaccept</a></div>
<div class="col-md-4 col-sm-6 col-xs-12"><a href="#" id="permission" data-type="text" data-pk="6" data-url="test.php" data-title="Enter permission">itemcase.buy</a></div>

正如您现在可能已经或可能没有猜到的那样，这些是地雷权限（但对此问题无关）。

要编辑这些，我想使用X-editable，但由于所有ID都相同，因此无法编辑（第一条记录除外）。

我可以更改生成，以便它们每个都像data-pk元素一样获得唯一ID。然而，这会导致javascript文件出现问题，因为我必须为每个元素添加一个新的javascript。

目前我的javascript是这样的：

$.fn.editable.defaults.mode = 'inline';
$('#permission').editable();

但如前所述，这只适用于第一个结果。我可以静态地定义每个元素是可编辑的，但这是不可能的，因为事先和动态的数据量是未知的。

我如何才能使这些字段可编辑？

Answer 1

我认为你的结构是

<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12"><a href="#" id="permission" ....>
<div class="col-md-4 col-sm-6 col-xs-12"><a href="#" id="permission" ....>
</div>

为每个元素赋予唯一的身份
将<div class="row">更改为<div class="row" id="permissions">
最后将JavaScript代码更改为

$('#permissions a').editable();

将JavaScript更改为此代码行将捕获#permissions元素中的所有<a>元素。有关详细信息，请查看this。

Answer 2

将您的内容包装在如下的父元素中。

<div id="parent">
    <div class="col-md-4 col-sm-6 col-xs-12">
        <a href="#" id="permission" data-type="text" data-pk="1" data-url="test.php" data-title="Enter permission">bukkit.command.help</a>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
        <a href="#" id="permission" data-type="text" data-pk="2" data-url="test.php" data-title="Enter permission">essentials.afk</a>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
        <a href="#" id="permission" data-type="text" data-pk="3" data-url="test.php" data-title="Enter permission">essentials.list</a>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
        <a href="#" id="permission" data-type="text" data-pk="4" data-url="test.php" data-title="Enter permission">essentials.sethome.bed</a>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
        <a href="#" id="permission" data-type="text" data-pk="5" data-url="test.php" data-title="Enter permission">essentials.tpaccept</a>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
        <a href="#" id="permission" data-type="text" data-pk="6" data-url="test.php" data-title="Enter permission">itemcase.buy</a>
    </div>
</div>

使用以下选择器迭代超链接并单独调用X-editable函数。

$.each($('#parent div.col-md-4>a'), function(item){
   item.editable();
})

Answer 3

感谢您的建议，他们让我意识到我可以将ID改为课堂并选择＆＃39; .permission＆＃39;而不是＆＃39;＃permission＆＃39;。

如何使多个数据库中的多个字段可编辑？

3 个答案: