0

我正在尝试使用淘汰赛创建一个带有服务器端排序和分页的 html 表格网格。

我的工作基于淘汰赛 simpleGrid 示例。

到目前为止它可以工作，但我在绑定 css 类以显示选择哪一列进行排序时遇到问题。

这是我的代码：

html：

<thead>
  <tr data-bind="foreach: columns">
    <th data-bind="text: headerText, click: $parent.sortBy, css:  $parent.sortClass($data)"></th>
  </tr>
</thead>

淘汰赛：

viewModel: function (configuration) {
  ...
  // Sort properties
  this.sortProperty = configuration.sortProperty;
  this.sortDirection = configuration.sortDirection;
  ...
  this.sortClass = function (data) {
    return data.propertyName == this.sortProperty() ? this.sortDirection() == 'ascending' ? 'sorting_asc' : 'sorting_desc' : 'sorting';
  };
}

我的主要淘汰赛课程：

this.gridViewModel = new ko.simpleGrid.viewModel({
data: self.items,
pageSize: self.itemsPerPages,
totalItems: self.totalItems,
currentPage: self.currentPage,
sortProperty: self.sortProperty, 
sortDirection: self.sortDirection,
columns: [
    new ko.simpleGrid.columnModel({ headerText: "Name", rowText: "LastName", propertyName: "LastName" }),
    new ko.simpleGrid.columnModel({ headerText: "Date", rowText: "EnrollmentDate", propertyName: "EnrollmentDate" })
],
sortBy: function (data) {
    data.direction = data.direction == 'ascending' ? 'descending' : 'ascending';
    self.sortProperty = data.propertyName;
    self.sortDirection = data.direction;

    // Server call
    $.getGridData({
        url: apiUrl,
        start: self.itemStart,
        limit: self.itemsPerPages,
        column: data.propertyName,
        direction: data.direction,
        success: function (studentsJson) {
            // data binding
            self.items(studentsJson.gridData);
        }
    });
},
}

这样，第一次绑定数据时，我的 css 类就正确应用了。但是当我点击一个列时，css 类不会更新。

你知道我做错了什么吗？

4

1 回答 1

3

css 类不会更新，因为这$parent.sortClass($data)意味着在首次应用绑定时仅调用一次 sortClass 函数。要让它在点击时更新，您可以将 sortClass 转换为计算的 observable，如下面的代码所示（小提琴：http: //jsfiddle.net/ZxEK6/2/）

var Parent = function(){
    var self = this;    
    self.columns = ko.observableArray([
        new Column("col1", self),
        new Column("col2", self),
        new Column("col3", self)
    ]);

}

var Column = function(headerText, parent){
    var self = this;
    self.parent = parent;
    self.sortDirection = ko.observable();
    self.headerText = ko.observable(headerText);
    self.sortClass = ko.computed(function(){
        if (!self.sortDirection()){
            return 'no_sorting';
        }
        return self.sortDirection() == 'ascending' ? 'sorting_asc' : 'sorting_desc';
    },self);

    self.sortBy = function(){
        if (!self.sortDirection()) {
            self.sortDirection('ascending');
        } else if (self.sortDirection() === 'ascending'){
            self.sortDirection('descending');
        } else {
            self.sortDirection('ascending');
        }
    }
}

ko.applyBindings(new Parent())
于 2013-11-10T09:30:44.883 回答