我正在尝试将数据排序到我的webform中;而我似乎能做的就是用asc或desc对整个数据集进行排序，尽管每个列数据都已绑定。
以下是我的Index.cshtml文件的代码;请尽可能协助 - 我知道它必须与我如何绑定数据然后重新显示它有关。
@using System.Web.Optimization
@model Nutricity.WMS.Web.Api.Inventory.Models.ParLevelMaintenanceViewModel
@{
ViewBag.Title = "Par Level Maintenance";
}
<h2>Par Level Maintenance</h2>
<style type="text/css">
.title-row {
background-color: lightgrey;
}
</style>
<div class="row">
<div class="col-md-12">
<div class="tabpanel">
<ul class="nav nav-tabs" role="tablist" data-bind="foreach: MovementBuckets">
<li role="presentation"><a href="#suppliers" role="tab" data-toggle="tab" data-bind="text: Name, attr: { href: '#' + Name().replace(/\s+/g, '') }"></a></li>
</ul>
</div>
<div class="tab-content">
<!-- ko foreach: MovementBuckets -->
<div role="tabpanel" class="tab-pane" data-bind="attr: { id: Name().replace(/\s+/g, '') }">
<div class="row" style="padding: 5px 0px 5px 0px;">
<div class="col-md-12">
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" data-bind="value: SearchData.SearchQuery" />
</div>
<button class="btn btn-default" data-bind="click: Search">Search</button>
</form>
</div>
</div>
<table class="table table-bordered table-condensed" style="margin-bottom: 2px;" data-bind="visible: SearchResult.ParLevels().length > 0">
<thead>
<tr>
<th colspan="8">
<a href="#" data-bind="click: Sort">SKU </a><i class="fa fa-sort-asc" data-bind=" visible: SearchData.SortColumn() == 'SKU' && SearchData.SortOrder() == 'ASC'"></i><i class="fa fa-sort-desc" data-bind=" visible: SearchData.SortColumn() == 'SKU' && SearchData.SortOrder() == 'DESC'"></i>
</th>
<th colspan="1">
Status
</th>
</tr>
<tr>
<th><a href="#" data-bind="click: Sort">30 Day Units Sold </a><i class="fa fa-sort-asc pull-right" data-bind=" visible: SearchData.SortColumn() == 'Units30Days' && SearchData.SortOrder() == 'ASC'"></i><i class="fa fa-sort-desc pull-right" data-bind=" visible: SearchData.SortColumn() == 'Units30Days' && SearchData.SortOrder() == 'DESC'"></th>
<th><a href="#" data-bind="click: Sort">Avg Daily Units Sold </a><i class="fa fa-sort-asc pull-right" data-bind=" visible: SearchData.SortColumn() == 'AvgDailyUnits' && SearchData.SortOrder() == 'ASC'"></i><i class="fa fa-sort-desc pull-right" data-bind=" visible: SearchData.SortColumn() == 'AvgDailyUnits' && SearchData.SortOrder() == 'DESC'"></th>
<th><a href="#" data-bind="click: Sort">Amazon Units </a><i class="fa fa-sort-asc pull-right" data-bind=" visible: SearchData.SortColumn() == 'AmazonUnits' && SearchData.SortOrder() == 'ASC'"></i><i class="fa fa-sort-desc pull-right" data-bind=" visible: SearchData.SortColumn() == 'AmazonUnits' && SearchData.SortOrder() == 'DESC'"></th>
<th><a href="#" data-bind="click: Sort">HealthDx Units </a><i class="fa fa-sort-asc pull-right" data-bind=" visible: SearchData.SortColumn() == 'HealthDxUnits' && SearchData.SortOrder() == 'ASC'"></i><i class="fa fa-sort-desc pull-right" data-bind=" visible: SearchData.SortColumn() == 'CompanyUnits' && SearchData.SortOrder() == 'DESC'"></th>
<th><a href="#" data-bind="click: Sort">Total Units </a><i class="fa fa-sort-asc pull-right" data-bind=" visible: SearchData.SortColumn() == 'TotalUnits' && SearchData.SortOrder() == 'ASC'"></i><i class="fa fa-sort-desc pull-right" data-bind=" visible: SearchData.SortColumn() == 'TotalUnits' && SearchData.SortOrder() == 'DESC'"></th>
<th><a href="#" data-bind="click: Sort">Days On Hand </a><i class="fa fa-sort-asc pull-right" data-bind=" visible: SearchData.SortColumn() == 'DaysOnHand' && SearchData.SortOrder() == 'ASC'"></i><i class="fa fa-sort-desc pull-right" data-bind=" visible: SearchData.SortColumn() == 'DaysOnHand' && SearchData.SortOrder() == 'DESC'"></th>
<th>Auto Par Levels</th>
<th>Par Override</th>
<th>Par Level</th>
</tr>
</thead>
<tbody data-bind="foreach: SearchResult.ParLevels">
<tr>
<td data-bind="text: SKU() + ' - ' + Title() " colspan="8" class="title-row"></td>
<td class="title-row" colspan="1">
<span data-bind="text: Status" style="text-align: right;" class="text-danger"></span>
</td>
</tr>
<tr>
<td data-bind="text: Units30Days"></td>
<td data-bind="text: AvgDailyUnits().toFixed(2)"></td>
<td data-bind="text: AmazonUnits"></td>
<td data-bind="text: CompanyUnits"></td>
<td data-bind="text: TotalUnits"></td>
<td data-bind="text: DaysOnHand().toFixed(2)"></td>
<td>
<input type="checkbox" data-bind="checked: AutoParLevels, disable: true" /></td>
<td>
<input type="checkbox" data-bind="checked: OverrideId() > 0, click: toggleParOverride, enable: $root.UserHasOwnerRole" /></td>
<td>
<input type="text" style="width: 50px;" data-bind="value: ParLevel, enable: isEditing() && !isSaving()" />
<button class="btn btn-primary" data-bind="visible: canEdit() && $root.UserHasOwnerRole(), click: editParLevel">Edit</button>
<button class="btn btn-primary" data-bind="visible: isEditing, click: saveParLevel">Save</button>
<button class="btn btn-danger" data-bind="visible: isEditing, click: cancelEditParLevel">Cancel</button>
</td>
</tr>
</tbody>
</table>
<div data-bind="visible: !(SearchResult.ParLevels().length > 0)">
<p class="text-info" style="padding-top: 10px;">The search query returned no results.</p>
</div>
<div class="row" data-bind="visible: SearchResult.TotalPages() > 0">
<div class="col-md-2">
<form>
<div class="form-group" style="margin-top: 5px;">
<select class="form-control" data-bind="value: SearchData.PageSize, event: { change: Search }">
<option>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
</select>
</div>
</form>
</div>
<div class="col-md-8" style="margin-top: 5px;">
<p class="text-info" style="text-align: center;" data-bind="text: PageLabel"></p>
</div>
<div class="col-md-2">
<nav class="pull-right">
<ul class="pagination" style="margin-top: 5px;">
<li data-bind="css: { disabled: PreviousPageDisabled() }">
<a href="#" aria-label="Previous" data-bind="click: PreviousPageClick">
<span aria-hidden="true">«</span>
</a>
</li>
<li data-bind="css: { disabled: NextPageDisabled() }">
<a href="#" aria-label="Next" data-bind="click: NextPageClick">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- /ko -->
</div>
</div>
</div>
<!-- Reports -->
<div class="row">
<div class="col-md-12">
<h4>Reports</h4>
<a href="@Url.Content("~/ReportViewer.aspx?ReportPath=/NutricityReports/Par Levels - HealthDx")" target="_blank">Par Levels Report</a>
</div>
</div>
@Scripts.Render("~/Scripts/knockout")
@Scripts.Render("~/Scripts/models")
<script type="text/javascript">
$(function () {
var model = new ParLevelMaintenanceVM(@Html.Raw(@Json.Encode(Model)));
ko.applyBindings(model);
$('.nav-tabs a:first').tab('show');
});
</script>
答案 0 :(得分：0)
每个TH必然会点击：排序，但是当前＆＃34;项目＆＃34;每一个都是你的ViewModel。您需要添加一个参数来指示要排序的列，例如
<th><a href="#" data-bind="click: Sort('SKU')">...