Question

我有一个Grails（2.4.3）应用程序，其中GSP页面中有一个表格，需要根据按钮点击填充该表格。单击该按钮时，它会将id传递给控制器，并根据该编号进行搜索。

GSP：

<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

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

1）允许GSP生成您的表格这将需要使用其他参数重新加载相同的页面。 sortedListUser在第一次加载（w / o param）时将为空，但在输入userID并单击按钮（包含param）时将包含行信息。你不需要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

Grails：使用Controller中的数据在GSP中更新表

1 个答案: