Grails：使用来自控制器的数据更新 GSP 中的表

Question

我有一个 Grails (2.4.3) 应用程序，其中 GSP 页面中有一个表，该表需要根据按钮单击来填充。单击按钮时，它将向控制器传递一个 id，并根据该数字进行搜索。

普惠制：

<table id="availUsers">
                <thead>
                    <tr>
                        <th class="sortable"><g:message code = '' default = 'Name'/></th>
                        <th class="sortable"><g:message code = '' default = 'Age'/></th>
                        <th class="sortable"><g:message code = '' default = 'Status'/></th>
                    </tr>
                </thead>
                <tbody>
                <g:each in="${sortedListUser}" status="i" var="user">
                    <tr class="${(i % 2) == 0 ? 'even' : 'odd'}">
                        <td>${fieldValue(bean: user, field: "Name")}</g:link></td>
                        <td>${fieldValue(bean: user, field: "Age")}</td>
                        <td>${fieldValue(bean: user, field: "Status")}</td>
                    </tr>
                </g:each>
                </tbody>
            </table>    

JavaScript：

$("#idText").click(function () {                  
                id = document.getElementById("userIdText").value;
                if (id) {
                      d = {
                              userID: id
                          };
                      $.ajax({
                              type: "POST",
                              url: "${createLink(action:'searchUsers', controller:'CustomerSupport')}",
                              data: d,
                              async: false,
                              dataType: 'text',
                              cache: false,
                              success: function(result) {
                                  if(result =='success') {
                                      // To DO
                                  } else {
                                     $(".error").html(result);
                                  }
                              }
                      });
                  }      
            });

控制器：

@Transactional
def searchUsers (CustomerSupport customerSupportInstance, long userID) {
    String id = params.userID;
    customerSupportInstance.sortedListUser = UserList.findAllByStatus(id);

    if (customerSupportInstance.sortedListUser.size <= 0) {
        render "failed"
    }
    else {
        render "success"
    }       
}

如您所见，我还没有到更新/绘制表格行的地步。

如果您查看 JavaScript 部分，则在

if(result =='success') {
                                      // To DO
                                  }

这是我希望添加一些代码来更新表格行的地方。表格的初始视图是它只有标题，没有行。

请告诉我如何更新/填充表格行。我上面发布的所有代码都在工作！

提前感谢您的帮助！

Answer 1

目前您正在混合使用 2 种不同的方法来生成表格行；您应该选择以下两种方式之一：

1) 允许 GSP 生成您的表格 这将需要使用其他参数重新加载同一页面。 sortedListUser 将在第一次加载时为空（无参数），但在输入用户 ID 并单击按钮（使用参数）时将包含行信息。你不需要 Javascript。

在您的 GSP 中，制作这样的表格：

<g:form controller="yourController">
    <g:textField name="userID" value="" />
    <g:actionSubmit value="Submit" action="searchUsers"/>
</g:form>

在您的控制器中，执行以下操作：

render(view: "yourViewName", model: [sortedListUser: UserList.findAllByStatus(params.userID)])

2) 使用 ajax 调用的结果呈现表格行 使用此方法，页面不会刷新。您将需要使用 Javascript 构建表格行。

在您的 Javascript 中，您可以执行以下操作：

success: function(result) { 
    var tbody = $('#availUsers tbody');
    $.each(result, function(index, val) {
        var nameTd = $('<td>'+val.name+'</td>');
        tbody.append(nameTd);
        // create and append other tds
    }
}

在您的控制器中，创建一个您的 ajax 将调用并返回的新方法：

render UserList.findAllByStatus(params.userID) as JSON