backgrid.js - Wie verhindert man die Auswahl mehrerer Zeilen?

Question

Ich bin neu zu backgrid und benutze es in einem Formular, um dem Benutzer zu ermöglichen, eine Zeile (über ein Kontrollkästchen) auszuwählen und dann auf "Senden" zu klicken. Ich kann nicht herausfinden, wie ich mein Grid so konfigurieren soll, dass es sich wie "Radio Buttons" verhält, da nur eine Zeile ausgewählt werden kann. Ist dies etwas, das Backgrid nativ unterstützt, oder muss ich einen Handler schreiben, um zuvor ausgewählte Zeilen "abzuwählen"?

Answer 1

Hier ist eine schnelle-n-dirty-Methode:

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

Der Nachteil ist dieser Ansatz die Verwendung von „SelectAll“ erfordert, die den Benutzer wirklich kontraintuitiv ist. Ich würde es vorziehen, nicht "SelectAll" verwenden zu können, aber es ist erforderlich, das getSelectedModels-Objekt zu füllen.

Answer 2

Sie könnten eine benutzerdefinierte Zelle erstellen, die Optionsfelder rendert. Die Umsetzung unten kann etwas mehr arbeiten müssen, aber so etwas wie dies wird Ihnen den Einstieg:

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); 
    } 
}); 

und der Schnurrbart Vorlage:

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