Question

我有一个我正在展示的项目列表，我想让整行可以点击，但是现在我只能点击第一列。点击行后，我希望看到它进入购买票页，我可以在其中添加更多详细信息，如票价，座位号和所有类型的细节。现在，当点击链接时，它只是抛出一个错误：

--------------------------------
HTTP Status 404 - /tictoc/store/detail/7
type Status report
message /tictoc/store/detail/7
description The requested resource (/tictoc/store/detail/7) is not available.
--------------------------------

这是控制器。我添加了详细信息def，我尝试转发到商店/购买页面。我假设这将从params obj获取id并获得单个项目并转发到购买页面。我也很好奇为什么log.error在代码运行时不会出现在输出中。希望有一种方法可以让日志记录在grails中不那么笨拙，因为打开信息就等于大量的日志记录使用错误似乎是最不烦人的选择。

package tictoc
import tictoc.Event 
class StoreController {
    Event event
    static defaultAction = "activeEvents"
    def show = {
        log.error 'exec activeEvents'
        activeEvents()
    }

    def activeEvents = {
        log.error 'exec activeEvents'

        def max    = Math.min(params.int('max', 5), 100);
        def offset = params.offset?.toInteger() ?: 0
        def total =  Event.count()
        def eventList = Event.list(max: params.max, offset: params.offset)

        return [events:eventList, 
                       totalEvents:total,
                       active:params.active]                  
    }

    def detail = {
        log.error 'exec detail'
        def eventId = params.id
        log.error 'eventId:' + eventId
        render(view: "buy", model: [event: eventId])
    }

    def list = {
        params.max = Math.min(params.int('max', 25), 100);
        params.offset = params.int('offset', 0)
        params.sort = params.sort ?: "name";
        params.order = params.order ?: "asc";
        return [ myList: DomainObject.list(params) ]
    }
}

这是show.gsp，我将链接指向我希望用户点击购买/预订门票的项目。我希望我可以使整行可以点击而不仅仅是第一列。不确定需要多少描述，但这个提交过程很乏味，所以我要添加更多细节才能提交。

<%@ page import="tictoc.Store" %>
<!doctype html>
<html>
    <head>
        <meta name="layout" content="main">
        <g:set var="entityName" value="${message(code: 'store.label', default: 'Store')}" />
        <title><g:message code="default.show.label" args="[entityName]" /></title>
    </head>
    <body>

        <h1> Ticket Store </h1>
        <div>
            <table border=0 class="eventsTable">
                <tr>

                    <th>Event</th>
                    <th>Start </th>
                    <th>End </th>
                    <th>Description</th>
                </tr>
                <g:each var="event" in="${events}">

                <tr>
                    <td><g:link action="detail" controller="store" id="${event.id}">
                        ${event.name}
                        </g:link>
                    </td>
                    <td><g:formatDate format="MM/dd/yyyy" date="${event.startDate}"/></td>
                    <td><g:formatDate format="MM/dd/yyyy" date="${event.endDate}"/></td>
                    <td>${event.desc}</td>
                </tr>

                </g:each>
            </table>

        </div>
        <div class="paginateButtons">
            <g:paginate controller="store"
                action="show"
                max="5"
                params="[name:active]"
                total="${totalEvents}" />
        </div>
    </body>
</html>

以下是商店文件夹中的购买票据页面此时我没有多余的存根但是我想添加一个购买按钮，该按钮会尝试将此票证添加到某种购物车并允许所有购物完成后付款：

<%@ page import="tictoc.Store" %>
<!doctype html>
<html>
    <head>
        <meta name="layout" content="main">
        <g:set var="entityName" value="${message(code: 'store.label', default: 'Store')}" />
        <title><g:message code="default.show.label" args="[entityName]" /></title>
    </head>
    <body>
        <h1> Ticket Store </h1>
        <table border=0 class="eventsTable">
            <tr>
                <th>Event</th>
                <th>Start </th>
                <th>End </th>
                <th>Description</th>
            </tr>
            <tr>
                <td>${event.name}</td>
                <td><g:formatDate format="MM/dd/yyyy" date="${event.startDate}"/></td>
                <td><g:formatDate format="MM/dd/yyyy" date="${event.endDate}"/></td>
                <td>${event.desc}</td>
            </tr>
        </table>

        BUY TICKET
    </body>
</html>

Answer 1

要使行可单击，您可能需要使用一些JavaScript。这是一个未经测试的jquery示例：

<tr class="clickable" data-id="${event.id}">
  ...
</tr>

$(".clickable").on("click", function(e) {
   e.preventDefault();
   window.location = "/store/detail/" + $(this).data("id");
});

如何使行可单击以查看详细信息

1 个答案: