从拖放视图解析数据到控制器

时间:2013-12-05 15:13:44

标签: jquery grails drag-and-drop grails-controller

我使用grails从控制器获取对象列表到我的视图中。在视图中我有一个带拖放的jQuery ui。 现在我想通过使用拖放将列表类型A的对象映射到列表类型B或C.通过单击“保存”按钮,我想让它们进入控制器,将它们扔进数据库 在这里,我有你的gsp代码:

<%@ 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>

这里是控制器:

class DispoController {



    def index= {
        [listeNurAbrollContainer: dispoService.listeAbrollContainer(),
        listeNurAbsaetzContainer: dispoService.listeAbsaetzContainer(),
        listeNurSpezialContainer: dispoService.listeSpezialContainer()]
    }

    def save = {



    }

编辑:

在:

<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 id="spalte2">
            <h3>KA-DC-400</h3>
            <div class="column">


            </div>
        </div>

这是有效的。 在使用“保存”按钮后,我需要在控制器中获取对象移动的信息,将该信息抛出到服务中,然后再下载到数据库中。 在这里,我不知道如何将这些信息输入控制器,以便我可以使用它们。

1 个答案:

答案 0 :(得分:0)

看着你的代码,我没有看到任何form。如果要检索控制器中的信息,则需要一个表单和字段来发送数据。

如果您的视觉表示与html字段不同,您可以使用隐藏的输入来发送所需的数据,可能会在JavaScript中添加一个点击处理程序来填充这些隐藏的字段。