I get a list of objects from the controller into my view using grails. In the view i have a jQuery ui with drag and drop.
Now i want to map the objects of list type A to list type B or C, by using drag and drop. By clicking on save button, i want to get them in the controller, to throw them into the database.
Here i have the gsp code for you:
<%@ page import="awp.Auftragsverwaltung.Auftrag" %>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<meta name="layout" content="main">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'dispo.css')}"
type="text/css">
<script>
$(function() {
$( "#accordion" ).accordion({
header: 'h3',
heightStyle: "fill"
});
});
$(function() {
$(".column").sortable({
connectWith : ".column"
});
$(".portlet").addClass(
"ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header").addClass(
"ui-widget-header ui-corner-all").prepend(
"<span class='ui-icon ui-icon-plusthick'></span>")
.end().find(".portlet-content");
$(".portlet-header .ui-icon").click(
function() {
$(this).toggleClass("ui-icon-plusthick").toggleClass(
"ui-icon-minusthick");
$(this).parents(".portlet:first").find(".portlet-content")
.toggle();
});
$(".column").disableSelection();
});
</script>
</head>
<body>
<!-- Achtung erst speichern bevor man auf andere Seite kann! -->
<div class="nav" role="navigation">
<ul>
<li><a class="home" href="${createLink(uri: '/')}"><g:message
code="default.home.label" /></a></li>
<li><g:link action="save">speichern</g:link>
</ul>
</div>
<h1 style="margin-left: 20px;">Disposition</h1>
<div>
<!-- DISPO ANFANG -->
<div id="linkeSpalte">
<!-- LINKE DISPO SEITE ANFANG -->
<!-- Aufklappbares Accordion Menü -->
<div id="accordion">
<h3>Absetzer</h3>
<!-- Wrapper Klasse um die Kategorie im Accordio Menü -->
<div class="content_wrap">
<!-- Klasse mit der Eigentschaft Portlets zu droppen -->
<div class="column">
<!-- Schleife über die Liste der Abroll-Aufträge -->
<g:each in="${listeNurAbrollContainer}" status="i" var="auftrag">
<!-- Hier wird der einzelne Auftrag in der Tabelle eingefügt -->
<div class="portlet">
<!--
<li class="ui-state-default"><g:link action="show" id="${listeNurAbrollContainer.id}">${fieldValue(bean: endUserInstance, field: "fullName")}</g:link></li>
-->
<div class="portlet-header"><g:link action="show" id="${listeNurAbrollContainer.id}">${fieldValue(bean: auftrag, field:"kunde.kundeName")}</g:link></div>
<div class="portlet-content">
<p>Status: ${fieldValue(bean: auftrag, field:"auftragStatus")}</p>
<p>Art: ${fieldValue(bean: auftrag, field:"auftragArt")}</p>
<p>Bemerkung: ${auftrag.auftragBemerkungen}</p>
</div>
</div>
</g:each>
</div>
</div>
<h3>Abroller</h3>
<div class="content_wrap">
<div class="column">
</div>
</div>
<h3>Spezial</h3>
<div class="content_wrap">
<div class="column">
</div>
</div>
</div>
</div>
<!-- LINKE DISPO SEITE ENDE -->
<div id="seperator">.</div>
<!-- RECHTE SEITE ANFANG -->
<div id="rechteSpalte">
<div id="spalte1"></div>
<h3>KA-DC-100</h3>
<div class="column">
</div>
<h3>KA-DC-200</h3>
<div class="column">
</div>
<h3>KA-DC-300</h3>
<div class="column">
</div>
</div>
<div id="spalte2">
<h3>KA-DC-400</h3>
<div class="column">
</div>
</div>
<!-- RECHTE SEITE ENDE -->
</div>
<br style="clear: both;" />
<!-- DISPO BEREICH ENDE -->
</body>
</html>
And here the controller:
class DispoController {
def index= {
[listeNurAbrollContainer: dispoService.listeAbrollContainer(),
listeNurAbsaetzContainer: dispoService.listeAbsaetzContainer(),
listeNurSpezialContainer: dispoService.listeSpezialContainer()]
}
def save = {
}
edit:
In:
<g:each in="${listeNurAbrollContainer}" status="i" var="auftrag">
<!-- Hier wird der einzelne Auftrag in der Tabelle eingefügt -->
<div class="portlet">
<!--
<li class="ui-state-default"><g:link action="show" id="${listeNurAbrollContainer.id}">${fieldValue(bean: endUserInstance, field: "fullName")}</g:link></li>
-->
<div class="portlet-header">
<g:link action="show" id="${listeNurAbrollContainer.id}">
${fieldValue(bean: auftrag, field:"kunde.kundeName")}
</g:link>
</div>
<div class="portlet-content">
<p>
Status:
${fieldValue(bean: auftrag, field:"auftragStatus")}
</p>
<p>
Art:
${fieldValue(bean: auftrag, field:"auftragArt")}
</p>
<p>
Bemerkung:
${auftrag.auftragBemerkungen}
</p>
</div>
</div>
</g:each>
I get objects into the view out of the database. I like to move the objects to different trucks like:
<div id="spalte2">
<h3>KA-DC-400</h3>
<div class="column">
</div>
</div>
That is working so fare. After the “save” button is used I need to get the information in the controller how the objects have moved, to throw that information into the service and later down into the database. Here i`m not sure how to get this information into the controller so that I can get use of them.
Looking at you code I didn't saw any
form. If you want to retrieve the information in the controller you need a form and fields to send the data.If your visual representation is different from html fields, you can use hidden inputs to send the required data, probably adding a click handler in
JavaScriptto populate those hidden fields.