将 Select2 和 X-Editable 与最新版本一起使用

Posted 2023-05-08

技术标签:

【中文标题】将 Select2 和 X-Editable 与最新版本一起使用【英文标题】：Use Select2 and X-Editable together with latest versions 【发布时间】：2015-07-28 00:42:52 【问题描述】：

我看到的所有在线示例都显示了如何将 X-Editable 与 Select2 库一起使用，都使用的是旧版本的 select2。

X-Editable - http://vitalets.github.io/x-editable/ withSelect2 - https://select2.github.io/ 好几个星期了，但运气不佳。

最近有没有人将这两个库与过去一年发布的版本一起使用？

【问题讨论】：

请参阅下面我对 Kevin Brown 的评论。希望我们作为一个社区可以找到帮助再次更新这个项目以支持 Select2 的人。现在有很多人想要这个！ 【参考方案1】：

我最近也遇到了这个问题，想出了一个作弊方法。它使用标准的 'select' 并将其转换为 select2 on show：

$('#stages').editable(
  source: [ value: 1, text:'ahaa', value: 2, text: 'ohooo' ]
).on('shown', function(e, editable)
  editable.input.$input.select2(
    width: 250,
    minimumResultsForSearch: Infinity
  );
  editable.input.$input.select2('val', editable.input.$input.val());
);

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

		<!-- Optional theme -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

		<!-- Latest compiled and minified javascript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
		<link href="http://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet"/>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
<a href="#"
   id="stages"
   data-type="select"
   data-placement="right"
   class="editable editable-click"
   data-value="1"
   data-title="Select something"></a>

【讨论】：

偷偷摸摸。我喜欢它。【参考方案2】：

Select2 4.0.0 与 X-Editable 不兼容，未来似乎不会提供任何支持。

回到一月份I created a ticket about it，维护者没有任何回应。 X-Editable 项目目前已冻结并正在寻找维护者。

【讨论】：

实际上我刚刚在我的 Web Dev 博客codedevelopr.com/articles/… 上发布了一篇关于试图找人接管项目的问题。这是一个遥远的目标，但它是如此伟大的图书馆，我觉得我至少必须尝试找到一个人，而不是仅仅放弃对它的希望。如果有足够多的人传播这个消息，也许只有合适的人会看到它并能够为项目提供帮助！这并非完全不可能！在 X-Editable 中查看最近的问题时，我还注意到大多数最近的问题都与 Select2 支持问题有关，因此至少能找到能够更新这部分的人真是太好了！如果您想为帮助找到某人或某组的人做出贡献，请随意传播！谢谢【参考方案3】：

我已经获得了最新版本的 Select2 (4.0.3) 以使用 x-editable。

使用 x-editable 的这个分支（不是我，是 Select2 的作者之一） https://github.com/select2/x-editable

然后对于您在 js 文件中选择的任何发行版，找到此行：

tpl:'<input type="hidden">',

改成这样：

tpl:'<select multiple></select>',

【讨论】：

【参考方案4】：

我想最近的版本现在还可以，但是 X-Editable 的 DOC 声明您需要导入 select2 的 js 和 css，这是我的工作示例：

<link href="css/select2/select2.min.css" rel="stylesheet" type="text/css" />
<link href="css/select2/select2-bootstrap.min.css" rel="stylesheet" type="text/css" />

<script src="assets/jquery/dist/jquery.min.js"></script>
<script src="assets/bootstrap3-editable/bootstrap-editable.min.js"></script>
<script src="assets/select2/select2.full.min.js"></script>

<script type="text/javascript">
    $('.editable_example').editable(
        source: [
            id: 1, text: 'Test1',
            id: 2, text: 'Test2',
            id: 3, text: 'Test3'
        ]
    );
</script>

<body>
    <!-- normal code and than the x editable input -->
    <a href="#" data-name="example" data-type="select2" 
        class="editable_example" data-pk="5" data-url="ajax/update_row.php"
        data-title="Select one item" data-value="5">
        John Example
    </a>
</body>

我强烈建议花几分钟时间到read the DOCs 学习一些观察，例如需要导入 select2 的 js 和 css 之类的东西。

【讨论】：

【参考方案5】：

在最近的一个项目中也遇到了这个问题，我专门为 select2 版本 4.0.2 创建了一个自定义扩展，该扩展适用于 x-editable。如果需要，我还添加了每行拥有唯一下拉数据的功能。

博客文章和下载地址为www.fifthmorrison.com

同意这个插件的卓越性，如果有人确实有时间接管它，在这里肯定会受到赞赏。

希望在此期间有所帮助！

【讨论】：

欢迎来到***。不鼓励仅链接回复 - 您可以编辑您的帖子以添加一个最小示例吗？链接无法访问是的，对不起！这很遗憾丢失了，我目前没有使用公共博客。如果我重新发布，我会在这里再次添加。

以上是关于将 Select2 和 X-Editable 与最新版本一起使用的主要内容，如果未能解决你的问题，请参考以下文章

输入按钮未使用 select2 和 X-editable 提交

X-editable 和 Select2 远程数据不起作用