剔除js-使用列标题对表进行排序 [英] knockout js - Table sorting using column headers

问题描述

我是淘汰js&的新手.需要帮助锻炼如何使用列标题对表进行动态排序.

I'm new to knockout js & need help workout how to dynamically sort a table using the column header.

以下是我的代码的一部分:

Following is part of my code:

HTML:

<table>
    <thead>
        <tr data-bind="click: sortFunction">
            <th id='id'>Id</th>
            <th id='name'>Name</th>
            <th id='description'>Description</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: deptList">
        <tr>
            <td><span data-bind="text: id" /></td>
            <td><span data-bind="text: name" /></td>
            <td><span data-bind="text: description" /></td>
        </tr>    
    </tbody>
</table>

在我的视图模型中，我具有以下函数，该函数用于使用表头对数据表进行排序.

In my view model I've the following function which I use to sort a data table using the table header.

ViewModel:

self.deptList = ko.observableArray(mylist);
self.sortColumn = ko.observable("id");
self.isSortAsc = ko.observable("True");

var Dept = function(id, name, description) {
    this.id = ko.observable(id);
    this.name = ko.observable(name);
    this.description = ko.observable(description);
};

var mylist = [
    new Dept(1, "Dept 1", "D1"),
    new Dept(2, "Dept 2", "D6"),
    new Dept(3, "Dept 3", "D3"),
    new Dept(4, "Dept 4", "D4")
];

self.sortFunction = function(data, event) {

    if (self.sortColum === event.target.id)
        self.isSortAsc = !self.isSortAsc;
    else {
        self.sortColumn = event.target.id;
        self.isSortAsc = "True";
    }

    self.deptList.sort(function(a, b) {
        if (self.sortColum === 'id') {
            if (self.isSortAsc)
                a.id < b.id ? -1 : 1;
            else
                a.name < b.name ? 1 : -1;
        } else if (self.sortColum === 'name') {
            if (self.isSortAsc)
                a.name < b.name ? -1 : 1;
            else
                a.name < b.name ? 1 : -1;
        } else(self.sortColum === 'description') {
            if (self.isSortAsc)
                a.description < b.description ? -1 : 1;
            else
                a.description < b.description ? 1 : -1;
        }

    });
};

尽管以上代码可以正常工作，但我认为应该有一种更好的方法(我的意思是将列ID作为参数传递)，这在有大量列的情况下将很有用.

Even though above code is working I think there should be a better way to do this (I mean passing the column id as a parameter) which will be useful when there is a large of columns.

我尝试了left[self.sortColumn] < right[self.sortColumn] ? -1 : 1，但效果不如预期.

I tried left[self.sortColumn] < right[self.sortColumn] ? -1 : 1, which didn't work as expected.

如果可以通过动态列名进行排序，请显示示例代码.

If it is possible to sort via a dynamic column name please show a sample code.

谢谢.

推荐答案

这是一个快速的绑定处理程序，您可以将其添加到您的程序中.单击th后，它将根据绑定中定义的属性名称对列进行排序.

Here is a quick bindingHandler that you can add to your th's. Upon clicking the th it will sort the column according the property name as defined in the binding.

ko.bindingHandlers.sort = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var asc = false;
        element.style.cursor = 'pointer';

        element.onclick = function(){
            var value = valueAccessor();
            var prop = value.prop;
            var data = value.arr;

            asc = !asc;

            data.sort(function(left, right){
                var rec1 = left;
                var rec2 = right;

                if(!asc) {
                    rec1 = right;
                    rec2 = left;
                }

                var props = prop.split('.');
                for(var i in props){
                    var propName = props[i];
                    var parenIndex = propName.indexOf('()');
                    if(parenIndex > 0){
                        propName = propName.substring(0, parenIndex);
                        rec1 = rec1[propName]();
                        rec2 = rec2[propName]();
                    } else {
                        rec1 = rec1[propName];
                        rec2 = rec2[propName];
                    }
                }

                return rec1 == rec2 ? 0 : rec1 < rec2 ? -1 : 1;
            });
        };
    }
    };

这有点优雅，因为您不必为每个列创建单独的函数.可以在这里找到更完整的工作示例: http://jsfiddle.net/brendonparker/6S85t/

This is a little more elegant in that you don't have to create a separate function for each column. A more complete working example can be found here: http://jsfiddle.net/brendonparker/6S85t/

这篇关于剔除js-使用列标题对表进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！