Question

所以我试图同时对多个列进行排序。防爆。如果我按升序对表格进行排序，以查看我的帐户是否已激活。然后在同一时间我希望列表按姓氏的升序自动排序。这是代码：

   <table class="table table-hover admin-table">
    <thead>
        <tr>
            <th data-bind="click: function () { setSort('FirstName'); }, css: { 'active-sort': $root.sortColumn() == 'FirstName', 'asc': $root.sortColumn() == 'FirstName' && $root.sortDirection() == 'ASC', 'desc': $root.sortColumn() == 'FirstName' && $root.sortDirection() == 'DESC' }">First Name<i></i></th>
            <th data-bind="click: function () { setSort('LastName'); }, css: { 'active-sort': $root.sortColumn() == 'LastName', 'asc': $root.sortColumn() == 'LastName' && $root.sortDirection() == 'ASC', 'desc': $root.sortColumn() == 'LastName' && $root.sortDirection() == 'DESC' }">Last Name<i></i></th>
            <th data-bind="click: function () { setSort('Email'); }, css: { 'active-sort': $root.sortColumn() == 'Email', 'asc': $root.sortColumn() == 'Email' && $root.sortDirection() == 'ASC', 'desc': $root.sortColumn() == 'Email' && $root.sortDirection() == 'DESC' }">Email<i></i></th>
            <th data-bind="click: function () { setSort('IsActivated', 'LastName'); }, css: { 'active-sort': $root.sortColumn() == 'IsActivated', 'asc': $root.sortColumn() == 'IsActivated' && $root.sortDirection() == 'ASC', 'desc': $root.sortColumn() == 'IsActivated' && $root.sortDirection() == 'DESC' }">Is Activated<i></i></th>
            <th data-bind="click: function () { setSort('IsAdministrator'); }, css: { 'active-sort': $root.sortColumn() == 'IsAdministrator', 'asc': $root.sortColumn() == 'IsAdministrator' && $root.sortDirection() == 'ASC', 'desc': $root.sortColumn() == 'IsAdministrator' && $root.sortDirection() == 'DESC' }">Is Administrator<i></i></th>
            <th></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: accounts">
        <tr>
            <td data-bind="text: FirstName"></td>
            <td data-bind="text: LastName"></td>
            <td data-bind="text: Email"></td>
            <td data-bind="text: IsActivated() ? 'Yes' : 'No'"></td>
            <td data-bind="text: IsAdministrator() == 'true' ? 'Yes' : 'No'"></td>
            <td>
                <button class="btn-std" data-bind="click: $root.showUpdateModal">Update</button> 
                <div class="clearfix"></div>
                <button class="btn-std" data-bind="click: $root.resendVerificationEmail, visible: !IsActivated()">Resend Verification Email</button>
            </td>
        </tr>
    </tbody>
</table>

Java脚本：

        self.renderUsers = function (pageIndex, pageSize) {
        var filteredUsers;

        if (self.sortColumn() == "IsActivated") {
            if (self.sortDirection() == "ASC") {
                filteredUsers = Enumerable.from(allAccounts).orderBy("$." + self.sortColumn() + "()").skip((pageIndex - 1) * pageSize).take(pageSize).toArray();
            } else {
                filteredUsers = Enumerable.from(allAccounts).orderByDescending("$." + self.sortColumn() + "()").skip((pageIndex - 1) * pageSize).take(pageSize).toArray();

            }
        }
        else {
            if (self.sortDirection() == "ASC") {
                filteredUsers = Enumerable.from(allAccounts).orderBy("$." + self.sortColumn() + "().toUpperCase()").skip((pageIndex - 1) * pageSize).take(pageSize).toArray();
            } else {
                filteredUsers = Enumerable.from(allAccounts).orderByDescending("$." + self.sortColumn() + "().toUpperCase()").skip((pageIndex - 1) * pageSize).take(pageSize).toArray();
            }
        }

        self.accounts(filteredUsers);
    };

Answer 1

要排序，您应该在可观察数组上使用sort函数。

要对IsActivated和LastName进行排序，您可以这样做：

self.accounts.sort(function (l, r) { return l.IsActivated === r.IsActivated 
    ? l.LastName > r.LastName ? 1 : -1
    : l.IsActivated > r.IsActivated ? 1 : -1 });

http://jsfiddle.net/Wk7dr/4/

Answer 2

我在这里发布了一个概念验证：

http://jsfiddle.net/ERN4w/

小提琴是一个非常简单的例子，但功能部分可以简化为以下内容：

// Assuming criteria is an array of sort criteria, something like:
//
// criteria = [{
//     order: true, // ascending, false for descending
//     property: 'lastName'
// }, {
//     order: true, // ascending, false for descending
//     property: 'firstName'
// }];
//
observableItems.sort(function (item1, item2) {
    var comparison = 0,
        i = 0;

    while (comparison === 0 && i < criteria.length) {
        comparison = compareValues(criteria[i].order,
            item1[criteria[i].property],
            item2[criteria[i].property]);

        i += 1;
    }

    return comparison;
});

'compareValues'是具有以下签名的函数：

function compareValues(ascending, value1, value2) {
    // Compare value1 to value2 and return 1, -1, or 0.
}

jsFiddle使用ko.computed和observableArray排序条件对项目进行排序。项目根据排序标准的变化动态排序。

希望这对你有用。

一次排序多个列

2 个答案: