实战jquery(1)-自建datagrid，有图有真相有源码

 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