1
我正在開發一個C＃/ ASP.Net MVC項目，我需要對我的html表中的所有列進行排序，我還需要對複選框列進行排序，我一直在尋找可能會導致我在某個地方，但幾天來一直在牆上碰撞，我尋求你的幫助！排序KnockoutJS中的複選框列
查看：Items.cshtml
<table class="table table-hover table-nomargin table-bordered dataTable-nosort">
<thead>
<tr>
<th style="width: 3%" class="table-checkbox hidden-480"><a href="#" rel="tooltip" title="Sort" style="text-decoration: none; color: #414141;" data-bind="click: SortCheckBox">Sort</a></th>
<th><a href="#" rel="tooltip" title="Sort by Item Description" style="text-decoration: none; color: #414141; " data-bind="click: SortDescription">Item Description</a></th>
<th style="width: 13%"><a href="#" rel="tooltip" title="Sort by Supplier Name" style="text-decoration: none; color: #414141; " data-bind="click: SortSupplier">Supplier</a></th>
<th style="width: 10%"><a href="#" rel="tooltip" title="Sort by Brand Name" style="text-decoration: none; color: #414141; " data-bind="click: SortBrand">Brand</a></th>
<th style="width: 10%"><a href="#" rel="tooltip" title="Sort by Category Name" style="text-decoration: none; color: #414141; " data-bind="click: SortCategory">Category</a></th>
<th style="width: 6%"><a href="#" rel="tooltip" title="Sort by Total Inventory" style="text-decoration: none; color: #414141; " data-bind="click: SortItemInv">Item Inv</a></th>
<th style="width: 6%"><a href="#" rel="tooltip" title="Sort by Total Inventory" style="text-decoration: none; color: #414141; " data-bind="click: SortTotalInv">Total Inv</a></th>
<th style="width: 4%"><a href="#" rel="tooltip" title="Sort by Freight" style="text-decoration: none; color: #414141; " data-bind="click: SortFreight">Freight</a></th>
<th style="width: 5%"><a href="#" rel="tooltip" title="Sort by Other Cost" style="text-decoration: none; color: #414141; " data-bind="click: SortOtherCost">Other Cost</a></th>
<th style="width: 7%"><a href="#" rel="tooltip" title="Sort by Item Cost" style="text-decoration: none; color: #414141; " data-bind="click: SortItemCost">Item Cost</a></th>
<th style="width: 7%"><a href="#" rel="tooltip" title="Sort by Cost Price" style="text-decoration: none; color: #414141; " data-bind="click: SortTotalCost">Total Cost</a></th>
</tr>
<tr class='thefilter'>
<th class='with-checkbox'>@*<input type="checkbox" name="check_all" id="check_all" data-bind="checked: CheckAll">*@</th>
<th>
@*<input id="search-box" name="search-box" type="text" aria-controls="DataTables_Table_8" style="margin-bottom: 0%; width: 90%" placeholder="Search Items here..." data-bind="value: SearchDescription, hasfocus: SearchFocus, valueUpdate: 'keyup'" autocomplete="off"/>*@
@*<button id="btn-clear" data-original-title="Clear" class="btn btn-primary" type="button" data-bind="visible: clearIsEnabled, click: clearTextField" rel="tooltip" title="Clear">
<i class="icon icon-remove"></i>
</button>*@
<input id="" name="search-box-desc" style="margin-bottom: 0%; width: 90%" type="text" placeholder="Item Description" data-bind="value: filterDescription, valueUpdate: 'keyup'" />
</th>
<th>
<select style="margin-bottom: 0%; width: 90%" data-bind="value: SupplierNameKey, event: { change: filterIndividual }">
<option value="">All</option>
<!--ko foreach: suppliers-->
<option data-bind="optionsValue: 'Name'"><!--ko text: Name--><!--/ko--></option>
<!--/ko-->
</select>
<input type="hidden" data-bind="value: SearchSupplier" />
@*<select style="margin-bottom: 0%; width: 90%" data-bind="visible: false, options: getSuppliers, value: SupplierNameKey, optionsText: 'Name', optionsValue: 'Name', event: {change: filterIndividual}, optionsCaption: 'All'" name="DataTables_Table_8_length" aria-controls="DataTables_Table_8" id="selDVB" class="chzn-done"></select>*@
</th>
<th>
<select style ="margin-bottom: 0%; width: 90%" data-bind="value: BrandKey, event: { change: filterIndividual }">
<option value="">All</option>
<!--ko foreach: brands-->
<option data-bind="optionsValue: 'Name'"><!--ko text: Name--><!--/ko--></option>
<!--/ko-->
</select>
<input type="hidden" data-bind="value: SearchBrand" />
@*<select style="margin-bottom: 0%; width: 90%" data-bind="visible: false, options: getBrands, value: BrandKey, optionsText: 'Name', optionsValue: 'Name', event: {change: filterIndividual}, optionsCaption: 'All'" name="DataTables_Table_8_length" size="1" aria-controls="DataTables_Table_8" id="selDVB" class="chzn-done"></select>*@
</th>
<th>
<select style="margin-bottom: 0%; width: 90%" data-bind="value: CategoryKey, event: { change: filterIndividual }">
<option value="">All</option>
<!--ko foreach: categories-->
<option data-bind="optionsValue: 'Name'"><!--ko text: Name--><!--/ko--></option>
<!--/ko-->
</select>
<input type="hidden" data-bind="value: SearchCategory" />
@*<select style="margin-bottom: 0%; width: 90%" data-bind="visible: false, options: getCategories, value: CategoryKey, optionsText: 'Name', optionsValue: 'Name', event: {change: filterIndividual}, optionsCaption: 'All'" name="DataTables_Table_8_length" size="1" aria-controls="DataTables_Table_8" id="selDVB" class="chzn-done"></select>*@
</th>
<th class="hidden-480"></th>
<th class="hidden-480"></th>
<th class="hidden-480"></th>
<th class="hidden-480"></th>
<th class="hidden-480"></th>
<th class="hidden-480"></th>
</tr>
</thead>
<tbody data-bind="foreach: pagedList ">
<tr>
<td class="table-checkbox hidden-480">
<input class="selectable" type="checkbox" data-bind="attr: { value: ID }, checked: $parent.ItemSelected" />
</td>
<td class="table-checkbox hidden-480" data-bind="text: Description"></td>
<td class="table-checkbox hidden-480" data-bind="text: Supplier"></td>
<td class="table-checkbox hidden-480" data-bind="text: Brand"></td>
<td class="table-checkbox hidden-480" data-bind="text: Category"></td>
<td data-bind="text: SupplierItemInventory" style="text-align:right"></td>
<td style="text-align:right" class="table-checkbox hidden-480" data-bind="text: TotalInventory"></td>
<td data-bind="text: Freight" style="text-align:right"></td>
<td data-bind="text: OtherCost" style="text-align:right"></td>
<td data-bind="text: SupplierItemCost" style="text-align:right"></td>
<td data-bind="text: Cp" style="text-align:right"></td>
</tr>
</tbody>
</table>
以下是我對其他列進行排序：
self.SortDescription = function() {
description = -description;
self.list.sort(function (a, b) {
if (a.Description > b.Description) return 1 * description;
if (a.Description < b.Description) return -1 * description;
return 0;
});
};
self.SortSupplier = function() {
suppliername = -suppliername;
self.list.sort(function (a, b) {
if (a.Supplier > b.Supplier) return 1 * suppliername;
if (a.Supplier < b.Supplier) return -1 * suppliername;
return 0;
});
};
我想將ItemSelected數組進行排序，我該怎麼做呢？
任何幫助將不勝感激。
我試過了，但它會將檢查的行推到列表的底部（因此將它放在最後一頁），我想知道在這個實現中是否還有更多工作要做？ – shifter
如果你想讓它們位於頂部，只需將「return 1」替換爲「return -1」，反之亦然。 – TrueEddie
Thanks @TrueEddie，你一直在幫助很大，現在我需要另一種方式顯示選中的行，我將發佈另一個問題，希望你們能幫我弄清楚。 – shifter