我无法让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

这是另一种工作方式。

将所有CSS文件从jQuery-QueryBuilder \\ dist \\ 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 Scripts文件夹中。

在_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中工作

问题描述

4 个解决方案

解决方案1
2 2015-11-17 17:38:58

解决方案2
2 已采纳 2015-11-17 17:41:05

解决方案3
0 2016-05-22 21:33:51

解决方案4
0 2017-02-15 12:08:37

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

问题描述

4 个解决方案

解决方案1 2 2015-11-17 17:38:58

解决方案2 2 已采纳 2015-11-17 17:41:05

解决方案3 0 2016-05-22 21:33:51

解决方案4 0 2017-02-15 12:08:37

解决方案1
2 2015-11-17 17:38:58

解决方案2
2 已采纳 2015-11-17 17:41:05

解决方案3
0 2016-05-22 21:33:51

解决方案4
0 2017-02-15 12:08:37