与jQuery X-Editable库一起使用时,修改Select2下拉列表选择的输出

Question

我一直试图使用X-Editable http://vitalets.github.io/x-editable/与Select2 https://select2.github.io/连续几周没有太多运气.

最初我试图从AJAX请求中加载数据,然后使用该库,但我可以看到所有旧代码都可以使用旧版本的两个库.

为了略微简化,我现在决定单独加载我的数据,以便X-Editable和Select2只需要处理已经可用的数据数组.

我现在的问题是修改数据的显示.

默认情况下,我很满意编辑字段的外观,看起来像是"标签"被选中.

编辑完成后,在初始页面加载时,它会将我选择的项目显示为逗号分隔的字符串.我想修改那个部分看起来不一样.

我看到了一些按照我的要求工作的示例,但它们似乎不适用于较新的版本.

这里的JSFiddle http://jsfiddle.net/jasondavis/j72k110m/显示了我想要的输出和功能...差不多但是这个演示的问题是使用旧版本的Select2库.它有Select2版本v3.4.4和X-Editable版本v1.5.1

Select2的最新版本是版本v4.0.0 X-Editable是最新的v1.5.1,因为它有一段时间没有更新.

---

在初始加载和选择新值之后,它应该如下所示,这意味着它将我们选择的值包装在span:

---

单击以编辑选定的值时,它应该看起来像"标签",但它不应显示该<span>部分!

---

在这个JSFiddle http://jsfiddle.net/jasondavis/N6bQE/320/
我已经将Select2更新为新版本,我试图通过将所选值显示为"标签"来复制上面其他JSFiddle的功能.

此版本的另一个问题是,在选择值时,它不会从下拉列表中删除选项.因此,即使已经选择了1个项目,它仍会显示为再次单击的选项!

另一个问题是新选择的项目不会添加到非编辑屏幕上.

下面的更多图片显示我的意思...

下图显示了初始屏幕加载了所选项目以及选择但未处于编辑模式的项目.问题是它没有使用所选的新项目进行更新.它还显示所选的ID而不是标题/名称

我的最终目标是在我的X-editable字段上使用Select2以允许选择已分配的用户.选定的指定用户将显示一个重力图像缩略图图像和用户名.

Select2和X-Editable都允许使用模板样式输出来修改输出,但是当它们一起工作时,默认功能不同,那些输出修改功能与它们在其上运行任何库时的工作方式不同.自己的.

我知道我想要的是可以完成的,因为2个库可以协同工作,只需要让较新版本的Select2与旧版本的X-Editable一起工作,这在很长一段时间内都没有得到更新!

Answer 1

我测试的最终 jsfiddles 位于https://jsfiddle.net/N6bQE/329/ (bootstrap-editable) 和https://jsfiddle.net/N6bQE/331/ (poshytip-editable)。

以下是我在尝试使 Select2 4.0.0 与 X-Editable 一起使用时所做的一些观察。

1. 您正在设置data-value（apples, oranges, pie注意空格），这在技术上是 not correct. The ids are supposed to match up exactly, but due to 一个不幸的错误 Select2 旧版本中的一个功能是，额外的空格被完全忽略。

   删除空格解决了主要问题，即 Select2 未正确匹配选项（因此未显示它们）。

2. 您source不包含通过 传入的任何data-value值，因此 Select2 无法显示它们。通过排列一些id属性，Select2 距离在显示弹出窗口时显示所选值又近了一步。

3. 您同时使用了tags和source，这是 X-Editable 不允许的。该插件似乎优先tags于source，因此实际上没有任何内容传递到 Select2 中，并且您的内容source完全被忽略。

4. 但这并不重要，因为 X-Editable 一开始就没有正确显示值。您会注意到，它data-value显示为单个标签，而不是拆分并显示为多个标签。为了让 X-Editable 配合此操作，您需要separator: ','在 Select2 选项中进行设置。虽然 Select2 不再支持此选项，但 X-Editable 完全忽略了viewseparator支持此选项的选项。

5. 为了让标签在编辑后value更新，您需要检查方法中display是否是数组。这是因为 X-Editable 只是将一个字符串传递回该display方法，而不是人们期望的数组。