我無法讓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