时间戳

首页 > 解决方案 > 淘汰赛：表选择取消选择行。取消选择行的问题/挑战

javascript - 淘汰赛：表选择取消选择行。取消选择行的问题/挑战

问题描述

我有一个表格Knockout用来填写数据和选择行。现在的挑战是我可以选择行并且我可以看到它的详细信息。但是，当我单击分页或任何特定搜索框时，我希望取消选择行。

这是小提琴，它将解释更多

下面是 HTML 页面的模型代码

var RowModel = function(id, name, status) {
  this.ID = ko.observable(id);
  this.Name = ko.observable(name);
  this.Status = ko.observable(status);

};

RowModel.fromRawDataPoint = function(dataPoint) {
  return new RowModel(dataPoint.id, dataPoint.name, dataPoint.status);
};

标签： javascripthtmlknockout.jsknockout-2.0knockout-3.0

解决方案

从小提琴中，我可以看到您正在通过调用self.selected(null)and来实现取消选择self.enableEdit(false)。

因此，只要页面更改或搜索完成，您就可以简单地再次调用它们。

self.deselect = function(){
    self.selected(null);
    self.enableEdit(false);
};

this.next = function() {
    self.deselect();
    if(self.pageNumber() < self.totalPages()) {
        self.pageNumber(self.pageNumber() + 1);
    }
}

this.lastpage = function() {
    self.deselect();
    if(self.pageNumber() < self.totalPages()) {
        self.pageNumber(self.totalPages());
    }
}


this.firstpage = function() {
    self.deselect();
    if(self.pageNumber() != 0) {
        self.pageNumber(self.pageNumber()-self.pageNumber());
        alert(self.pageNumber());
    }
}

this.previous = function() {
    self.deselect();
    if(self.pageNumber() != 0) {
        self.pageNumber(self.pageNumber() - 1);
    }
}

编辑：在您对 ID、名称和状态没有更新的评论之后，我添加了 3 个新的observablesselectedName和. 我在 HTML 中使用这些 observables，以便在更改时可以更新它们。这是通过使用函数来完成的。selectedIDselectedStatusselectedsubscribeselected

HTML

<input type="text" name="ID" data-bind="value: selectedID, enable: enableEdit" />
<br>Name :
<input type="text" name="Name" data-bind="value: selectedName, enable: enableEdit" />
<br>Status :
<input type="text" name="Status" data-bind="value: selectedStatus, enable: enableEdit" />

JS

self.selected = ko.observable(self.items()[0]);
self.selectedID=ko.observable(self.items()[0].ID());
self.selectedName=ko.observable(self.items()[0].Name());
self.selectedStatus=ko.observable(self.items()[0].Status());

self.selected.subscribe(function(newValue){
  if (newValue === null){
    self.selectedID(null);
    self.selectedName(null);
    self.selectedStatus(null);
    return;
  }
  if (typeof newValue !== 'undefined'){
    self.selectedID(newValue.ID());
    self.selectedName(newValue.Name());
    self.selectedStatus(newValue.Status());
  }
});

推荐阅读