我无法让 jQuery QueryBuilder 在我的 index.html 中工作

Question

我的项目需要使用 jQuery 的 QueryBuilder 插件，因此我下载了概述网页中指定的所需文件 http://mistic100.github.io/jQuery-QueryBuilder/ 然后我使用下面的代码设置了一个简单的页面，但是当我运行时没有任何反应。我错过了什么。

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

我的项目是这样的

Answer 1

我以前从未使用过这个插件，但如果它是一个 JQuery 插件，则需要首先加载 JQuery 库。由于浏览器会在继续之前停止并读取整个库，因此请确保 JQuery 库首先出现。这样，库会在尝试加载插件之前加载。希望对你有用！！！

Answer 2

我认为您需要在插件之前加载 Jquery。

Answer 3

您需要首先包含 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>

也就是说 - 如果您使用独立版本：

<script src="Scripts/query-builder.standalone.js"></script>

那么你不必包括：

<script src="Scripts/jQuery.extendext.js"></script>
<script src="Scripts/doT.js"></script>

因为这两个依赖项包含在独立版本中。

只需确保您已将独立版本上传到您的服务器 ;)

顺便说一句 - 您最好使用这些脚本的缩小版本来减少页面加载时间。

Answer 4

这是另一种工作方式。

将 jQuery-QueryBuilder\dist\css 中的所有 CSS 文件包含到 VS Content 文件夹。
将 Bootstrap 3+ 版本 css 文件添加到 VS Content 文件夹中。
添加doT.js、jQuery.extendext.js、moment.js、jquery-3.1.1.min.js和query-builder.standalone.js VS 脚本文件夹。

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

您的查看页面如下所示，

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

你的结果应该是，

我无法让 jQuery QueryBuilder 在我的 index.html 中工作

I cannot get jQuery QueryBuilder to work in my index.html

javascript

jquery

query-builder