jquery - Grails:使用Controller中的数据更新GSP中的表

Question

我有一个Grails(2.4.3)应用程序，其中的GSP页面中有一个表，并且需要通过单击按钮来填充该表。单击该按钮时，它将ID传递给 Controller ​​，并根据该数字进行搜索。

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);
                                  }
                              }
                      });
                  }      
            });

Controller :

@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
                                  }

这是我希望在其中添加一些代码来更新表行的地方。表的初始 View 是它仅具有标题而没有行。

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

在此先感谢您的帮助!

Answer 1

当前，您正在混合两种不同的方法来生成表行；您应该选择以下两种方式之一:

1)允许GSP生成您的表
这将需要在同一页面上重新加载其他参数。 sortedListUser在首次加载时为空(不带参数)，但是当输入userID并单击按钮(带参数)时将包含行信息。您不需要为此使用Javascript。

在您的GSP中，输入如下形式:

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

在您的 Controller 中，执行以下操作:

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
    }
}

在您的 Controller 中，创建一个新方法，您的ajax将调用该方法并返回:

render UserList.findAllByStatus(params.userID) as JSON