如何在创建后更改YUI数据网格上的数据源

I am using the Yahoo DataTable for which the API is here.

我正在使用API所在的Yahoo DataTable。

I am having difficulty changing the data once I have rendered the grid once. I am using jQuery to get data via AJAX, or from a client side data island and need to put this back into the grid.

一旦渲染了网格,我就很难更改数据。我正在使用jQuery通过AJAX或从客户端数据岛获取数据,并需要将其重新放入网格中。

There is no setDataSource method in the DataTable API, and changing 'dataSource.liveData' does not update the grid.

DataTable API中没有setDataSource方法,更改'dataSource.liveData'不会更新网格。

 // does not work
 dataTable.dataSource.liveData = [ {name:"cat"}, {name:"dog"}, {name:"mouse"};

The example I am basing my code on is the basic LocalDataSource example.

我基于代码的示例是基本的LocalDataSource示例。

How can I update the data source without having to completely recreate the table. I do NOT want to use the YUI datasources that make Async calls. I need to know how I can do this 'manually'.

如何在不必完全重新创建表的情况下更新数据源。我不想使用进行异步调用的YUI数据源。我需要知道如何“手动”完成这项工作。

4 个解决方案

#1

You were on the right track, you just forgot to tell the datasource to send the data to the datatable. Assuming you are using a LocalDataSource and want to replace the data in the table with what is in the datasource, after replacing livedata you just do

您走在正确的轨道上,您只是忘了告诉数据源将数据发送到数据表。假设您正在使用LocalDataSource并希望用数据源中的内容替换表中的数据,在替换livingata之后,您只需执行

dataTable.getDataSource().sendRequest(null,
  {success: dataTable.onDataReturnInitializeTable},
  dataTable);

Also see the other onDataReturnXXX methods of DataTablein the API reference. You can append the new data instead of replacing, etc.

另请参阅DataTablein的其他onDataReturnXXX方法的API参考。您可以附加新数据而不是替换等。

#2

I just wanted to add that you can preserve pagination if pass in a call to getState() in the argument property.

我只想补充说,如果在参数属性中调用getState(),则可以保留分页。

dataTable.getDataSource().sendRequest(null,
    {
        success: dataTable.onDataReturnInitializeTable,
        argument: dataTable.getState()       
    }
);

#3

How can I update the data source without having to completely recreate the table?

如何在不完全重新创建表的情况下更新数据源?

Do you mean without using a "new" statement? If so, I haven't had to do this myself, but I use YUI often. I notice that there is a deleteRows method which you could use to delete all the rows, 0 thru the length of the table, and then use the addRows which takes a literal array like yours and an index, 0, in this case.

你的意思是不使用“新”声明吗?如果是这样,我自己不必这样做,但我经常使用YUI。我注意到有一个deleteRows方法可以用来删除所有行,0到表的长度,然后使用addRows,它接受像你的文字数组和索引0,在这种情况下。

Have you tried this?

你试过这个吗?

Edit: Take a look at this example. What you want to do can definitely be done. The table is being updated locally at a set interval using the setInterval method (not suprisingly). Taking a look at what setInterval does, you can see that it calls makeConnection on the instance of the data source. The method sounds like it's making a remote call, but it's not necessarily.

编辑:看一下这个例子。你想做什么绝对可以做到。该表使用setInterval方法以设定的间隔在本地更新(并不令人惊讶)。看一下setInterval的作用,你可以看到它在数据源的实例上调用makeConnection。该方法听起来像是在进行远程调用,但并不一定如此。

Let's take a look at a couple lines from the example.

让我们看一下示例中的几行。

    // Set up polling
    var myCallback = {
        success: myDataTable.onDataReturnInitializeTable,
        failure: function() {
            YAHOO.log("Polling failure", "error");
        },
        scope: myDataTable
    }
    myDataSource.setInterval(5000, null, myCallback)

the last line could be called once (or on demand as you need) instead of at an interval by rewriting it like this:

最后一行可以调用一次(或根据需要按需调用),而不是按一定间隔重写它,如下所示:

myDataSource.makeConnection(null, myCallBack)

which calls the onDataReturnInitializeTable method - which i guess you could call directly which would make more sense.

它调用onDataReturnInitializeTable方法 - 我想你可以直接调用哪个更有意义。

Anyway, just follow along the example and take out the parts that you don't need. Ultimately it looks like the method onDataReturnInitializeTable is key.

无论如何,只需按照示例进行操作,然后取出不需要的部件。最终看起来onDataReturnInitializeTable方法是关键。

Hope that helps.

希望有所帮助。

#4

Actually, all I did to get it to work is the following two lines of code (and mine was returned from ajax so a little different than the OP)...

实际上,我所做的就是使用以下两行代码(我从ajax返回,因此与OP有点不同)...

dataTable.dataSource.liveData = eval(o.responseText);
dataTable.load({});

because if you read what datatable.load() does is what everyone was suggesting to call.

因为如果你读了什么datatable.load()做的是每个人都建议打电话。

#1

dataTable.getDataSource().sendRequest(null,
  {success: dataTable.onDataReturnInitializeTable},
  dataTable);