如何从数据库中生成可编辑的多字段？

所以我有一个约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>

正如你可能会或可能不会已经猜到这些都minecarft权限（但是无关紧要这个问题）。

要编辑这些我想使用X-editable，但由于所有编号都相同，所以不能编辑（第一条记录除外）。

我可以改变这一代，使它们每个都获得一个唯一的ID，就像data-pk元素一样。但是这会在JavaScript文件中造成麻烦，因为我不得不为每个元素添加一个新的JavaScript元素。

现在我的JavaScript是这样的：

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

但在这之前提到的将只对第一个结果工作。我可以将每个元素静态地定义为可编辑的，但这是不可能的，因为数据量事先不知道，并且是动态的。

我该如何着手制作这些可编辑的字段？

来源

2016-09-27 user3828657

ID属性应该是唯一的;您访问的任何页面上应该只有一个'＃权限'。你可能想给个别项目class =“permission”而不是 – Joe

X-editable是否支持类选择器？ –

我想你的结构是

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

给每个元素一个唯一的ID
变化<div class="row">到<div class="row" id="permissions">
终于改变你的JavaScript代码来

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

更改JavaScript来这行代码将捕获#permissions元素中的所有<a>元素。看看this了解更多信息。

来源

2016-09-27 11:54:00 JFL

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

<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(); 
})

来源

2016-09-27 12:17:16

感谢您的建议，他们让我意识到，我可以将id更改为class并选择'.permission'而不是'#permission'。

来源

2016-09-27 13:01:43 user3828657

如何从数据库中生成可编辑的多字段？

回答

相关问题