在 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

您可以将检查的布尔值转换为整数并对其进行排序。

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