Question

我从ajax调用返回一组结果，如此

<g:submitToRemote update="updateMe" action="getParams" asynchronus="false" value="Search" name="SearchButton" type="hidden"/>

这是将该调用的结果放在updateMe DIV标记上。

现在，我实际上正在从我的控制器渲染一个表：

render(view: 'ajaxResults', model:[results:resultRows])

其中ajaxResults是一个模板，如下所示：

        <div class="list">
            <h1>Query Results</h1>
            <table style="width: 80%; align: center;" class="sortable resizable">
                <thead>
                    <tr>                      
                        <th id="emp_name" class="sortfirstasc">Employee Name</th>
                        <th id="title">Title</th>
                        <th id="labor_grade">Labor Grade</th>
                        <th id="name">Hit</th>
                        <th id="total_exp">Experience (Yrs)</th>                      
                    </tr>
                 </thead>
                 <tbody>
                    <g:each in="${results}" status="i" var="search">
                        <tr>                      
                            <td><g:link controller="employee" action="edit" id="${search.id}">${search.emp_name?.encodeAsHTML()}</g:link></td>                              
                            <td>${search.title?.encodeAsHTML()}</td>
                            <td>${search.labor_grade?.encodeAsHTML()}</td>
                            <td>${search.name?.encodeAsHTML()}</td>
                            <td>${search.total_exp?.encodeAsHTML()}</td>                                                                                 
                        </tr>
                    </g:each>
                </tbody>


            </table>
        </div>
        <div class="paginateButtons">
            <g:paginate total="${Search.count()}" />
        </div>
    </div>

问题是 - 这个表实际上不是可排序的。我正在尝试使用tablekit

<link rel="stylesheet" type="text/css" media="all" href="../css/tablekit.css" />        
<g:javascript library="tablekit"></g:javascript>

我认为问题是我正在插入这个并且它不会重新渲染给我排序表。我怎么能强迫这种情况发生呢？

Answer 1

我也在谷歌和其他地方搜索过这个，但一无所获...... 但是当我在其他地方进行广泛搜索后在tablekit网站的常见问题解答中找到答案时，这很有趣！只有两个FAQ，第二个是大多数人搜索的，就像我一样。 visit了解详情。它说：

TableKit.reloadTable(tablename);

强制TableKit重新初始化。

希望这有帮助。

Answer 2

据推测，tablekit对页面加载执行一个动作，该动作定位了装饰元素并应用了JavaScripts方法。

使用after参数或onComplete标记上的submitToRemote事件来调用JavaScript函数以重新应用排序行为。

有些事情：

<g:submitToRemote ... after="reapplySortable">

和js

<script>
  function reapplySortable() {
    TableKit.Sortable.init(table, {options});  
  }
</script>

使用tablekit对从AJAX方法返回的表进行排序

2 个答案: