Question

我试图通过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
    }
});

它应该如何运作：

用户只能将标签添加到 data.assetTags ，这些标签位于的 data.availableTags
用户可以从 data.assetTags

所以无论做了什么更改，都应该与data.assetTags同步，以及我将要发送回服务器的内容。

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

DEMO：http://jsfiddle.net/Farzad/20e6e1os/10/

非常感谢

Answer 1

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

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

我刚接触x-editable库，只是分享我的学习经历。如果有效，请告诉我。顺便说一下，如果您对如何在此链接How to save data and to add new tag and its data from select 2 multiple select tag中添加新标记有所了解，请在此处回答：（https://jsfiddle.net/emo_noel10/dLeumnpg/25/）。感谢。

（X-Editable）（Select2标签）不起作用，无法填充当前标签并跟踪和添加/删除标签

1 个答案: