Question

我试图找出当给定输入在该行中获得焦点时如何突出显示我的表行。我有一个hasFocus observable，它具有已经完成某些功能的订阅功能。但我认为我需要行索引，不知道如何将该索引导入函数。我确实找到了另一个SO Q＆amp; A，它帮了我一些，但不是一路走来。 Highlight table row using knockout.js

这是我的输入行表（所有可观察的）：

<tbody data-bind="foreach: items">
                <tr data-bind="css: { diffColor: $root.HighlightedRowIndex() == $index }">
                    <td><input type="text" data-bind="value: itemNo, insertPress: $index, deletePress: $index, hasFocus: invalidItemNum, selected: invalidItemNum, event: { blur: function(){ $parent.checkItemNo($data, $index); } }, attr: { name: 'sellerItems[' + $index() + '].itemNo', id: 'sellerItems_' + $index() + '__itemNo', tabindex: 4 + $index()}" class="form-control" /></td>
                    <td>
                        <input type="text" data-bind="value: qty, insertPress: $index, tabEnterPress: '#tallyEntry', hasFocus: qtyFocus, deletePress: $index, event: { blur: function(){ $parent.calcTotal($data); } }, attr: { name: 'sellerItems[' + $index() + '].qty', id: 'sellerItems_' + $index() + '__qty', tabindex: 5 + $index() }" class="form-control" />
                        <input type="hidden" data-bind="value: locCode, attr: { name: 'sellerItems[' + $index() + '].locationCode', id: 'sellerItems_' + $index() + '__locationCode' }" />
                    </td>
                    <td><input type="text" data-bind="value: price, attr: { name: 'sellerItems[' + $index() + '].retail', id: 'sellerItems_' + $index() + '__retail' }" class="form-control" readonly="readonly" tabindex="-1" /></td>
                    <td>
                        <input type="text" data-bind="value: bro, attr: { name: 'sellerItems[' + $index() + '].brocCode', id: 'sellerItems_' + $index() + '__brocCode' }" class="form-control" readonly="readonly" tabindex="-1" />
                        <input type="hidden" data-bind="value: broID, attr: { name: 'sellerItems[' + $index() + '].brochureId', id: 'sellerItems_' + $index() + '__brochureId' }" />
                    </td>
                    <td><input type="text" data-bind="value: desc, attr: { name: 'sellerItems[' + $index() + '].itemDesc', id: 'sellerItems_' + $index() + '__itemDesc' }" class="form-control" readonly="readonly" tabindex="-1" /></td>
                    <td><input type="text" data-bind="value: total, attr: { name: 'sellerItems[' + $index() + '].total', id: 'sellerItems_' + $index() + '__total' }" class="form-control" readonly="readonly" tabindex="-1" /></td>
                    <td><input type="text" data-bind="value: seq, attr: { name: 'sellerItems[' + $index() + '].itemRow', id: 'sellerItems_' + $index() + '__itemRow' }" class="form-control" readonly="readonly" tabindex="-1" /></td>
                </tr>
            </tbody>

这是我的KO订阅，我想突出显示该行：

self.invalidItemNum.subscribe(function() {
  easyGlanceModel.bigItemNo(self.itemNo());
  easyGlanceModel.bigQty(self.qty());
  self.highlightedRowIndex(???)
});

Answer 1

如果不了解更大的情况，很难提供建议。我的建议是在创建索引时将索引传递给Record ID,Date,Part of Day,Status,Severity 4231843,3/10/2017,PM,Open,High 3423543,3/13/2017,AM,Closed,Medium 4231843,3/13/2017,PM,Open,High 4231843,3/13/2017,AM,Open,High 6231847,3/14/2017,AM,Closed,Low。将其添加为可观察对象，然后您可以引用item，该self.index应与父items

中的索引相匹配

我假设您使用JSON数据或类似数据填充items，所以它应该像添加

一样简单

for (var i=0;i<data.length;i++){
    self.items.push(new itemViewModel({
        itemNo: data[i].itemNo,
        qty: data[i].qty,
        index: i
    }));
}

再次，我假设您构建了构造函数以获取初始值的对象。无论如何，你明白了吗？

knockoutjs - 使用hasFocus订阅突出显示表行

1 个答案: