0
我在我的MVC應用程序中使用KendoUI。我正在使用一些輸入框和多選控件過濾我的網格。多選控件將選定的元素作爲數組傳遞。我的問題是如何使用多選按鈕篩選網格？如何使用Multiselect小部件過濾KendoUI網格？
此刻所有輸入共享「AND」的全局條件，以便它們在返回數據時可以一起工作，但多選參數需要具有「OR」的子條件才能工作。
我試圖做的是迭代傳入的數組對象並單獨返回它們。我需要將「或」的多重選擇條件應用於它們。我可以看到數組對象被單獨返回到控制檯，但是tehy沒有被包含在網格的整體過濾中，這使得它成爲冗餘。
任何人都可以擺脫一些像我可以解決這個問題？我在下面列出了我的代碼，其中顯示了multiselect小部件在我的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);
正如你可以看到我已經試過，如果你會創建一個「子條件」，我想申請到多選，但它沒有做任何事情。控制檯顯示數組項目正在分離很好，但實際上對它們進行過濾不起作用。
var sub_filter = { logic: "or", filters: [] }