排序KnockoutJS中的复选框列

Question

我正在开发一个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数组进行排序，我该怎么做呢？

任何帮助将不胜感激。

Answer 1

你可以将你选中的bools转换为整数并对其进行排序。

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; 
});