我无法让jQuery QueryBuilder在index.html中工作
[英]I cannot get jQuery QueryBuilder to work in my index.html
问题描述
I need to use the QueryBuilder plugin from jQuery for my project, so I downloaded the files I needed as specified in the overview web page http://mistic100.github.io/jQuery-QueryBuilder/ I then set up a simple page using the code below but when I run it nothing happens. 
我需要为我的项目使用jQuery的QueryBuilder插件，因此我按照概述网页http://mistic100.github.io/jQuery-QueryBuilder/中的说明下载了所需的文件，然后使用下面的代码，但是当我运行它时，什么也没有发生。 What am I missing. 我想念什么。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery QueryBuilder</title>
<script src="Scripts/doT.js"></script>
<script src="Scripts/jQuery.extendext.js"></script>
<script src="Scripts/query-builder.js"></script>
<script src="Scripts/moment.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/jquery-2.1.4.js"></script>
</head>
<body>
<div id="builder"></div>
<script>
var myFilters = [{
id: 'column1',
label: 'Column 1',
type: 'string'
}, {
id: 'column2',
label: 'Column 2',
type: 'double'
}, {
id: 'column3',
label: 'Column 3',
type: 'boolean'
}];
$('#builder').queryBuilder({
filters: myFilters
});
</script>
</body>
</html>
My project looks like this 我的项目看起来像这样
4 个解决方案
解决方案1
2 2015-11-17 17:38:58
I've never used this plugin before, but if it is a JQuery plugin, then the JQuery Library will need to be loaded FIRST. 我以前从未使用过此插件，但是如果它是JQuery插件，则需要首先加载JQuery库。 Since the browser will stop and read the entire library before moving on, make sure the JQuery Library appears first. 由于浏览器将停止并继续读取整个库，因此请确保首先显示JQuery库。 That way, the library is loaded before it tries to load the plugin. 这样，库会在尝试加载插件之前加载。 Hope that works for you!!! 希望对你有用！！！
解决方案2
2 已采纳 2015-11-17 17:41:05
我相信您需要在插件之前加载Jquery。
解决方案3
0 2016-05-22 21:33:51
You'll need to include Bootstrap, jQuery and the dependencies first so you have to work with: 您首先需要包括Bootstrap，jQuery和依赖项，因此您必须使用：
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/jquery-2.1.4.js"></script>
<script src="Scripts/jQuery.extendext.js"></script>
<script src="Scripts/doT.js"></script>
<script src="Scripts/moment.js"></script>
<script src="Scripts/query-builder.js"></script>
That said - if you use the standalone version: 就是说-如果您使用独立版本：
<script src="Scripts/query-builder.standalone.js"></script>
then you don't have to include: 那么您不必包括：
<script src="Scripts/jQuery.extendext.js"></script>
<script src="Scripts/doT.js"></script>
as those two dependencies are included in the standalone version. 因为这两个依赖项包含在独立版本中。
Just make sure you have the standalone version uploaded to your server ;) 只需确保已将独立版本上载到服务器即可；）
Btw - you can best use the minified versions of these scripts to reduce page load times. 顺便说一句-您最好使用这些脚本的缩小版本来减少页面加载时间。
解决方案4
0 2017-02-15 12:08:37
Here is another working way. 这是另一种工作方式。
- Include all CSS files from jQuery-QueryBuilder\\dist\\css to VS Content folder. 将所有CSS文件从jQuery-QueryBuilder \\ dist \\ css包含到VS Content文件夹中。
- Add Bootstrap 3+ version css file into VS Content folder. 将Bootstrap 3+版本的CSS文件添加到VS Content文件夹中。
- Add doT.js, jQuery.extendext.js, moment.js, jquery-3.1.1.min.js and query-builder.standalone.js into VS Scripts folder. 将doT.js，jQuery.extendext.js，moment.js，jquery-3.1.1.min.js和query-builder.standalone.js添加到VS Scripts文件夹中。
In _layout.cshtml page, add following paths;
在_layout.cshtml页面中，添加以下路径； <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - My ASP.NET Application</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") <script src="~/Scripts/doT.js"></script> <script src="~/Scripts/jQuery.extendext.js"></script> <script src="~/Scripts/moment.js"></script> <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <script src="~/Scripts/jquery-3.1.1.min.js"></script> <link href="~/Content/query-builder.default.css" rel="stylesheet" /> <script src="~/Scripts/query-builder.standalone.js"></script>
and your view page look like this, 您的查看页面如下所示，
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<body>
<div id="builder"></div>
<script>
var myFilters = [{
id: 'column1',
label: 'Column 1',
type: 'string'
}, {
id: 'column2',
label: 'Column 2',
type: 'double'
}, {
id: 'column3',
label: 'Column 3',
type: 'boolean'
}];
$('#builder').queryBuilder({
filters: myFilters
});
</script>
</body>
and your result should be, 你的结果应该是
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.