我在我的MVC应用程序中使用了KendoUI。我正在使用一些输入框和多选小部件过滤我的网格。多选小部件将所选元素作为数组传递。我的问题是如何使用multiselect过滤网格？
目前，所有输入共享＆＃34; AND＆＃34;的全局条件。因此，它们可以在返回数据时一起工作，但是多重选择需要具有＆＃34; OR＆＃34;的子条件。工作。
我试图做的是迭代传入的数组对象并单独返回它们。我需要＆＃34;或＆＃34;的多选条件适用于他们。我可以看到数组对象被单独返回到控制台，但tehy没有被包含在网格的整体过滤中，使其变得多余。
任何人都可以解决我如何解决这个问题吗？我在下面包含了我的代码，其中显示了多选小部件在我的javascript代码中所处的位置以及我采用的方法。
@(Html.Kendo().Grid<MyProject.ViewModels.FixtureSearchViewModel>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(c => c.fixture_idx).Hidden();
columns.Bound(c => c.fixture_date)
.Title("Date")
.ClientTemplate("#=fixture_date ? kendo.toString(kendo.parseDate(fixture_date), 'dd/MM/yyyy') : '' #");
columns.Bound(c => c.owner_company)
.Title("Owner");
columns.Bound(c => c.vessel_name)
.Title("Name");
columns.Bound(c => c.vessel_type)
.Title("Type");
columns.Bound(c => c.charterer_company)
.Title("Charterer");
columns.Bound(c => c.fixture_type)
.Title("Type");
columns.Bound(c => c.workscopecode)
.Title("Duties");
columns.Bound(c => c.fixture_start)
.Title("Start")
.ClientTemplate("#=fixture_start ? kendo.toString(kendo.parseDate(fixture_start), 'dd/MM/yyyy') : '' #");
columns.Bound(c => c.on_hire_location)
.Title("Location");
columns.Bound(c => c.fixture_end)
.Title("End")
.ClientTemplate("#=fixture_end ? kendo.toString(kendo.parseDate(fixture_end), 'dd/MM/yyyy') : '' #");
columns.Bound(c => c.off_hire_location)
.Title("Location");
columns.Bound(c => c.initial_rate)
.Title("Rate")
.ClientTemplate(" #=initial_rate_currency# #=initial_rate#");
})
.Pageable()
.Sortable(sortable =>
{
sortable.SortMode(GridSortMode.MultipleColumn);
}).ToolBar(toolbar =>
{
toolbar.Template(@<text>
<table class="table">
<tr>
<td>Charterer</td>
<td>
@(Html.Kendo().DropDownList()
.Name("charterer_company")
.Filter("contains")
.OptionLabel("Choose Charterer")
.DataTextField("CompanyName")
.DataValueField("CompanyName")
.DataSource(e => e.Read("GetChartererCompanies", "FormAssets"))
)
</td>
</tr>
<tr>
<td>Start(After)</td>
<td>
@(Html.Kendo().DatePicker()
.Name("fixture_start"))
</td>
</tr>
<tr>
<td>End(Before)</td>
<td>
@(Html.Kendo().DatePicker()
.Name("fixture_end"))
</td>
</tr>
<tr>
<td>Vessel Types</td>
<td>
@(Html.Kendo().DropDownList()
.Name("vessel_type")
.Filter("contains")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "AHTS",
Value = "AHTS",
},
new SelectListItem() {
Text = "PSV",
Value = "PSV"
},
new SelectListItem() {
Text = "Special",
Value = "Special"
},
new SelectListItem() {
Text = "Standby",
Value = "Standby"
},
new SelectListItem() {
Text = "Tug",
Value = "Tug"
}
}))
</td>
</tr>
<tr>
<td>Duties</td>
<td>
@(Html.Kendo().MultiSelect()
.Name("workscopecode")
.DataTextField("WorkScopeName")
.DataValueField("WorkScopeName")
.Placeholder("Select Duties")
.AutoBind(false)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetDuties", "FormAssets");
})
.ServerFiltering(true);
})
)
</td>
</tr>
<tr>
<td>Onhire Location</td>
<td></td>
</tr>
<tr>
<td>Fixture Type</td>
<td></td>
</tr>
</table>
<button id="search-button" type="button">Search</button>
</text>);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Model(model => model.Id(p => p.fixture_idx))
.Read(read => read.Action("readFixtures", "Search"))
))
这是我的javascript控制上面的搜索输入框。
var search_btn = document.getElementById("search-button");
function search() {
var filters = [],
grid_aberdeen = $('#Grid').data('kendoGrid'),
search_charterer = $("#charterer_company").data("kendoDropDownList").value(),
search_start = $("#fixture_start").data("kendoDatePicker").value(),
search_end = $("#fixture_end").data("kendoDatePicker").value(),
search_type = $("#vessel_type").data("kendoDropDownList").value(),
search_duties = $("#workscopecode").data("kendoMultiSelect").value();
if (search_charterer) {
filters.push(
{
field: "charterer_company",
operator: "eq",
value: search_charterer
}
)
}
if (search_start) {
filters.push(
{
field: "fixture_start",
operator: "gte",
value: search_start
})
}
if (search_end) {
filters.push(
{
field: "fixture_end",
operator: "lte",
value: search_end
})
}
if (search_duties) {
var sub_filter = { logic: "or", filters: [] }
$.each(search_duties, function (i, v) {
sub_filter.filters.push[
{
field: "workscopecode",
operator: "eq",
value: v
}
]
console.log(v)
})
};
grid_aberdeen.dataSource.filter({
logic: "and",
filters: filters
});
}
search_btn.addEventListener("click", search);
正如你所看到的，我试图创建一个＆＃34;子条件＆＃34;如果你愿意的话，我想申请多选，但它没有做任何事情。控制台显示数组项目正在分离，但实际过滤它们并不起作用。
var sub_filter = { logic: "or", filters: [] }
答案 0 :(得分：2)
<强>更新
问题是filters永远不会添加到dataSource.filter()数组中，而filters方法会传递该数组。
仔细检查var filters = {
logic: "and",
filters: [
{ field: "ShipName", operator: "contains", value: "o" },
{ field: "ShipCity", operator: "contains", value: "o" },
{
logic: "or",
filters: [
{ field: "OrderID", operator: "eq", value: 10251 },
{ field: "OrderID", operator: "eq", value: 10259 }
]
}
]
};
$("#grid").data("kendoGrid").dataSource.filter(filters);
对象结构。支持所需的行为：
var contactList = new List<Contact> {
new Contact { Name="a", Fax = "1", Email=""},
new Contact { Name="b", Fax = "", Email="b@email.com"},
new Contact { Name="c", Fax = "3", Email="c@email.com"},
new Contact { Name="a", Fax = "", Email="a@email.com"},
new Contact { Name="b", Fax = "2", Email=""},
};
var result = (from c in contactList
.Where(contact => !string.IsNullOrEmpty(contact.Name))
.Select(c => c.Name)
.Distinct()
let fax = contactList.FirstOrDefault(contact => contact.Name == c &&
!string.IsNullOrEmpty(contact.Fax))
let email = contactList.FirstOrDefault(contact => contact.Name == c &&
!string.IsNullOrEmpty(contact.Email))
select new Contact {
Name = c,
Fax = fax == null ? "" : fax.Fax,
Email = email == null ? "" : email.Email
})
.ToList();
答案 1 :(得分：1)
好的，为了让这个工作，我的格式化过滤器本身有一个小错误。为了纠正这个问题，我制作了以下字符，现在允许将数组迭代并作为单独的项传递给搜索过滤器。
if (search_duties) {
var sub_filter = {
logic: "or",
filters: []
}
$.each(search_duties, function (i, v) {
sub_filter.filters.push(
{
field: "workscopecode",
operator: "eq",
value: v
})
})
filters.push(sub_filter);
}
请注意删除更改此内容的括号：
$.each(search_duties, function (i, v) {
sub_filter.filters.push[
{
field: "workscopecode",
operator: "eq",
value: v
}
]
console.log(v)
})
改为：
$.each(search_duties, function (i, v) {
sub_filter.filters.push(
{
field: "workscopecode",
operator: "eq",
value: v
})
})
因为[]已经在var过滤器中定义了：[]我不需要在实际过滤器本身中将其重新记录下来，否则输出看起来像[[... filters ...]]导致它什么都不做。