时间戳

首页 > 解决方案 > 淘汰赛表：突出显示表行

javascript - 淘汰赛表：突出显示表行

问题描述

我在这里有一个示例小提琴。在此表中，我希望实现突出显示选定的特定行。如果未选中，则不应突出显示行。我找到了Fiddle的众多示例之一，但我无法将它们合并到上面的示例 Fiddle 中。下面是显示基本表格的 HTML 代码。

<table id="devtable">
<thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Status</th>
    </tr>
</thead>
<tbody data-bind="foreach: items">
    <tr data-bind=" click: $parent.select  ">
        <td data-bind="text: ID"></td>
        <td data-bind="text: Name"></td>
        <td data-bind="text: Status"></td>
    </tr>
</tbody>

ID :
姓名 :
状态 :

这是进行操作的剔除功能

<Script>
var rowModel = function (id, name, status) {
    this.ID = ko.observable(id);
    this.Name = ko.observable(name);
    this.Status = ko.observable(status);
};

var myData = [{
    id: "001",
    name: "Jhon",
    status: "Single"
}, {
    id: "002",
    name: "Mike",
    status: "Married"
}, {
    id: "003",
    name: "Marrie",
    status: "Complicated"
}];

function MyVM(data) {
    var self = this;

    self.items = ko.observableArray(data.map(function (i) {
        return new rowModel(i.id, i.name, i.status);
    }));

    self.select = function(item) {
        self.selected(item);
        self.enableEdit(true);
    };


    self.flashCss = ko.computed(function () {
        //just an example

        return 'flash';
    });


    self.selected = ko.observable(self.items()[0]);

    self.enableEdit = ko.observable(false);

    self.changeTableData = function() {
// How do I change the Data here and it should also reflect on the Page.
// If I do binding depending on condition it gives me error
if(true){
var myData = [{
    id: "001",
    name: "Jhon",
    status: "Single"
}, {
    id: "002",
    name: "Mike",
    status: "Married"
}, {
    id: "003",
    name: "Marrie",
    status: "Complicated"
}];
}
else{
 myData = [{
    id: "111",
    name: "ABC",
    status: "Single"
}, {
    id: "222",
    name: "XYZ",
    status: "Married"
}, {
    id: "3333",
    name: "PQR",
    status: "Complicated"
}];
}
}   

}

ko.applyBindings(new MyVM(myData));
</script>

下面的 CSS 代码

.flash { background-color: yellow; }

标签： javascripthtmlknockout.jshtml-tableknockout-3.0

解决方案

您可以使用css绑定.flash根据当前选择的值添加类：

<tr data-bind="click: $parent.select, 
               css: { flash: $parent.selected() === $data }">
  ...
</tr>

如果你不喜欢在视图中定义这个逻辑，你可以传递一个对selectedobservable 的引用并在你的内部创建一个计算属性RowModel：

var RowModel = function( /* ... */ selectedRow) {
  // ...
  this.isSelected = ko.pureComputed(function() {
    return selectedRow() === this;
  }, this);
}

这是您的小提琴中的快速修复：

http://jsfiddle.net/wa78zoe4/

PS如果您想要切换行为，请更新select为：

self.select = function(item) {
  if (item === self.selected()) {
    self.selected(null);
    self.enableEdit(false);
  } else {
    self.selected(item);
    self.enableEdit(true);
  }
};

推荐阅读