Question

假设我有一个使用knockout observable array绑定数据的HTML表。

现在我希望用户能够选择最多2行。当他选择2行时，我将启用一个按钮。单击该按钮将从2行中选择值并传递给我的WCF服务。

我的意思是我试图实现相同的功能，我们可以比较2个文件。例如在TFS中我们选择任何文件和查看文件的历史记录。然后我们可以在列表中选择2行并右键单击它并选择比较。

我只需要使用jquery开始的示例。

如果您需要更多说明，请告诉我。

Answer 1

可能是这样的：

$(function(){
    var count = 1;
    $("table").on("click", "tr", function(){
        var $this = $(this);
        if($this.hasClass("selected")){
            $this.removeClass("selected");
            count--;
        }else{
            if(count < 3){
                $this.addClass("selected");
                count++;
            }
        }
    });
});

Answer 2

这是一个淘汰赛解决方案。

视图简单，两列。第一个用于复选框，第二个用于值。

<table>
    <tbody data-bind="foreach: items">
        <tr>
            <td>
                <input type="checkbox" data-bind="checked: selected, enable: $parent.selectionAllowed() || selected()" />
            </td>
            <td><span data-bind="text: value" />
            </td>
        </tr>
    </tbody>
</table>

这是视图模型：

var Item = function (parent, value) {
    var self = this;
    var parent = parent;
    self.value = value;

    self.selected = ko.computed({
        read: function () {
            return parent.selectedItems.indexOf(self) >= 0;
        },
        write: function (sel) {
            if (sel) {
                parent.selectedItems.push(self);
            } else {
                parent.selectedItems.remove(self);
            }
        }

    });
};

var VM = function () {
    var self = this;
    self.selectedItems = ko.observableArray();

    self.selectionAllowed = ko.computed(function () {
        return self.selectedItems().length < 2;
    });


    self.items = ko.utils.arrayMap(['a', 'b', 'c', 'd', 'e'], function (item) {
        return new Item(self, item);
    });


};
var vm = new VM();

ko.applyBindings(vm);

选择项目后，此项目将被推送到视图模型的selectedItems数组中。
取消选中某个项目时，此项目将被删除。

See fiddle

我希望它有所帮助。

在html表中标记2行

2 个答案: