css在不同浏览器的兼容性让人头痛。先发图
基本思路如下:
1、datagrid包裹在一个大的div中,里面包括header、title、body、footer几个部门,每个部分都是一个div
2、标题和内容都包含一个具有相同col的table,通过body的scroll函数滚动标题部门的div,使表头和内容看起来是一个整体
3、设置图片背景实现效果,但是css不支持拉伸,要为每个高度实现图片是个讨厌的事情。
构造函数:
/**
* DataGrid Class.
* @param setting 表格配置,包括表头标题,列配置等,可以继续扩展
* @param id 表的ID,dom中的ID;
* @param owner 表的父容器。
*
*/
$.DS.UI.DataGrid = function(setting, id, owner)
构造表的过程如下:
dataGrid = new $.DS.UI.DataGrid({
headerTitle:"借阅书籍列表",
columns:[
{title:"书籍名称", field:"bookname", width:350},
{title:"书刊号", field:"bookid", width:250},
{title:"借阅日期", field:"date", width:200},
{title:"过期天数", field:"days", width:430},
{title:"逾期费用", field:"fee", width:430}
]},"gd_booklist","#booklist");
dataGrid.setJSONData([
{bookname:"金刚葫芦娃之奥特曼大战孙悟空哪咤打小怪物", bookid:"KJ0001", date:"2011-10-10", days:"5", fee:"0"},
{bookname:"豆豆龙(1)", bookid:"KJ0002", date:"2011-10-10", days:"5", fee:"0"},
{bookname:"豆豆龙(2)", bookid:"KJ0002", date:"2011-10-10", days:"5", fee:"0"},
{bookname:"豆豆龙(3)", bookid:"KJ0002", date:"2011-10-10", days:"5", fee:"0"},
{bookname:"豆豆龙(4)", bookid:"KJ0002", date:"2011-10-10", days