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 Library。由于浏览器将在继续之前停止并读取整个库，因此请确保首先显示JQuery Library。这样，在尝试加载插件之前加载库。希望对你有用!!!

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 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 个答案: