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

最新推荐文章于 2021-09-26 21:25:06 发布

原创最新推荐文章于 2021-09-26 21:25:06 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#datagrid #jquery #function #date #div #border

javscript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了使用jQuery自建datagrid的实战经验，包括组件结构、兼容性挑战及解决方法。通过将内容包裹在div中，利用表格和div实现表头固定效果，并探讨了CSS在不同浏览器的兼容性问题。

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:"5", fee:"0"},
		{bookname:"豆豆龙(5)", bookid:"KJ0002", date:"2011-10-10", days:"5", fee:"0"}
	]);

完整代码和css如下：

js代码：

(function($){
	if( !$.DS ) $.DS = {};
	if( !$.DS.UI ) $.DS.UI = {};
	
	$.DS.UI.defaultDataGridSetting = {
		
	};
	
	$.DS.UI.allDataGrid = {};
	
	/**
	 * DataGrid Class.
	 * @param setting 表格配置，包括表头标题，列配置等，可以继续扩展
	 * @param id	表的ID，dom中的ID；
	 * @param owner   表的父容器。
	 * 
	 */
	$.DS.UI.DataGrid = function(setting, id, owner){
		this.id = id;
		if( !id ) id = "_dg_"+Math.random();
		
		this.setting = $.extend($.DS.UI.defaultDataGridSetting, setting);
		
		this.frame = $("<DIV id=\""+id+"\"></div>");
		this.frame[0]._jobj = this;
		this.frame.addClass("datagrid-frame");
		this.frame.append("<div id=\"_dg_header\">"+setting.headerTitle+"</div>" +
				"<div id=\"_dg_title\"/>" +
				"<div id=\"_dg_body\"/>" +
				"<div id=\"_dg_footer\">footer</div>");
				
		this.header = this.frame.find("#_dg_header");
		this.header.addClass("datagrid-header");
		
		this.title = this.frame.find("#_dg_title");
		this.title.addClass("datagrid-title");
		
		this.body = this.frame.find("#_dg_body");
		this.body.addClass("datagrid-body");
		
		var _title = this.title;
		var _body = this.body;
		
		_frame = this;
		
		this.body.scroll(function(obj){
			_frame.title.offset({left:_frame.content.offset().left});
		});
		
		this.footer = this.frame.find("#_dg_footer");
		this.footer.addClass("datagrid-footer");
		
		this.columns(setting.columns);
		
		this.owner(owner);
	};
	
	$.DS.UI.DataGrid.prototype = {
		/**
		 * @param parent null=getter not null=setter
		 */
		owner:function(owner){
			if( null === owner ) return this._owner;
			if( $(owner) === this._owner ) return this._owner;
			//remove from current parent; 
			if(this._owner) _owner.remove(this.id); 
			this._owner = $(owner);
			this._owner.append(this.frame);
			this.updateDisplay();
		},
		
		columns:function(columns){
			if( null === columns ) return this._columns;
			
			this._columns = columns;
			this.title.empty();
			var title = "";
			var cols = "";
			var testTB = "";
			var columnslength = 0;
			for (var i=0;i<this._columns.length;i++){
				var field = this._columns[i];
				columnslength += field.width;
				//title += "<div style=\"width:"+(field.width)+"\" class=\"datagrid-title-cell\"><p>"+field.title+"</P></div>";
				title += "<td>"+field.title+"</td>";
				cols += "<col width=\""+(field.width)+"\"/>";
				//testTB += "<td>asdfasdf</td>";
			}
			
			this.title.width(columnslength+1000);
			title = "<table style=\"float:left\" width=\""+(columnslength)+"\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">"+cols+"<tr>"+title+"</tr></table>";
			title += "<table style=\"float:left\" width=\"900\"  cellspacing=\"0\" cellpadding=\"0\" border=\"0\"><tr><td width=\"900\">　</td></tr></table>";
			this.title.html(title);
			
			var tab = "<table width=\""+columnslength+"\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" id=\"_dg_contant\">"+cols+"<tbody/></table>";
			this.body.html(tab);
			this.content = this.body.find("#_dg_contant");
			//this.content.find(">tbody").append("<tr>"+testTB+"</tr>");
		},
		
		loadData:function(url){
			
		},
		
		updateDisplay:function(){
			this.body.width(this.body.parent().width()- 2);
			this.body.height(this.body.parent().height() - this.header.height() 
				- this.title.height() - this.footer.height() );
		},
		
		setJSONData:function(data){
			this.content.find(">tbody").empty();
			var html = "";
			for(var j=0; j < data.length; j++){
				html = "<tr class=\"datagrid-body-row-"+ (j%2) +"\">"
				for (var i=0;i<this._columns.length;i++){
					var field = this._columns[i];
					value = data[j][field.field] || ' ';
					html += "<td>"+value+"</td>";
				}
				html += "</tr>";
				this.content.find(">tbody").append(html);
			}
		},
		
		setDatasource:function(datasource){
			
		}
	}
	
	$.DS.UI.findDataGrid = function(id){
		return $.DS.UI.allDataGrid[id];
	}
})(jQuery)

css部分

@CHARSET "UTF-8";

.datagrid-frame{
	border-bottom: 1px solid #999999;
	border-top: 1px solid #ffffff;
	border-left: 1px solid  #ffffff;
	border-right: 1px solid #999999;
	
	width:99%;
	height:99%;
	text-align: left;
	overflow: hidden
}

.datagrid-header{
	font-size: 20;
	padding:2 2 2 2;
	font-family: 黑体;
	overflow: hidden
}

.datagrid-title-viewport{
	width:100%;
	position: relative;
	list-style: none;
	overflow: hidden
}

.datagrid-title{
	left: 0;
	border-bottom: 1px solid #999999;
	border-top: 1px solid #eeeeee;
	               	
	position: relative;
	overflow:hidden	
}

.datagrid-title td{
	border-bottom: 1px solid #666666;
	border-top: 1px solid #ffffff;
	border-left: 1px solid  #ffffff;
	border-right: 1px solid #666666;
	
	font-size: 28;
	text-align: center;
	font-weight: bold;
	cursor: pointer;
	background-color: #999
}

.datagrid-title-cell{
	position: relative;
	float:left;
	/*padding: 0 5 0 5;*/
	cursor: pointer;
	border-bottom: 1px solid #999999;
	border-top: 1px solid #ffffff;
	border-left: 1px solid  #ffffff;
	border-right: 1px solid #999999;

	background-color: #aaaaaa;
	font-weight: bold;
	font-size: 26;
}

.datagrid-body{
	overflow:auto;
	border-bottom: 1px solid #999999
}

.datagrid-body td{

	border-bottom: 1px solid #666666;
	border-top: 1px solid #ffffff;
	border-left: 1px solid  #ffffff;
	border-right: 1px solid #666666;
  
	font-size: 25;
}

.datagrid-body-row-0{
	background: #111
}

.datagrid-body-row-1{
	background: #223
}

.datagrid-body-cell{
	
}

.datagrid-footer{
	font-size: 30;
	font-family: 黑体
}