客户端的数据表现模块是客户端的主要模块。使用3个Html的Table元素来展示列表控件。3个Table分别对应的表头模块、表身模块和表尾模块。表头模块主要对应数据的显示方式功能(列表、缩略图、显示个数等)和显示列表名称功能。表身模块主要对应数据的显示功能,包括删除Table中已显示的数据行列并显示新获取数据的功能。表尾模块对应数据的分页和现实当前数据信息的功能,其具体情况如图5所示。
图5 列表功能图示
表头模块的任务是完成现实表名称和控制表的显示功能。具体实现就是从alldata3中获取数据表名称显示在表头table中。其代码如下:
var _table=document.getElementById('Tabletitle');//获取表头table对象
var _td=_table.rows[0].cells[0];//获取要显示名称的表单元格对象
//从alldata3中获取数据并显示"tablename"为数据集中固定的专门记录表名称的列
_td.innerHTML=alldata3.Rows[0]["tablename"];
改变显示模式就是将当前显示方式参数和每页显示个数参数进行修改,然后将新的显示参数通过客户端的数据发送模块将数据发送给服务器,再由表身模块完成数据参数修改后的数据显示内容。其代码示例如下:
//获取表头table中用来获取设置显示方式的下拉列表和每页显示数据数目的文字框
Var _select = document.getElementById('Tabletitleselect');
Var _box = document.getElementById('Tabletitlebox');
oldnewperpagecount=newperpagecount;olddisptype= disptype;//保存原始显示信息
newperpagecount = _box.Value; disptype = _select.Value;//设置新值
WebForm.GetAllData(newperpagecount,newpage,disptype,jsGetAllData_callback);
表身模块负责数据的显示工作。每当客户端数据接收模块收到来自服务器端的数据后。表身模块通过获取到的数据和当前显示参数来进行显示。显示过程中要根据参数信息(原始显示方式和个数)首先删除Table中已经显示的内容。再根据新的参数(新显示方式和每页显示个数)决定显示的过程,接着从alldata2内容中的列信息完成数据表列的显示,最后根据alldata的内容逐行完成数据内容的显示过程。其代码示例如下所示:
|