如何使用按钮刷新YUI dataTable?

时间:2009-03-04 21:44:16

标签: datatable yui

我正在测试脚本:

  

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

我想添加一个按钮来刷新(重置)数据。 我会重置所有修改过的数据并重新加载第一个数据。 我添加了这段代码,所以在select(refresh)之后,我没有数据:

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?


我做了一些修改来修改示例中的“city”和“rating”: http://developer.yahoo.com/yui/examples/datatable/dt_xhrjson.html

现在,我希望用一个按钮重置MyTable(并重新加载默认数据集)。 当我使用我的代码时,点击按钮后,我清除所有内容并且没有重新加载默认数据(我有:“没有找到记录。”按钮点击后。)

如何重新加载默认数据?

5 个答案:

答案 0 :(得分:10)

我认为Gourneau的答案是最好的,但它缺少一个很好的接触。要显示“正在加载...”消息,您需要调用showTableMessage函数。

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

请求完成后,onDataReturnInitializeTable函数将自动清除表消息。

我也在我的blog上发布了此内容。

答案 1 :(得分:5)

我无法获得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告诉它再次排序,并刷新数据。这也保持了分页顺序。我在搜索框和一些过滤器中使用它,因此我可以更改它们的值并相应地更新表。

答案 2 :(得分:4)

假设您有一个DataTable实例myTable:

myTable.render()将重绘表格; myTable.initializeTable()将吹掉所有状态,包括排序和选择,以及重绘

-Eric

答案 3 :(得分:2)

我认为如果你按下这个功能按钮就可以了:

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

答案 4 :(得分:2)

我认为我不能在这里为你所需的解决方案充分发布所有代码,但雅虎的Satyam(至少是YUI的主要贡献者)有一个requery方法,他已经为Datatable添加了一个扩展,并已发布示例。我已经使用了它,它的工作效果非常好 - 特别是当你需要一个搜索功能时。

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

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

-Jason

P.S。如果您正在使用服务器端数据,那么使用onDataReturnInitializeTable方法的解决方案会有所帮助,但我认为Satyam的解决方案也可以解决这个问题,同时也可以跟踪您的分页。