backgrid.js - 如何防止多行选择？答案

【问题标题】：backgrid.js - how to prevent multi-row selection?backgrid.js - 如何防止多行选择？
【发布时间】：2016-10-12 22:37:34
【问题描述】：

我是 backgrid 的新手，并在表单中使用它以允许用户选择一行（通过复选框），然后单击“提交”。我无法弄清楚如何将我的网格配置为像“单选按钮”一样只能选择一行。这是 backgrid 本身支持的东西，还是我需要编写一个处理程序来“取消选择”以前选择的行？

【问题讨论】：

我可以看到如何设置一个事件处理程序来捕获被选中的行 wellCollection.on('backgrid:selected', function(model, selected) { alert('A Backgrid row was selected! ' + model.attributes.api + ' : ' + selected); }); 效果很好。但是，我想遍历所有行，如果“选择”了任何其他行，则会阻止额外的选择。我的 JavaScript 还不够成熟，无法阅读 Backgrid 源代码并弄清楚这一点。

标签： backbone.js-collections backgrid

【解决方案1】：

这是一个快速n-dirty方法：

        wellCollection.on('backgrid:selected', function(model, selected) {
            if (wellGrid.getSelectedModels().length > 1) {
                model.trigger("backgrid:select", model, false);
                alert('Only one selection is allowed.');
            }
        });

缺点是这种方法需要使用“SelectAll”，这对用户来说确实违反直觉。我希望能够不使用“SelectAll”，但需要填充 getSelectedModels 对象。

【讨论】：

【解决方案2】：

您可以创建一个呈现单选按钮的自定义单元格。下面的实现可能需要更多的工作，但这样的事情会让你开始：

var RadioCell = Backgrid.Cell.extend({
    events: {
        "click .selectedRadio": "makeSelected"
    },
    render: function () {
        this.template = Mustache.to_html($("#radioCell").html(), this.model.toJSON());
        this.$el.html(this.template);
        this.delegateEvents();
        return this;
    },
    makeSelected: function () {
        // set all to inactive
        this.model.collection.invoke('set', { "SomeModelAttrib": false });
        // check if radio is checked and set the value on the model
        var radioValue = $("input[name='someSelection']").is(":checked");
        this.model.set("SomeModelAttrib", radioValue);
    }
});

还有胡子模板：

<script type="text/template" id="radioCell">
<input type='radio' class='selectedRadio' name='someSelection' value="{{SomeModelAttrib}}" {{#SomeModelAttrib}}checked{{/SomeModelAttrib}}>
</script>

【讨论】：