(X-Editable）与(Select2标签）不工作，可以't填充当前标签并跟踪添加/删除的标签

(X-Editable) with (Select2 Tags) not working, Can't populate the current tags and keep track of and added/removed tags

本文关键字：标签 填充 添加 删除 跟踪 Select2 X-Editable 工作 可以      更新时间：2023-09-26

我正在尝试使用带有Select2 Tags选项的X-Editable插件，以便从服务器检索的数组对象中填充一些标签。

HTML

<div class="container">
    <table>
    <tr>
        <td>Name:</td>
        <td><div class="editable" data-asset="name"></div></td>
    </tr>
  <tr><td>Description</td><td><div class="editable" data-type="textarea" data-asset="description"></div></td></tr>
    <tr>
        <td>Tags:</td>
        <td>
            <div class="editable" data-asset="tags"></div>
            <button id="asset-button-tags-edit">Edit Tags</button>
        </td>
    </tr>
    </table>
</div>

JavaScript:

data = {
///...
  // current tags <- user can add and remove tags
    assetTags: [{
  '778': 'Racer',
  '456': 'BMW',
  '112': 'M3'
  }],
  // available tags <- user could only add tags from this list
    availableTags: [{
  '345': 'Winner',
  '789': 'Boy Racer',
  '101': 'Boy Racer',
  '009': 'Orange',
  '778': 'Racer',
  '456': 'BMW',
  '112': 'M3'
  }]
///...
}
$assetTags.editable({ 
    type: 'select2',
    pk: 1,
    autotext : 'always',
    source : getSource(),
    value : data.assetTags,
    emptytext: 'None',
    display: function(value, sourceData) {
       var html = data.assetTags,
           checked = $.fn.editableutils.itemsByValue(data.assetTags, data.assetTags, 'id');
       if(checked.length) {
           $.each(checked, function(i, v) { html.push($.fn.editableutils.escape(v.text)); });
           $(this).html(html.join(', '));
       }
       else {
           $(this).empty(); 
       }
    },
    select2: {
        multiple : true,
        initSelection : data.assetTags
    }
});

它应该如何工作：

  • 用户只能向数据添加标签。assetTags，这些标签可在数据。可用标签
  • 用户可以从数据中删除所有标签。assetTags

因此，无论做了什么更改，都应该与data.assetTags同步，这就是我将发送回服务器的内容。

以下是我目前所取得的成就，不确定我哪里错了！希望有人能帮我：）

演示：http://jsfiddle.net/Farzad/20e6e1os/10/

非常感谢

也许您应该使用x-editable在多个标记中遵循此结构：https://jsfiddle.net/emo_noel10/dLeumnpg/25/和http://jsfiddle.net/dplanella/N6bQE/36/.

尝试使用div类更改$assetsTag，即：$('.editable').editable({});。并尝试将div标签更改为span标签。

我刚开始使用x可编辑库，只是在分享我学到的东西。让我知道它是否有效。顺便说一句，如果你对如何在这个链接中添加新标签有想法，请在这里回答：（如何保存数据并从select 2多选标签添加新标签及其数据）https://jsfiddle.net/emo_noel10/dLeumnpg/25/.谢谢

相关文章：