Question

你好我试图传递内联编辑的表值作为参数来播放路线可以有人帮我一样这是我的HTML代码

<table class="gradienttable">
        <thead>
                <tr>
            <th>Task</th>
             <th>TimeSheetdate</th>
            <th>Hours</th>
            <th>IsBilled</th>
             <th>Work Place</th>
        </tr>
        </thead>
            <tbody>
               @for(element <- CurrentPage) {
                        <tr>
                             <td contenteditable="true" id="task1">@element.getTask()</td>
                 <td>@element.getTimeSheetDate()</td>
                 <td contenteditable="true" id="hours">@element.getHours()</td>
                 <td contenteditable="true" id="isbilled">@element.getIsBilled()</td>
                 <td contenteditable="true"id="workplace">@element.getWorkPlace()</td>
                <td><a href="@{routes.Application.edit(task1.innerHTML)}" ><img src="@routes.Assets.at("images/edit.jpg")" alt="EDIT" style="width:20px;height:20px"></a>
                            </tr>
                    } 
            </tbody>
        </table>

路由

GET     /Application/edit            controllers.Application.edit(task1:String)

application.java

public static Result edit(String task1)
    {
        return ok(DisplayTimeSheet.render(task1));
    }

Answer 1

看起来您将服务器端呈现的Scala模板与客户端的DOM操作混淆。对于@{routes.Application.edit(task1.innerHTML)}，就非DOM模板而言，task1不存在。

你对<a href="...">的使用有点奇怪，因为这会产生同步调用，如果你进行内联编辑，那么这可能不是你想要的。这个答案涵盖了使用Play的JavaScript路由器支持的异步方法（如果你之前没有看到它，那就非常酷）。

您需要在JavaScript路由器中公开edit：

// You can also return an F.Promise<Result>
public static Result jsRoutes() {
response().setContentType("text/javascript");
return ok(Routes.javascriptRouter("appRoutes", //appRoutes will be the JS object available in our view
                                  routes.javascript.Application.edit()));

}

然后在路由中公开该方法：

GET           /assets/js/routes             controllers.Application.jsRoutes()

这将生成一大堆可以导入的JavaScript

<script src="@controllers.routes.Application.jsRoutes()" type="text/javascript"></script>

最后，编写一些JavaScript来处理内联编辑完成。

function doInlineEdit(taskName) {
    appRoutes.controllers.Application.edit(taskName).ajax( {
      success : function ( data ) {
        target.closest('li').remove();
      }
    });
}

然后，当您的内联可编辑元素更改内容时，您只需要连接要调用的方法。

您可以找到其他信息here。

将innerHtml值作为play框架路由的参数传递

1 个答案: