knockout.js – knockout js – 使用列标题进行表排序

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

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

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>

在我的视图模型中,我有以下功能,用于使用表头对数据表进行排序.

视图模型：

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作为参数传递),当有大量列时,这将是有用的.

我试过了：
左[self.sortColumn]右[self.sortColumn]？ -1：1
这没有预期的运作.

如果可以通过动态列名进行排序,请显示示例代码.
提前致谢.

解决方法

这是一个快速绑定的手柄,你可以添加到你的th.单击它将按照绑定中定义的属性名称对列进行排序.

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/

原文地址：https://www.jb51.cc/js/152049.html