Question

我看到的所有在线示例都显示如何使用X-Editable和Select2库使用旧版本的select2。

X-Editable - http://vitalets.github.io/x-editable/与
Select2 - https://select2.github.io/已经好几个星期没有太多运气了。

最近有没有人在过去一年中发布了这两个图书馆甚至可以合作？

Answer 1

Select2 4.0.0与X-Editable不兼容，未来似乎没有任何支持。

回到1月I created a ticket about it，维护人员没有回复。 X-Editable项目目前正在冻结并寻找维护者。

Answer 2

我最近也遇到了这个问题并且作弊。它使用标准＆＃39;选择＆＃39;并将其转换为show2上的select2：

＆＃13;

$('#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());
});

＆＃13;

		<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>

＆＃13;

Answer 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>',

Answer 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以及类似的东西。

Answer 5

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

博客文章和下载www.fifthmorrison.com

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

希望在此期间有所帮助！

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

5 个答案: