Question

我下载并遵循了示例，但无法显示QueryBuilder div。我没有收到任何错误或任何东西，它不会显示。我获得的QueryBuilder ui的唯一部分是“应用”筛选器按钮，但是单击它时什么也没有发生。同样，在页面加载时，它会到达控制器中的初始Index，但永远不会进入控制器中的JsonResult Index（QueryBuilderFilterRule obj）。

我正在使用jQuery QueryBuilder v 2.5.2

当我查看页面源代码时，以下是列出的脚本：

<script src="/Scripts/modernizr-2.8.3.js"></script>
<script src="/Scripts/jquery-3.0.0.js"></script>
<script src="/Scripts/jquery-ui-1.12.1.js"></script>
<script src="/Scripts/gridmvc.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/bootstrap-datetimepicker.min.js"></script>
<script src="/Scripts/jquery.dataTables.min.js"></script>
<script src="/Scripts/dataTables.bootstrap4.min.js"></script>

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

<link href="/Content/themes/base/jquery-ui.css" rel="stylesheet"/>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/gridmvc.datepicker.min.css" rel="stylesheet"/>
<link href="/Content/Gridmvc.css" rel="stylesheet"/>
<link href="/Content/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="/Content/query-builder.default.min.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

这是我的queryBuilder div：

<div class="col-md-4">
    <h2>Build Filters</h2>
    <div id="jquery-query-builder"></div>
    <button id="applyFilter">Apply Filter</button>
</div>

这是我从示例项目复制的脚本部分：

<script type="text/javascript">
$(function() {
    // Handler for .ready() called.

    // Fix for Bootstrap Datepicker
    $('#jquery-query-builder').on('afterUpdateRuleValue.queryBuilder', function(e, rule) {
        if (rule.filter.plugin === 'datepicker') {
            rule.$el.find('.rule-value-container input').datepicker('update');
        }
    });

    var tableData = [];

    var filterDefinition = @Html.Raw(ViewBag.FilterDefinition);
    var customFilters = {
        condition: 'AND',
        rules: []
    };
    var jqueryQueryBuilder = $('#jquery-query-builder');
    var jqueryQueryBuilderDom = jqueryQueryBuilder.queryBuilder({
        plugins: ['bt-tooltip-errors', 'filter-description'],
        //allow_groups: 0,
        allow_empty: true,
        filters: filterDefinition,
        rules: customFilters,
        icons: {
            add_group: 'fa fa-plus-square',
            add_rule: 'fa fa-plus-circle',
            remove_group: 'fa fa-minus-square',
            remove_rule: 'fa fa-minus-circle',
            error: 'fa fa-exclamation-triangle',
            sortable: 'fa fa-exclamation-triangle'
        }
    });

    var convertSingleValuesToArray = function (obj) {
        if (obj != null) {
            if (obj.hasOwnProperty("value")) {
                if (Object.prototype.toString.call(obj.value) !== '[object Array]') {
                    obj.value = [obj.value];
                }
            }
            if (obj.hasOwnProperty("rules") && obj.rules != null) {
                for (var i = 0; i < obj.rules.length; i++) {
                    convertSingleValuesToArray(obj.rules[i]);
                }
            }
        }
    }

    var getRules = function() {
        try {
            var res = jqueryQueryBuilder.queryBuilder('getRules');
            convertSingleValuesToArray(res);
            return res;
        } catch (ex) {
            return null;
        }
    }

    var buildTable;
    var filterData = function() {
        $.ajax({
            type: 'POST',
            url: "../Equipment/Index",
            data: JSON.stringify(getRules()),
            success: function (returnPayload) {
                tableData = returnPayload;
                buildTable();
                console && console.log ("request succeeded");
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console && console.log ("request failed");
            },
            dataType: "json",
            contentType: "application/json",
            processData: false,
            async: true
        });
    }

    $('#applyFilter').on('click', function () {
        alert('hi');
        filterData();
    });
    buildTable = function() {
        var tbody = $('#data-table tbody'),
            props = ["FirstName", "LastName", "Birthday", "Age", "Address", "City", "State", "ZipCode"];
        tbody.empty();
        $.each(tableData, function(i, reservation) {
            var tr = $('<tr>');
            $.each(props, function(i, prop) {
                $('<td>').html(reservation[prop]).appendTo(tr);
            });
            tbody.append(tr);
        });
    };
    filterData();
});
</script>

这是我在控制器中的索引：

public ActionResult Index()
    {
        var jsonSerializerSettings = new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() };
        var definitions = typeof(PersonRecord).GetDefaultColumnDefinitionsForType(false);
        var people = PersonBuilder.GetPeople();
        var firstName = definitions.First(p => p.Field.ToLower() == "firstname");
        firstName.Values = people.Select(p => p.FirstName).Distinct().ToList();
        firstName.Input = "select";

        //Let's tweak birthday to use the jQuery-UI datepicker plugin instead of
        //just a text input.
        var birthday = definitions.First(p => p.Field.ToLower() == "birthday");
        birthday.Plugin = "datepicker";

        ViewBag.FilterDefinition =
            JsonConvert.SerializeObject(definitions, jsonSerializerSettings);
        ViewBag.Model = people;
        return View();
    }

最后，这是控制器中的ajax方法（永远不会执行）：

    [HttpPost]
    public JsonResult Index(QueryBuilderFilterRule obj)
    {
        var people = PersonBuilder.GetPeople().BuildQuery(obj).ToList();
        return Json(people);
    }

此代码在Sample项目中都可以正常运行，但是在我的解决方案中无法运行，并且再次没有错误报告，仅显示了“ Apply Filter”按钮以外的任何内容。

我想念什么？

TIA

JQuery-QueryBuilder不显示

0 个答案: