如何在项目更改时突出显示表格行？答案

【问题标题】：How can I get a table row to highlight when an item changes?如何在项目更改时突出显示表格行？
【发布时间】：2014-03-14 10:59:46
【问题描述】：

我有一个包含资产信息的数据表。用户可以添加/编辑/删除资产，当他们添加或编辑资产时，我希望突出显示相应的表格行。

我遇到的问题是，在添加或更新资产时，所有表格行都会突出显示，而不仅仅是相关行；我认为这可能与我使用计算的 observable 来填充表有关。我使用计算出的 observable 来动态过滤表格。

这是视图模型和 HTML 当前外观的示例（由于某种原因，过滤器在小提琴中不起作用，我现在不确定为什么）-> http://jsfiddle.net/c7y2A/1/。

我尝试使用简单的绑定，分配给<tr> 元素

ko.bindingHandlers.flash = {
    update: function (element, valueAccessor) {
        var el = $(element);
        ko.utils.unwrapObservable(valueAccessor());

        el.addClass('flash');
    }
};

谁能帮我突出显示单个行？我是否需要以某种方式更改我的设置以不使用计算出的 observable？我仍然需要能够动态过滤表，所以我不确定如果我不使用计算的 observable 它将如何工作。

顺便说一下，flash 类只是做了以下事情：

.flash {
    animation: flash 2s ease forwards;
}

@keyframes flash {
    0% {
        background: white;
    }

    35% {
        background: #fffbcc;
    }

    65% {
        background: #fffbcc;
    }

    100% {
        background: white;
    }
}

感谢您能给我的任何帮助:-)

亚当

【问题讨论】：

'return item.name().toLowerCase().indexOf(filter) > -1;'将使您的过滤器正常工作。您有可以添加、编辑和删除项目的示例吗？您可以通过给每一行一个 ID ('myID' + $index) 然后在计算中使用 jQuery 设置类来做到这一点

标签： knockout.js

【解决方案1】：

我认为您需要一些东西来记录资产对象的原始值，以便您可以将当前值与原始值进行比较。使用计算后，您可以输出所需的 css。

http://jsfiddle.net/gonefishern/c7y2A/3/

HTML

<input type="text" data-bind="value: filter, valueUpdate: 'afterkeydown'" placeholder="Filter assets" />
<table>
    <thead>
        <tr>
            <th>Asset Name</th>
            <th>Serial Number</th>
            <th>Manufacturer</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: {data: filteredAssets}">
        <tr data-bind="css: flashCss, click: $parent.selectAsset">
            <td data-bind="text: name"></td>
            <td data-bind="text: serialNumber"></td>
            <td data-bind="text: manufacturer"></td>
        </tr>
    </tbody>
</table>
<br/>
<br/>
<div data-bind="with: selectedAsset">
    <p>Selected Asset</p>
    <label>Asset Name</label>
    <input type="text" data-bind="value: name"/>
</div>

JavaScript

var asset = function (name, serialNumber, manufacturer) {
    var self = this;
    self.name = ko.observable(name);
    self.serialNumber = ko.observable(serialNumber);
    self.manufacturer = ko.observable(manufacturer);

    self.name.original = name;
    self.serialNumber.original = serialNumber;
    self.manufacturer.original = manufacturer;

    self.hasChanged = ko.computed(function(){
        if (self.name() == self.name.original && self.serialNumber() == self.serialNumber.original && self.manufacturer() == self.manufacturer.original) {
            return false;
        }
        return true;
    });

    self.flashCss = ko.computed(function () {
        //just an example
        if (self.hasChanged()){
            return 'flash';
        }
        return '';
    });
};

var viewmodel = function () {
    var self = this;

    self.filter = ko.observable('');

    self.assets = ko.observableArray([
    new asset("asset 1", "12345", "Dell"),
    new asset("asset 2", "67890", "Dell"),
    new asset("asset 3", "12098", "HP"),
    new asset("asset 4", "55443", "Dell")]);

    // Method to filter the assets table based on user input.  Computed observable is throttled to ensure it doesn't kick in too quickly.
    self.filteredAssets = ko.computed(function () {
        var filter = self.filter().toLowerCase();
        if (!filter) {
            return self.assets();
        } else {
            return ko.utils.arrayFilter(self.assets(), function (item) {
                return item.name().toLowerCase().indexOf(filter) > -1;
            });
        }
    }).extend({
        throttle: 500
    });
    self.selectedAsset = ko.observable();
    self.selectAsset = function(item){
        self.selectedAsset(item);
    };

};

ko.applyBindings(new viewmodel());

CSS

.flash {
    background-color: yellow
}

【讨论】：