JQuery-QueryBuilder не отображается - PullRequest
0 голосов
/ 03 июня 2019

Я скачал и последовал примеру, но не могу отобразить div QueryBuilder. Я не получаю никаких ошибок или чего-то еще, это просто не будет отображаться. Единственная часть пользовательского интерфейса QueryBuilder, которую я получаю, - это кнопка «Применить фильтр», но когда я нажимаю ее, ничего не происходит. Также, когда страница загружается, она попадает в начальный индекс в моем контроллере, но никогда не попадает в индекс JsonResult (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"/>

Вот мой div для queryBuilder:

<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.

Что мне не хватает ???

1024 * ТИА *

...