Я скачал и последовал примеру, но не могу отобразить 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 * ТИА *