草庐IT

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

coder 2025-01-01 原文

我一直在尝试使用 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 version v3.4.4X-Editable version 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 可编辑字段上使用 Select2 以允许选择分配的用户。选定的指定用户将显示头像缩略图和用户名。

Select2 和 X-Editable 都允许使用模板样式输出来修改输出,但是当它们一起工作时,默认功能不同,并且这些输出修改函数的工作方式与运行任一库时的工作方式不同自己的。

我知道我想做什么,因为这两个库是要一起工作的,这只是让新版本的 Select2 与旧版本的 X-Editable 一起工作的问题,它已经很长时间没有更新了时间可悲!

最佳答案

我测试的最终 jsfiddles 位于 https://jsfiddle.net/N6bQE/329/ ( Bootstrap 可编辑)和 https://jsfiddle.net/N6bQE/331/ (poshytip 可编辑)。

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

  1. 您将 data-value 设置为 apples, oranges, pie(注意空格),这技术上是不正确的.这些 ID 应该完全匹配,但是由于 一个不幸的错误 旧版本的 Select2 中的一个特性,额外的空格被完全忽略了。

    删除空格解决了主要问题,即 Select2 没有正确匹配选项(因此没有显示它们)。

  2. 您的 source 不包含您通过 data-value 传递的值中的任何,所以 Select2 没有办法显示它们。通过排列一些 id 属性,Select2 更接近于在显示弹出窗口时显示所选值。

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

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

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

关于javascript - 修改与 jQuery X-Editable 库一起使用时 Select2 下拉选择的输出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30270485/

有关javascript - 修改与 jQuery X-Editable 库一起使用时 Select2 下拉选择的输出的更多相关文章

  1. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗?当我运行compasswatch时,它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行?文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们?我自己编译的.sass文件编译成compiled/t

  2. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗?通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  3. ruby-on-rails - 如果我将 ruby​​ 版本 2.5.1 与 rails 版本 2.3.18 一起使用会怎样? - 2

    如果我使用ruby​​版本2.5.1和Rails版本2.3.18会怎样?我有基于rails2.3.18和ruby​​1.9.2p320构建的rails应用程序,我只想升级ruby的版本,而不是rails,这可能吗?我必须面对哪些挑战? 最佳答案 GitHub维护apublicfork它有针对旧Rails版本的分支,有各种变化,它们一直在运行。有一段时间,他们在较新的Ruby版本上运行较旧的Rails版本,而不是最初支持的版本,因此您可能会发现一些关于需要向后移植的有用提示。不过,他们现在已经有几年没有使用2.3了,所以充其量只能让更

  4. 安卓apk修改(Android反编译apk) - 2

    最近因为项目需要,需要将Android手机系统自带的某个系统软件反编译并更改里面某个资源,并重新打包,签名生成新的自定义的apk,下面我来介绍一下我的实现过程。APK修改,分为以下几步:反编译解包,修改,重打包,修改签名等步骤。安卓apk修改准备工作1.系统配置好JavaJDK环境变量2.需要root权限的手机(针对系统自带apk,其他软件免root)3.Auto-Sign签名工具4.apktool工具安卓apk修改开始反编译本文拿Android系统里面的Settings.apk做demo,具体如何将apk获取出来在此就不过多介绍了,直接进入主题:按键win+R输入cmd,打开命令窗口,并将路

  5. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord,它正在融化我的大脑。deletefromtablewhereid有什么想法吗?我想做的是限制表中的行数。所以,我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看,您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  6. ruby-on-rails - 如何让 datamapper 与 postgresql 数据库一起工作? - 2

    我已经找到了几个使用datamapper的示例,并且能够让它们正常工作。不过,所有这些示例都是针对sqlite数据库的。我正在尝试将数据映射器与postgresql一起使用。我将datamapper中的调用从sqlite3更改为postgres,并且我已经安装了dm-postgres-adapter。但它仍然不起作用。我还需要做什么? 最佳答案 与SQLite不同,PostgreSQL不将数据库存储在单个文件中。在你拥有createdyourdatabase之后,尝试这样的事情:DataMapper.setup:default,{:

  7. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  8. ruby-on-rails - rails 上的 ruby : radio buttons for collection select - 2

    我有一个集合选择:此方法的单选按钮是什么?谢谢 最佳答案 Rails3中没有这样的助手。在Rails4中,它是collection_radio_buttons. 关于ruby-on-rails-rails上的ruby:radiobuttonsforcollectionselect,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/18525986/

  9. ruby-on-rails - ActiveAdmin 自定义选择过滤器下拉名称 - 2

    对于用户模型,我有一个过滤器来检查用户的预订状态,该状态由整数值(0、1或2)表示。UserActiveAdmin索引页上的过滤器是通过以下代码实现的:filter:booking_status,as::select然而,这会导致下拉选项为0、1或2。当管理员用户从下拉列表中选择它们时,我更愿意自己将它们命名为“未完成”、“待定”和“已确认”之类的名称。有没有办法在不改变booking_status在模型中的表示方式的情况下做到这一点? 最佳答案 假设booking_status是模型中的枚举字段,您可以使用:过滤器:booking

  10. ruby - 了解在 Ruby 中与 lambda 一起使用的 inject 行为 - 2

    我经常将预配置的lambda插入可枚举的方法中,例如“map”、“select”等。但是“注入(inject)”的行为似乎有所不同。例如与mult4=lambda{|item|item*4}然后(5..10).map&mult4给我[20,24,28,32,36,40]但是,如果我制作一个2参数lambda用于像这样的注入(inject),multL=lambda{|product,n|product*n}我想说(5..10).inject(2)&multL因为“inject”有一个可选的单个初始值参数,但这给了我......irb(main):027:0>(5..10).inject

随机推荐