如何從數據庫中生成可編輯的多字段？

所以我有一個約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

如何從數據庫中生成可編輯的多字段？

回答

相關問題