yui datatable
yui 的datatable提供了强大的表格功能。这里谈谈datatable的事件处理。
所谓事件就是发生的事情。比如rowClickEvent,就是表格的一行被鼠标单击。所谓事件处理就是对事件的响应,datatable有许多内置的事件处理函数。比如:onEventSelectRow。
myDataTable.subscribe("rowClickEvent", myDataTable.onEventSelectRow);
rowClickEvent事件发生的时候,由datatable内置的事件处理函数onEventSelectRow来处理。就是我们看到的表格中的某一行变成了其他颜色。
根据api文档:rowClickEvent ( oArgs.event , oArgs.target ) ,事件发生的时候,yui系统传递给handler函数的参数是两个HTMLElement。
oArgs.event <HTMLEvent> The event object.
oArgs.target <HTMLElement> The TR element.
如果你想直接取得与表格该行对应的recordset,最好是监听rowSelectEvent,这个事件传递个handler的是:
oArgs.el <HTMLElement> The selected TR element, if applicable.
oArgs.record <YAHOO.widget.Record> The selected Record.
可以直接获得该行的数据。 DataTable instance is made up of a Columnset, a Recordset, and DOM elements。
一个datatable有columnset、recordset,和dom elements组成。
通过column的key(也就是myColumnDefs中的key)可以很容易的获得特定的column对象。
每个column赋予一个全局unique的id,并且一个key index表明当前column的排序中的位置。
而rescord的getdata就可以获得底层datasource的数据。每个record都赋予一个全局unique id,还有一个record index表明当前排序中的位置。
[[i] 本帖最后由 弯月圆刀 于 2008-7-29 15:35 编辑 [/i]] 可以通过一些实际的观察来更深入的了解datatable。
比如:
myDataTable.subscribe("rowClickEvent", myhandler);
当你的鼠标点击表格中的一条记录时,myhandler就会被触发,他得到参数是一个对象:oArgs
这个对象有两个属性:target 和 event。分别是一个HTMLElement和一个HTMLEvent对象。
根据yui文档的描述,target的id为 yui-dt0-bdrow0 这样的格式,而yuiRecordId的格式为yui-rec0,其中yuiRecordId就是底层record的id,正是通过这个桥梁在datasource和html的tr之间建立一种联系。
[[i] 本帖最后由 弯月圆刀 于 2008-9-5 20:50 编辑 [/i]] myDataTable.getTrEl(string|number|record)
从表格中得到一行的HTMLElement tr。可以是row的id,或者页的row index,或者record对象。
而myDataTable.getRecord则可以获得record对象,所以在任何事件处理中,不管得到的是HTMLElemnt对象还是record对象,总是可以相互获取多方,这是非常灵活的。 每个record都赋予一个唯一id,这个id不管排序情况,始终保持不变,它的格式是:yui-rec4。
myDataTable.getRecord("yui-rec4")就可以的到这个record对象。
每个record还有一个index(数字),这个代表当前排序状态下,它在整个recordset中的位置。
myDataTable.getRecord(0)就得到当前排序下的第一个record对象。
myDataTable.getRecordIndex(0),得到当前表格的第一行所显示的record的index。注意这个0代表的是当前显示的表格的第一行,这函数用中文来描述就是:当前表格中的第一行显示的记录的index是多少。如果没有分页,表格中的位置和index是一致的,但是在分页情况下,两者是有区别的。
在dom下,表格的每一行dom id是这样的格式:yui-dt0-dbrow0,就像你眼睛看到的表格,它的第一行肯定是这个id,不管你怎样翻页,排序都
无关。
myDataTable.getTrEl("yui-dt0-dbrow0"),就得到tr的HTMLElement对象。
myDataTable.getTrEl(0),就得到表格第一行的HTMLElement对象。
这个dom对象有一个yuiRecordId属性,这个属性其实就是record的唯一id。但是这个yuiRecordId不是固定的,随着翻页、排序不停的变化。
比如你有2页的一个表,当你在第一页的时候myDataTable.getTrEl(0)的id是yui-dt0-dbrow0,yuiRecordId的值是yui-rec0,当你翻到第二页的时候,myDataTable.getTrEl(0)的id还是yui-dt0-dbrow0,但是yuiRecordId的id可能变成了yui-rec10. datatable的Configuration Attributes可以通过get的方法来获取。
比如:paginator
mydatatable.get("paginator")即可。 datatable中的generateRequest和datasource的sendRequest相关,但却是两回事。
generateRequest在表格状态变化的时候产生,比如分页、排序等等,在动态数据的情况下会,对应的datasource就会发动sendRequest。
如果通过程序的其它部分直接对datasource发出请求,并且试图更新表格,就可能产生分页问题。
其中也个可行的解决方法是在:sendRequest的回调函数里面对datatable的paginator进行修正,这样确保分页正常。 yui 2.6.0版本之后,对于dynamicData = true的情况下,initialLoad最好是false,因为初始化的时候,许多callback函数都还没有起作用,在datatable初始化的时候就执行了sendRequest,所以你用来覆盖的callback函数还没有起作用呢。
比如:
handleDataReturnPayload
页:
[1]
