如何使用按钮刷新 YUI 数据表？

Question

我正在测试脚本：

http://developer.yahoo.com/yui/examples/datatable /dt_xhrjson.html

我想添加一个按钮来刷新（重置）数据。 我会重置所有修改的数据并重新加载第一个数据。 我添加此代码，因此在选择（刷新）后，我没有数据：

YAHOO.util.Event.onContentReady("splitbuttonsfromjavascript", function () {

var onMenuItemSelect = function () {

        myDataTable.initializeTable();

        myDataTable.render();

        };

        var aSplitButton5Menu = [

            { text: "Refresh", value: 1, onclick: { fn: onMenuItemSelect } }

        ];

        var oSplitButton5 = new YAHOO.widget.Button({ type: "split",  label: "Refresh table", name: "splitbutton", menu: aSplitButton5Menu, container: this });

    });

我需要在 onMenuItemSelect 中使用什么来刷新 mydataTable？

---

我做了一些更改来修改示例中的“城市”和“评级”： http://developer.yahoo.com/yui/examples/datatable/dt_xhrjson。现在

，我希望使用按钮重置 MyTable（并重新加载默认数据集）。 当我使用我的代码时，单击按钮后，我清除所有数据，并且默认数据不会重新加载（我有：“未找到记录。”单击按钮后）。

如何重新加载默认数据？

Answer 1

我认为古尔诺的答案是最好的，但它缺少一点点。 为了显示“正在加载...”消息，您需要调用 showTableMessage 函数。

myDataTable.showTableMessage("Loading...");
myDataTable.getDataSource().sendRequest('', { success: myDataTable.onDataReturnInitializeTable, scope: myDataTable });

当请求完成后，onDataReturnInitializeTable函数会自动清除表消息。

我也将其发布在我的博客上。

Answer 2

我无法让 Gourneau 发布的方法（到处都提到过）起作用，所以我想出了这个小技巧：

   function updateTable(){
      sortState = theDataTable.getState().sortedBy
      var sort = sortState ? sortState.key : "id";
      var dir = sortState ? sortState.dir : "yui-dt-desc";
      theDataTable.sortColumn(theDataTable.getColumn(sort),dir);
   };

找到当前的排序方法，然后调用 sortColumn 告诉它再次排序，它会刷新数据。 这也使分页保持有序。 我将其与搜索框和一些过滤器一起使用，这样我就可以更改它们的值并相应地更新表格。

Answer 3

假设您有一个 DataTable 实例 myTable：

myTable.render() 将重绘表格；
myTable.initializeTable() 将清除所有状态，包括排序和选择，并重绘

-Eric

Answer 4

我认为如果你让按钮调用这个函数就会起作用：

myDataTable.getDataSource().sendRequest('',
{ success: myDataTable.onDataReturnInitializeTable,scope: myDataTable});

Answer 5

我认为我无法在这里充分发布您所需的解决方案的所有代码，但是 Yahoo 的 Satyam（至少是 YUI 的主要贡献者）有一个重新查询方法，他已将其扩展添加到数据表中，并已发布举个例子。 我已经使用过它，并且它工作得非常好 - 特别是当您需要为表格提供搜索功能时。

这是一个开始的链接，但我还会在“Satyam requery”下搜索更多示例或更适合您的数据表版本的示例。

http://www.satyam.com.ar/yui/2.6.0 /requery.html

-Jason

p.s. 如果您使用服务器端数据，那么利用 onDataReturnInitializeTable 方法的解决方案会有所帮助，但我认为 Satyam 的解决方案也考虑了这一点，并跟踪您的分页。