Grails：使用控制器中的数据在GSP中更新表格

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

当前，您正在混合使用2种不同的方法来生成表格行;你应该选择使用此2种方式：

1）允许GSP来生成表 这将需要在同一个页面与其他参数重新加载。 sortedListUser在第一次加载时（无参数）将为空，但当用户名输入并点击按钮（带参数）时将包含行信息。这不需要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