如何在 PixelAdmin 模板中将 select2 依赖插件更新到版本 4.0.6
Posted
技术标签:
【中文标题】如何在 PixelAdmin 模板中将 select2 依赖插件更新到版本 4.0.6【英文标题】：How to update select2 dependency plugin to version 4.0.6 in PixelAdmin Template 【发布时间】：2018-11-26 10:42:08 【问题描述】：我正在使用Pixel Admin template（我认为这不是当前版本）来实现一个使用旧版本的 select2 依赖版本 3.5.1 的 jinja2 Web 应用程序。它工作正常，但在 iso 设备上查看时，虚拟键盘始终显示在 touch select2 上。
我知道这个bug已经在select2最新版本4.0.6修复了，所以想改成这个版本。
layout.html
<!DOCTYPE html>
<html class="gt-ie8 gt-ie9 not-ie pxajs">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Application</title>
<script src=" url_for('static',filename='js/jquery-1.11.1.min.js') "></script>
<script src=" url_for('static',filename='js/bootstrap.min.js') "></script>
<link rel="stylesheet" type="text/css" href=" url_for('static', filename='stylesheets/bootstrap.min.css') ">
<link rel="stylesheet" type="text/css" href=" url_for('static', filename='stylesheets/pixel-admin.min.css') ">
<link rel="stylesheet" type="text/css" href=" url_for('static', filename='stylesheets/rtl.min.css') ">
<link rel="stylesheet" type="text/css" href=" url_for('static', filename='stylesheets/themes.min.css') ">
<link rel="stylesheet" type="text/css" href=" url_for('static', filename='stylesheets/pages.min.css') ">
<link rel="stylesheet" type="text/css" href=" url_for('static', filename='stylesheets/widgets.min.css') ">
<script src=" url_for('static',filename='javascripts/dynamic_con.js') "></script>
<!-- Remove select2 old version -->
<!-- <script src=" url_for('static',filename='js/select2.js') "></script> -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src=" url_for('static',filename='js/bootstrap-datepicker.js') "></script>
<script src=" url_for('static',filename='javascripts/toolbar.js') "></script>
<script>var init = [];</script>
% block content %
% endblock %
<script src=" url_for('static',filename='javascripts/pixel-admin.min.js') "></script>
<script type="text/javascript">
init.push(function ()
)
window.PixelAdmin.start(init);
</script>
</body>
</html>
Centre.html
% extends "layout.html" %
% block content %
<select class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
<script type="text/javascript">
$(document).ready(function()
$('.js-example-basic-single').select2();
);
</script>
% endblock %
当打开 URL 路由 http://127.0.0.1:5000/Centre 时，select2 不会在所有 ios 设备上打开，但在桌面视图上工作正常。除非我删除像素管理员<script src=" url_for('static',filename='javascripts/pixel-admin.min.js') "></script> 的主 js 文件，否则 select2 工作正常，但主题的其他功能将丢失，主 js 脚本也被删除。因此，这不是我正在寻找的解决方案。
我的问题是如何将模板像素管理中的 3.5.1 版本的 select2 替换为 4.0.6 版本的 select2 以使其在 ios 设备上正常运行？谢谢。
添加：
我刚刚发现在与主题一起出现的文件pixel-admin.min.js 中包含许多其他插件，包括select2。我看到它里面包含一个 select2 脚本的精确脚本。这可能是我无法用较新版本的 select2 覆盖它的原因，因为如前所述，如果我注释掉文件 pixel-admin.min.js，它可以工作，但该 js 文件中的其他插件和函数也会消失，我不会那。因此，我该如何克服这种权衡？请帮忙，我非常需要这个，谢谢。
【问题讨论】：
【参考方案1】：只要在pixel-admin.min.js里面找到对应的代码，注释掉就行了。
然后，在您的 html 中包含 Select2 版本 4.0.6，就像您通常那样：<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
和<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
最好尝试使用 Select2 版本 4.0.5，因为 4.0.6 是 rc。
看看Select2 release page。
【讨论】：
谢谢。我已经通过注释掉pixel-admin.min.js 中的所有select2 脚本并包含select2 新版本来尝试过，它仍然没有工作。我进一步测试发现模板window.PixelAdmin.start(init);的主要功能导致了问题。因为当我禁用它时，新版本的功能 select2 才出现。然而，我不应该删除主题的主要功能。请问有什么建议吗？谢谢
好像和主题的js脚本冲突了。
你必须挖掘函数window.PixelAdmin.start(init); - 如果我看不到代码，我不能说更多。
由于文件内容太长，我想把pixel-admin.js文件分享给你，让你看看是怎么回事。 drive.google.com/file/d/1zIiKFhBKWKp0oOmq4cdmZknC7ZoNSZJJ/…谢谢
非常含糊，没有实际案例可以处理，我建议删除第 1428 行和第 4683 行之间的所有代码。当然，这只是一个猜测，但您可以尝试 :)
【参考方案2】：
要在 PixelAdmin 中禁用 Select2 并根据您发布的文件，第 1473-1475 行
if (window.Select2 !== undefined)
return;
改成
return;
if (window.Select2 !== undefined)
return;
您使用的是哪个版本的 PixelAdmin？
【讨论】：
以上是关于如何在 PixelAdmin 模板中将 select2 依赖插件更新到版本 4.0.6的主要内容，如果未能解决你的问题，请参考以下文章
如何在spring jdbc模板中将自动提交设置为false