Question

我有一个由两个列表组成的视图：产品和优惠。您可以通过选中它们的复选框来选择多行，然后通过单击链接，将为每个选定的产品创建商品线。每个优惠行都有产品ID，我将用它列出产品列表下方列表中为该产品创建的所有优惠。

我试图通过使用javascript来解决这个问题，当您点击产品列表中的链接或字段时，该javascript应该被激活。该脚本向控制器发送一条消息，该消息为该产品创建商品列表，然后在此视图中呈现模板。

我可以使用链接并调用控制器，模板将被渲染，但当然不是视图的其余部分。

所以我需要排队：

<td><g:link action="listOffers" id="${pb.id}">${pb.volumeOffered}</g:link></td>

替换为可以调用我的javascript函数的更好的东西。我在某处读到你可以在g：link标签中放一个-onclick =“javascript-function”，但它不起作用。

在这种情况下，下面是控制器和gsp最重要的部分。

在List.gsp中：

    <script type="text/javascript">
        function listOffers(id){
        $.ajax({
                url:'${g.createLink( controller:'ordersAndStore', action:'listOffers' )}',
        data: [id],
        type: 'get'
        }).success( function ( data ) { $( '#offerList' ).html( data ); });
        }
    </script>    
.....
.....
    <g:render template="ListOffers" model="[offerDetails:offerDetails]"/>

在模板_AvailableProductData.gsp中：

    <g:each in="${prodBuffer}" status="i" var="pb"> 
  <tr class="${ (i % 2) == 0 ? 'even': 'odd'}">
                <td><a onclick="listOffers(${pb.id})">${pb.volumeOffered}</a></td>

在模板_ListOffers.gsp：

中

<div id="offerList">
    <g:set var="entityName" value='Offers' />
    <div id="list-offers" class="content scaffold-list" role="main">
        <h1><g:message code="default.list.label" args="[entityName]" /></h1>
        <table style="width:100%">
            <thead>
                <tr>
                    <g:sortableColumn property="product" title='Product' />
                    <g:sortableColumn property="volumeOffered" title='Volume' />
                </tr>
            </thead>
            <tbody>
                <g:each in="${offerDetails}" status="i" var="od">
                    <tr class="${ (i % 2) == 0 ? 'even': 'odd'}">
                        <td><g:link class="edit" action="edit" resource="offerDetail" id="${od?.id}"> ${od.product?.encodeAsHTML()}</g:link></td>
                        <td>${od?.volumeOffered}</td>
                    </tr>
                </g:each>
            </tbody>
        </table>
        <div class="pagination">
            <g:paginate total="${offersCount ?: 0}" />
        </div>
    </div>
</div>

在控制器中：

def listOffers(){
    def List<OfferDetail> offerDetails = getOfferList()
    render(template:"ListOffers", model:[offerDetails: offerDetails])
}

添加了打印输出以查看params包含的内容：

def listOffers(){
    System.out.println("#--#"+params)
    def List<OfferDetail> offerDetails = getOfferList()
    render(template:"ListOffers", model:[offerDetails: offerDetails])
}

打印输出为：

#--#[undefined:, controller:ordersAndStore, format:null, action:listOffers]

以下是完整的javascript部分，第一个工作正常，但随后是onclick版本响应并调用控制器但无法发送id。然后你的版本和另一个简单，但没有人工作。

    <script type="text/javascript">
        function availableProducts(){
            $.ajax({
                url:'${g.createLink( controller:'ordersAndStore', action:'availableProducts' )}',
                    data: [sawMill],
                    type: 'get'
            }).success( function ( data ) { $( '#divToUpdate' ).html( data ); });
        }

        function listOffers(){
            $.ajax({
                url:'${g.createLink( controller:'ordersAndStore', action:'listOffers' )}',
                data: [],
                type: 'get'
            }).success( function ( data ) { $( '#offerList' ).html( data ); });
        }

        $( document ).ready( function() {
            $( '.offers' ).click( function ( event ){
                alert('HEJ')
                $.ajax({
                    url:'${g.createLink( controller:'ordersAndStore', action:'listOffers' )}',
                    data: [this.id],
                    type: 'get'
                }).success( function ( data ) { $( '#offerList' ).html( data ); });
            });
        });
        $( document ).ready( function() {
            $('.test1').bind('click', function (){
            alert('KLICKED');
            });
        });

    </script>

模板中的gsp-part：

        <g:each in="${prodBuffer}" status="i" var="pb"> 
            <tr id="{$pb.id}" class="offers" class=" ${ (i % 2) == 0 ? 'even': 'odd'}">
                <td><g:checkBox name="toOffer" value="${pb.id}" checked="false"  /></td>
                <td><g:link action="edit_prodbuffer" id="${pb.id}">${pb.id}</g:link></td>
                <td>${pb.sawMill}</td>
                <td>${pb.product}</td>
                <td>${pb.length}</td>
                <td>${pb.volumeAvailable}</td>
                <td><a  onclick='listOffers()' > ${pb.volumeOffered}</a></td>

=============================================== ===

我已经采用了一个旧的测试项目，我将其清理并修改为这个仍然不起作用的简单示例：

<!DOCTYPE html>
<html>
    <head>
        <meta name="layout" content="main" />
        <g:set var="entityName" value="${message(code: 'author.label', default: 'Author')}" />
        <title><g:message code="default.list.label" args="[entityName]" /></title>
        <script type="text/javascript">
            $( document ).ready( function() {
                $( '.off1' ).click( function ( event ){
                    alert('HEJ');
                });
            });
        </script>    
    </head>
    <body>
        <a href="#list-author" class="skip" tabindex="-1"><g:message code="default.link.skip.label" default="Skip to content&hellip;"/></a>
        <div class="nav" role="navigation">
            <ul>
                <li><a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label"/></a></li>
                <li><g:link class="create" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link></li>
            </ul>
        </div>
        <div id="list-author" class="content scaffold-list" role="main">
            <h1><g:message code="default.list.label" args="[entityName]" /></h1>
            <g:if test="${flash.message}">
                <div class="message" role="status">${flash.message}</div>
            </g:if>
            <table>
                <th></th>
                <tbody
                    <g:each in="${authorList}" status='i' var='a'>
                        <tr id="${a.id}" class="off1">
                            <td><g:field  type="text" name="author" value="${a?.name}"/> </td>
                        </tr>
                    </g:each>
            <div class="pagination">
                <g:paginate total="${authorCount ?: 0}" />
            </div>
        </div>
    </body>
</html>

我开始绝望，不能让这项工作，但我必须:( 我将使用一些不同的设置和输出再次列出代码。当然，我的代码肯定有问题，因为其他人可以使它工作但是出了什么问题？

事情开始的GSP文件的一部分，有两个备选行，其中一个在这里评论。

                <g:each in="${authorList}" status='i' var='a'>
                    <tr id="${a.id}" onclick="listOffers(6)">
<!--   This line uses script B ------ <tr id="${a.id}" class="off1">-->
                        <td><g:field  type="text" name="author" value="${a?.name}"/> </td>
                    </tr>
                </g:each>

- 控制器：

def listOffers() {
    System.out.println("### --- HEJ --- ### "+params)
}

- 脚本A：

    function listOffers(id){
            alert('HEJ<<<<<<<<<<<<<<'+ id);
            $.ajax({
                url:'${g.createLink( controller:'author', action:'listOffers', id:"${id}" )}',
                data: [id],
                type: 'get'
            }).success( function ( data ) { $( '#offerList' ).html( data ); });
        }

- 剧本B：

        $( document ).ready( function() {
            $(".off1").click( function(event){
                alert('HEJ');
            });
        });

脚本B：永不回应 - 为什么？

使用脚本A从控制器输出：

### --- HEJ --- ### [undefined:, controller:author, format:null, action:listOffers, id:null]

修改后的脚本A - 数据为空：

        function listOffers(id){
            alert('HEJ<<<<<<<<<<<<<<'+ id);
            $.ajax({
                url:'${g.createLink( controller:'author', action:'listOffers', id:"${id}" )}',
                data: [],
                type: 'get'
            }).success( function ( data ) { $( '#offerList' ).html( data ); });
        }

使用脚本A的修改版本从控制器输出：

### --- HEJ --- ### [controller:author, format:null, action:listOffers, id:null]

警报调用正常，我在那里得到正确的id值。正如你可以从控制器看到的打印输出id是null，如果数据包含id我也得到'undefined：'作为参数。如果我从数据中删除id，现在是data []，这个'undefined：'就会消失

Answer 1

您需要像这样更改元素

0    found
Name: col, dtype: object

和接受id的Jquery函数。

<td><a onclick="listOffers(${pb.id})>${pb.volumeOffered}</a></td>

Answer 2

您可以为每个表行提供ID，然后在单击该行时响应事件：

将这个简单化为一个简单的例子，用JUST显示它的工作原理。

OrdersAndStoreController

class OrdersAndStoreController {

    def index() {
        [prodBuffer: [new ProdBuffer(id: 1, volumeOffered: 100), new ProdBuffer(id: 2, volumeOffered: 200)]]
    }

    def listOffers() {
        render(template:"ListOffers", model:[offerDetails: [offer1: 'offer1', offer2: 'offer2']])
    }
}

class ProdBuffer{
    Integer id
    Integer volumeOffered
}

index.gsp中

<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main" />

<script type="text/javascript">
    $( document ).ready( function() {
        $( '.offers' ).click( function ( event ){
            $.ajax({
                url:'${g.createLink( controller:'ordersAndStore', action:'listOffers' )}',
                data: [this.id],
                type: 'get'
            }).success( function ( data ) { $( '#offerList' ).html( data );     });
        });
    });
</script>
</head>
<body>


<table>
    <thead>
    <th>Volume offered</th>
    </thead>
    <g:each in="${prodBuffer}" status="i" var="pb">
        <tr id="${pb.id}" class="offers">
            <td>${pb.volumeOffered}</td>
        </tr>
    </g:each>
</table>

<div id="offerList"></div>

</body>
</html>

_ListOffers.gsp

${offerDetails}

Answer 3

问题在于2分。第一：在main.gsp中我移动了字符串：

<asset:javascript src="application.js"/>

从文件末尾到接近css-loading的头部。这使脚本响应。

但是我无法从＆＃34; id＆＃34;中获取数据。进入params。但通过重写行：

data:[this.id] to data:{id: this.id}

它有效。

Grails，通过单击表行中的列来执行javascript

3 个答案: