So erhalten Sie die Zeilenwerte der Bootstrap-Tabelle, wenn Sie auf „Bootstrap Modal“ klicken
-
22-12-2019 - |
Frage
Ich benutze Ember JS mit Bootstrap Ich habe eine Tabelle mit Bootstrap
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Request Id</th>
<th>Applied By</th>
<th>Leave Type</th>
<th>Leave From</th>
<th>Leave To</th>
<th>Days</th>
<th>Status</th>
<th>Applied date</th>
<th>Applied/Declined date</th>
</tr>
</thead>
<tbody data-link="row" class="rowlink">
{{#each model.pending}}
<tr id="ptable" data-toggle="modal" data-target="#pendingrequestsmodal" style="cursor: pointer">
<td id="eid">{{id}}</td>
<td>{{employee_id}}</td>
<td>{{type_id}}</td>
<td>{{from_date}}</td>
<td>{{to_date}}</td>
<td>{{days}}</td>
<td>{{status}}</td>
<td>{{to_date}}</td>
<td>{{to_date}}</td>
</tr>
{{/each}}
</tbody>
</table>
Wenn jetzt jemand auf die Tabellenzeile klickt, wird zur Bestätigung das Bootstrap-Modal angezeigt
<div id="pendingrequestsmodal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-default" data-dismiss="modal">Decline</button>
<button type="button" class="btn btn-primary" {{action "pendingAction" target="controller" }}>Approve</button>
</div>
</div>
</div>
und ich möchte diese angeklickten Zeilendetails im Ember haben, damit ich sie auf dem Server verarbeiten kann
App.ApprovalrequestsController = Ember.ObjectController.extend({
actions: {
pendingAction: function () {
//here i want to get the details of clicked row
//this.transitionToRoute("approvalrequests", rdata);
}
}
});
Kann mir jemand sagen, wie ich die angeklickten Zeilendetails in Ember bekomme?
Lösung
Es gibt zwei Probleme, die gelöst werden müssen: die Übergabe des ausgewählten Objekts/Modells an ein Ereignis (z. B. beim Klicken auf die Schaltfläche „Genehmigen“) und die Möglichkeit, eine komplizierte Vorlage als Inhalt des Modals zu verwenden (z. B. beim Klicken auf eine Zeile, die das Modal enthalten könnte). ein Formular oder Daten aus einer Master-Detail(s)-Beziehung).
Ein Ansatz wäre, den Inhalt des Modals jedes Mal zu aktualisieren, wenn eine Auswahl in einer Zeile erfolgt.Die Auswahl kann beim Klicken auf die Zeile bearbeitet werden und die Aktualisierung des (möglicherweise umfangreichen/komplizierten) Inhalts des Modals könnte erreicht werden, indem ihm eine Vorlage zugewiesen und seine Darstellung an eine Eigenschaft gebunden wird.
Im folgenden Beispiel wurde der Einfachheit halber a verwendet partial
Vorlage, um den Inhalt des Modals und einfache Objekte mit einer Eigenschaft zu speichern (name
) als Vorbild.
http://emberjs.jsbin.com/gecehotu/1/edit
hbs
<script type="text/x-handlebars" data-template-name="index">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>color</th>
</tr>
</thead>
<tbody data-link="row" class="rowlink">
{{#each model}}
<tr id="ptable" data-toggle="modal" data-target="#pendingrequestsmodal" style="cursor: pointer" {{action "selectColor" this target="view"}}>
<td>{{name}}</td>
</tr>
{{/each}}
</tbody>
</table>
{{#if selectedColor}}
{{partial "popup"}}
{{/if}}
</script>
<script type="text/x-handlebars" data-template-name="_popup">
<div id="pendingrequestsmodal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
<br/>
{{selectedColor.name}}
</div>
<div class="modal-body">
<button type="button" class="btn btn-default" data-dismiss="modal">Decline</button>
<button type="button" class="btn btn-primary" {{action "pendingAction" selectedColor target="controller" }}>Approve</button>
</div>
</div>
</div>
</script>
js
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return [{name:'red'}, {name:'yellow'}, {name:'blue'}];
}
});
App.IndexController = Ember.ArrayController.extend({
selectedColor:null,
actions:{
pendingAction:function(color){alert("the color is:"+color.name);}
}
});
App.IndexView = Ember.View.extend({
actions:{
selectColor:function(color){
this.controller.set("selectedColor",color);
}
}
});
Andere Tipps
You could specify the action on the
tr
like this:
<tr id="ptable" data-toggle="modal" {{action 'pendingAction' this}} //blah>
Now, when a row is clicked, the controller's method in the actions hash 'pendingAction' is triggered with a parameter which is the row that was clicked on, or more precisely, the object which has materialized into the row.
To get this to work properly, you're going to have to change how you trigger the modal. Instead of using the Bootstrap plugin, it's much better to use Ember to handle it.
In your application
template, add a second named outlet
for your modal:
<script type="text/x-handlebars">
{{outlet}}
{{outlet modal}}
</script>
Then in your template, add a new action
that will trigger the opening of the modal and pass the model along with it, like this:
<script type="text/x-handlebars data-template-name="pending">
<tbody data-link="row" class="rowlink">
{{#each request in model.pending}}
<tr id="ptable" style="cursor: pointer" {{action 'openModal' request}}>
<td id="eid">{{item.id}}</td>
<td>{{request.employee_id}}</td>
<td>{{request.type_id}}</td>
<td>{{request.from_date}}</td>
<td>{{request.to_date}}</td>
<td>{{request.days}}</td>
<td>{{request.status}}</td>
<td>{{request.to_date}}</td>
<td>{{request.to_date}}</td>
</tr>
{{/each}}
</tbody>
</script>
After that, you'll need to setup a modal template like this:
<script type="text/x-handlebars" data-template-name="pendingrequestmodal">
<div id="pendingrequestsmodal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" {{action 'closeModal'}} aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
{{model.id}}
<button type="button" class="btn btn-default" {{action 'closeModal'}}>Decline</button>
<button type="button" class="btn btn-primary" {{action "pendingAction" model}}>Approve</button>
</div>
</div>
</div>
</div>
<div class="modal-backdrop" {{action 'closeModal'}}></div>
</script>
In the openModal
action, we passed in the model as well. This will make it accessible when we react the to the event. You need to listen for the event and render the modal in your route, like this:
App.ApplicationRoute = Ember.Route.extend({
actions: {
openModal: function(request) {
this.controllerFor('approvalrequests').set('model',request);
return this.render('pendindrequestmodal', {
into: 'application',
outlet: 'modal',
controller:'approvalrequests'
});
},
closeModal: function() {
return this.disconnectOutlet({
outlet: 'modal',
parentView: 'application'
});
}
}
});
In the action, we're setting the modal property for our controller to the model we passed in and we're setting that controller as the controller for the modal. This will mean we can access the model properties in the template as normal. I also added the closeModal
event that works by disconnecting the outlet.
Finally, we can handle the pendingAction event in your controller. In the modal, we passed the model along with the action, so it's accessible here as well.
App.ApprovalrequestsController = Ember.ObjectController.extend({
actions: {
pendingAction: function (model) {
this.transitionToRoute("approvalrequests", model);
}
}
});
I kinda guessed on some of your template, route and controller names so they may need to be changed to fit your situation. If something here doesn't work, let me know and I can modify the answer.
You can find instructions and a working example of how to set up a modal dialogue here in the Ember Cookbook.