当用户在 SlickGrid 中选择了五个或更多项目时启用按钮

Question

我有一个 SlickGrid，用户可以使用 CheckboxSelectColumn 插件在其中 select 行。

我有一个 html 按钮，我想 data-bind 提交按钮仅在用户 select 编辑了五行后才可见，或者如果他们取消选中足够多则禁用该按钮检查少于五行的行。

<button data-bind="click: submit, enable: hasSelectedFivePolicies">Submit</button>

在我的淘汰脚本中，我创建了一个可观察对象，它在页面首次加载时将按钮设置为禁用。但是，一旦用户 select 编辑了五个或更多项目，该按钮就不会启用。

一旦用户在 SlickGrid 中选中了五个或更多项目，我如何启用该按钮？

function ViewModel() {
            var self = this;

            var hasFive = gridUnredeemed.getSelectedRows().length >= 5;
            self.hasSelectedFivePolicies = ko.observable(hasFive);

            self.getCheckedItems = function () {
                // get the selected stuff
                console.log("Getting checked items...");
                var selectedData = [], selectedIndexes;

                selectedIndexes = gridUnredeemed.getSelectedRows();
                $.each(selectedIndexes, function (index, value) {
                    var stuff = gridUnredeemed.getData()[value];
                    selectedData.push(stuff);
                    console.log(stuff);
                });
                return selectedData;
            }

            self.getSelectedPolicyNumbers = function () {
                var items = self.getCheckedItems();
                var policyNumbers = [];
                $.each(items, function () {
                    $.each(this, function (name, value) {
                        if (name === "PolicyNumber") policyNumbers.push(value);
                    });
                })
                return policyNumbers;
            }

            self.getSelectedPolicies = function () {
                var items = self.getCheckedItems();
                var policies = [];
                $.each(items, function () {
                    policies.push(new policyToRedeem(this.PolicyNumber, this.IssueDate, this.InsuredName, this.PolicyStatus, this.PolicyType));
                });

                return policies;
            }

Answer 1

下一行：

var hasFive = gridUnredeemed.getSelectedRows().length >= 5;

不足以让 Knockout 在 getSelectedRows() 和 hasSelectedFivePolicies 可观察对象之间创建依赖关系。

不仅如此，即使创建了依赖项，仍然不够，因为当 getSelectedRows 更改时，Knockout 不会收到通知。

您需要手动订阅 onSelectedRowsChanged 事件，并相应地更改 hasSelectedFivePolicies 可观察值。

例如（假设 gridUnredeemed 是对您的网格实例的引用）：

gridUnredeemed.onSelectedRowsChanged.subscribe(function(e) {
    var hasFiveRecalc = gridUnredeemed.getSelectedRows().length >= 5;
    self.hasSelectedFivePolicies(hasFiveRecalc);
});

当用户在 SlickGrid 中选择了五个或更多项目时启用按钮

Enable button when user has selected five or more items in SlickGrid

knockout.js

slickgrid