我正在开发一个C#/ ASP.Net MVC项目,我需要对我的html表中的所有列进行排序,我还需要对复选框列进行排序,我一直在寻找可以引导我到某个地方的想法,但是我已经在墙上碰了几天,我寻求你的帮助!
查看: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数组进行排序,我该怎么做?
非常感谢任何帮助。
答案 0 :(得分:1)
您可以将已检查的bool转换为整数并对其进行排序。
self.list.sort(function (a, b)
{
if ((a.checked ? 1 : 0) > (b.checked ? 1 : 0)) return 1;
if ((a.checked ? 1 : 0) < (b.checked ? 1 : 0)) return -1;
return 0;
});