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

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

javascript jquery

Javascript 我无法让jQuery QueryBuilder在index.html中工作,javascript,jquery,query-builder,Javascript,Jquery,Query Builder,我需要在我的项目中使用jQuery中的QueryBuilder插件，因此我下载了概述网页中指定的所需文件然后，我使用下面的代码设置了一个简单的页面，但是当我运行它时，什么也没有发生。我错过了什么 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <meta name="viewport" con

我需要在我的项目中使用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>


jQuery查询生成器
var myFilters=[{
id:'column1'，
标签：“第1列”，
键入：“字符串”
}, {
id:'第2列'，
标签：“第2列”，
类型：'double'
}, {
id:'column3'，
标签：“第3列”，
类型：“布尔”
}];
$（“#生成器”）.queryBuilder({
过滤器：myFilters
});

我的项目看起来像这样

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

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

您首先需要包括引导、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>

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

只需确保已将独立版本上载到服务器；）

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

您需要首先包括引导、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>

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

只需确保已将独立版本上载到服务器；）

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

这里是另一种工作方式

将所有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脚本文件夹中

在_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-我的ASP.NET应用程序
@style.Render（“~/Content/css”）
@Scripts.Render（“~/bundles/modernizer”）
@Scripts.Render（“~/bundles/jquery”）
@Scripts.Render（“~/bundles/bootstrap”）

您的查看页面如下所示

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

@{
ViewBag.Title=“Index”；
Layout=“~/Views/Shared/_Layout.cshtml”；
}
var myFilters=[{
id:'column1'，
标签：“第1列”，
键入：“字符串”
}, {
id:'第2列'，
标签：“第2列”，
类型：'double'
}, {
id:'column3'，
标签：“第3列”，
类型：“布尔”
}];
$（“#生成器”）.queryBuilder({
过滤器：myFilters
});

你的结果应该是，