使用javascript编写的可编辑表格控件(支持汇总,滚动,增行,删行)

/
/**
 * js通用对象,主要包括List和Map集合对象的定义
 * @author 陈双
 * @date 2012-10-01
 * @mail chenshuang_com@sina.com 
 */

/**
 * List对象
 * @return
 */
function List()
{
 this.container=new Array(1000);//容器
 this.index=-1;//索引
 this.add=function(element){//添加元素
  this.index++;
  this.container[this.index]=element;
 }
 this.get=function(i){//获取元素
  if(this.index==-1||i<0)
  {
   return null;
  }
  return this.container[i];
 }
 this.size=function(){//List 对象的大小
  return this.index+1;
 }
 this.clear=function(){//清空List对象
  if(this.index!=-1)
  {
   for(var i=0;i<=this.index;i++)
   {
    this.container[i]=null;
   }
  }
  this.index=-1;
 }
 this.contain=function(element){//是否包含某元素
  if(this.index==-1||(!element))
  {
   return false;
  }
  for(var i=0;i<=this.index;i++)
  {
   if(this.container[i]==element)
   {
    return true;
   }
  }
 }
 this.isEmpty=function(){//是否为空
  return this.index==-1?true:false;
 }
 this.remove=function(element){//删除一个元素
  if((!element)||(!this.index))
  {
   return;
  }
  var po=-1;
  var flag=false;//是否移除了
  for(var i=0;i<=this.index;i++)
  {
   if(this.container[i]==element)
   {
    po=i;
    if(po==this.index)
    {
     po=-1;
    }
    flag=true;
   }
   if(po!=-1)
   {
    this.container[po]=this.container[po+1];
    po++;
   }
  }
  if(flag)
  {
   this.index=this.index-1;
  }
 }
 this.removeIn=function(i){//删除指定位置的元素
  if(i<0||this.index<0)
  {
   return;
  }
  var po=-1;
  var flag=false;//是否移除了
  for(var j=0;j<=this.index;j++)
  {
   if(j==i)
   {
    po=j;
    if(po==this.index)
    {
     po=-1;
    }
    flag=true;
   }
   if(po!=-1)
   {
    this.container[po]=this.container[po+1];
    po++;
   }
  }
  if(flag)
  {
   this.index=this.index-1;
  }
 }
}
/**
 * Map对象
 * @return
 */
function Map()
{
 this.index=-1;
 this.entrys=new Array(1000);
 this.get=function(key){//通过key映射value
  if(this.index==-1)
  {
   return null;
  }
  for(var i=0;i<=this.index;i++)
  {
   var entry=this.entrys[i];
   if(entry.key==key)
   {
    return entry.value;
   }
  }
  return null;
 }
 this.size=function(){//返回元素个数
  return this.index+1;
 }
 this.containsKey=function(key){//是否包含key值
  if(this.index==-1)
  {
   return false;
  }
  for(var i=0;i<=this.index;i++)
  {
   var entry=this.entrys[i];
   if(entry.key==key)
   {
    return true;
   }
  }
  return false;
 }
 this.containsValue=function(value){//是否包含值
  if(this.index==-1)
  {
   return false;
  }
  for(var i=0;i<=this.index;i++)
  {
   var entry=this.entrys[i];
   if(entry.value==value)
   {
    return true;
   }
  }
  return false;
 }
 this.put=function(key,value){//添加元素
  if(this.containsKey(key))
  {
   this.remove(key);
  }
  this.index++;
  this.entrys[this.index]=new Entry(key,value);
 }
 this.keySet=function(){//返回key集合 
  if(this.index==-1)
  {
   return null;
  }
  var keys=new List();
  for(var i=0;i<=this.index;i++)
  {
   keys.add(this.entrys[i].key);
  }
  return keys;
 }
 this.values=function(){//返回值集合
  if(this.index==-1)
  {
   return null;
  }
  var value=new List();
  for(var i=0;i<=this.index;i++)
  {
   value.add(this.entrys[i].value);
  }
  return value;
 }
 this.clear=function(){//清空
  if(this.index!=-1)
  {
   for(var i=0;i<=this.index;i++)
   {
    this.entrys[i]=null;
   }
   this.index=-1;
  }
 }
 this.remove=function(key){//移除某个元素
  if(this.index==-1)
  {
   return;
  }
  var po=-1;
  var flag=false;
  for(var i=0;i<=this.index;i++)
  {
   var entry=this.entrys[i];
   if(entry.key==key)
   {
    po=i;
    if(i==this.index)
    {
     po=-1;
    }
    flag=true;
   }
   if(po!=-1)
   {
    this.entrys[po]=this.entrys[po+1];
    po++;
   }
  }
  if(flag)
  {
   this.index=this.index-1;
  }
 }
 this.isEmpty=function(){//是否为空
  if(this.index==-1)
  {
   return true;
  }
  return false;
 }
 this.entrySet=function(){//返回Entry
  if(this.index==-1)
  {
   return null;
  }
  var entry=new List();
  for(var i=0;i<=this.index;i++)
  {
   entry.add(this.entrys[i]);
  }
  return entry;
 }
}
/**
 * Map中的节点对象
 * @param key
 * @param value
 * @return
 */
function Entry(key,value)
{
 this.key=key;
 this.value=value;
}
//==========================================================================
/**                                                                        
 * EditTable操作                                                           
 * @author 陈双                                                            
 * @date 2012-09-27                                                        
 * @mail chenshuang_com@sina.com                                           
 */                                                                        
//==========================================================================
var globeVariable=new Map();//全局变量列表
/**
 * 注册全局变量
 * @param object 对象id
 * @param property 变量名称
 * @param value 值
 * @return
 */
function put(object,property,value)
{
	globeVariable.put(object+"_"+property,value);
}
/**
 * 取出全局变量
 * @param object 对象id
 * @param property 变量名称
 * @return
 */
function get(object,property)
{
	return globeVariable.get(object+"_"+property);
}
/**
 * 创建可编辑的表格对象,并添加到指定的父节点中
 * @param id 表格名称
 * @param parentId 父节点id
 * @param width 表格宽度
 * @param height 表格高度
 * @param columns 表格所有的列,一数组的形式保存Column对象
 * @param rows 数据列表,它是以集合List的形式保存Map,其中key是name,value是值
 * @param status 表格状态值: read只读,update可修改,insert新增
 */
function CreateEditTable(id,parentId,width,height,columns,rows,status)
{
	if((!id)|(!parentId)||(!width)||(!height)||(!columns)||(!rows))
	{
		return;
	}
	//声明全局变量
	var all_columns;//所有的列
	var sum_columns;//汇总列
	var isHbar;//是否有横向滚动条
	var first="";//声明第一列表
	var title="";//标题表
	var data="";//数据表
	var sum="";//汇总表
	var columnWidth=125;//默认列宽
	all_columns=columns;//所有的列
	put(id, "all_columns", all_columns);//注册全局变量
	if(columns&&columns.length>0)
	{//标题和汇总表格
		title="<tr><td class='firstcolumn'> </td>";
		sum="<tr><td class='firstcolumn'>汇总</td>";
		for(var i=0;i<columns.length;i++)
		{
			title+="<td class='column' align='center'";
			sum+="<td class='column' align='center'";
			if(columns[i].hidden)
			{
				columns[i].width=1;
				title+=" style=\"border:none;\"";
				sum+=" style=\"border:none;\"";
			}
			if(columns[i].width)
			{
				title+=" width='"+columns[i].width+"'";
				sum+=" width='"+columns[i].width+"'";
			}
			else
			{
				title+=" width='"+columnWidth+"'";
				sum+=" width='"+columnWidth+"'";
			}
			title+=">"+columns[i].label+"</td>";
			sum+="> </td>";
		}
		title+="<td class='lastcolumn'> </td></tr>";
		sum+="<td class='lastcolumn'> </td></tr>";
	}
	if(rows&&rows.size()>0)
	{//构建第一列和数据表格
		first="<tr><td> </td></tr>";
		data="";
		for(var i=0;i<rows.size();i++)
		{
			first+="<tr><td>"+(i+1)+"</td></tr>";
			data+="<tr><td class='firstcolumn'>"+(i+1)+"</td>";
			var rowId="rowid_"+(i+1);
			var map=rows.get(i);
			for(var j=0;j<columns.length;j++)
			{
				data+="<td";
				if(columns[j].hidden)
				{
					columns[j].width=1;
					data+=" style=\"border-right:none;\"";
				}
				if(columns[j].width)
				{
					data+=" width='"+columns[j].width+"'";
				}
				else
				{
					data+=" width='"+columnWidth+"'";
				}
				data+=">";
				if(columns[j].type=="text")
				{
					data+=createText(columns[j],rowId,map.get(columns[j].name),status);
				}
				else if(columns[j].type=="int")
				{
					data+=createInt(columns[j],rowId,map.get(columns[j].name),status);
				}
				else if(columns[j].type=="number")
				{
					data+=createNumber(columns[j],rowId,map.get(columns[j].name),status);
				}
				else if(columns[j].type=="date")
				{
					data+=createDate(columns[j],rowId,map.get(columns[j].name),status);
				}
				else if(columns[j].type=="combox")
				{
					data+=createCombox(columns[j],rowId,map.get(columns[j].name),status);
				}
				else if(columns[j].type=="refer")
				{
					data+=createRefer(columns[j],rowId,map.get(columns[j].name),status);
				}
				data+="</td>";
			}
			data+="<td class='lastdata'>";
			data+="<input name='rowid' type='hidden' value='"+(rowId)+"'/>";
			data+=" </td></tr>";
		}
	}
	else
	{//构建空行
		first="<tr><td> </td></tr>";
		first+="<tr><td>1</td></tr>";
		data+="<tr><td class='firstcolumn'>1</td>";
		var rowId="rowid_1";
		for(var j=0;j<columns.length;j++)
		{
			data+="<td";
			if(columns[j].hidden)
			{
				columns[j].width=1;
				data+=" style=\"border:none;\"";
			}
			if(columns[j].width)
			{
				data+=" width='"+columns[j].width+"'";
			}
			else
			{
				data+=" width='"+columnWidth+"'";
			}
			data+=">";
			if(columns[j].type=="text")
			{
				data+=createText(columns[j],rowId,null,status);
			}
			else if(columns[j].type=="int")
			{
				data+=createInt(columns[j],rowId,null,status);
			}
			else if(columns[j].type=="number")
			{
				data+=createNumber(columns[j],rowId,null,status);
			}
			else if(columns[j].type=="date")
			{
				data+=createDate(columns[j],rowId,null,status);
			}
			else if(columns[j].type=="combox")
			{
				data+=createCombox(columns[j],rowId,null,status);
			}
			else if(columns[j].type=="refer")
			{
				data+=createRefer(columns[j],rowId,null,status);
			}
			data+="</td>";
		}
		data+="<td class='lastdata'>";
		data+="<input name='rowid' type='hidden' value='rowid_1'/>";
		data+=" </td></tr>";
	}
	//构建汇总列
    sum_columns=new Array();//初始化
	var k=0;
	for(var i=0;i<columns.length;i++)
	{
		if(columns[i].sum)
		{
			sum_columns[k]=i+1;
			k++;
		}
	}
	put(id, "sum_columns", sum_columns);//注册全局变量
	var allWidth=0;
	for(var i=0;i<columns.length;i++)
	{
		if(columns[i].width)
		{
			allWidth+=parseInt(columns[i].width);
		}
		else 
		{
			allWidth+=parseInt(columnWidth);
		}
	}
	var total=1;
	if(allWidth>width)
	{
		total=2;
		isHbar=true;
	}
	put(id, "isHbar", isHbar);
	//构建隐藏行
	for(var i=0;i<total;i++)
	{
		data+="<tr><td style=\"border:0;\"> </td>";
		for(var j=0;j<columns.length;j++)
		{
			data+="<td style=\"border:0;\"> </td>";
		}
		data+="<td style=\"border:0;\"> </td>";
		first+="<tr><td style=\"border:0;background-color:white;\"> </td></tr>";
	}
	var title_html="<table id='header_"+id+"' cellspacing='0' cellpadding='0' class='titlecolumn'>"+title+"</table>";
	var first_html="<table id='first_"+id+"' cellspacing='0' cellpadding='0' class='slidecolumn'>"+first+"</table>";
	var data_html="<table id='"+id+"' cellspacing='0' cellpadding='0' class='datacolumn' οnclick=\"sumRowForTable('"+id+"');\">";
	data_html+=title+data+"</table>";
	var sum_html="<table id='sum_"+id+"' cellspacing='0'"+" cellpadding='0' style='width:100%;position:absolute;top:";
	if(isHbar)
	{
		sum_html+=+(parseInt(height)-18-17);
	}
	else
	{
		sum_html+=(parseInt(height)-17);
	}
	sum_html+=";left:0;z-index:4;'/>"+sum+"</html>";
	//构建表格操作按钮层
	var html="<table border='0' width='"+width+"' height='25px' style='table_layout:fixed;'><tr><td align='right'><input type='button' style='background-color:#cccccc;' value='增行' onClick=\"";
	html+="addRowForTable('"+id+"');\"";
	if(status=="read")
	{
		html+=" disabled='disabled'";
	}
	html+="/><input type='button' style='background-color:#cccccc;' value='删行' onClick=\"";
	html+="deleteRowForTable('"+id+"');\"";
	if(status=="read")
	{
		html+=" disabled='disabled'";
	}
	html+="/></td></tr></table>";
	//构建主体框架
	var frame=document.createElement("DIV");
	frame.id="table_"+id;
	frame.style.width=width;
	frame.style.height=parseInt(height)+25;
	frame.style.border="solid 1 #cccccc";
	frame.style.padding="0px";
	frame.style.position="absolute";
	frame.innerHTML=html;
	document.getElementById(parentId).appendChild(frame);
	execute(id, null, width, height, first_html+title_html+data_html+sum_html,frame);
	sumRowForTable(id);
}
/**
 * 列结构
 * @param name名称
 * @param label 标签
 * @param type 类型
 * @param width 宽度
 * @param height 高度
 * @param data 列数据来源是一个数组
 * @param hidden 是否隐藏
 * @param disabled 是否可用
 * @param sum 是否汇总
 * @param size 字符个数
 * @param ondblclick 鼠标双击事件
 */
function Column(name,label,type,width,height,data,hidden,disabled,sum,size,ondblclick)
{
	this.name=name;
	this.label=label;
	this.type=type;
	this.width=width;
	this.height=height;
	this.data=data;
	this.hidden=hidden;
	this.disabled=disabled;
	this.sum=sum;
	this.size=size;
	this.οndblclick=ondblclick;
	
}
/**
 * 选项
 * @param value 值
 * @param label 标签
 * @return
 */
function OptionData(value,label)
{
	this.value=value;
	this.label=label;
}
/**
 *添加一行
 *@param id 表格id
 *@param columns 列集合
 */
function addRowForTable(id)
{
	var columns=get(id, 'all_columns');
	var isHbar=get(id,'isHbar');
	if(columns==undefined || columns.length==0)
	{
		return;
	}
	var first_table=document.getElementById("first_"+id);
	var table=document.getElementById(id);
	var newRow, rowId;
	if(isHbar)
	{
		var firstRow=first_table.insertRow(first_table.rows.length-2);
		newRow=table.insertRow(table.rows.length-2);
		//添加第一列
		var firstcell0=firstRow.insertCell(0);
		firstcell0.setAttribute("align","center");
		firstcell0.innerHTML=first_table.rows.length-3;
		
		var cell0=newRow.insertCell(0);
		cell0.setAttribute("className","firstcolumn");
		cell0.setAttribute("align","center");
		cell0.innerHTML=first_table.rows.length-3;
		rowId="rowid_"+(table.rows.length-3);
	}
	else
	{
		var firstRow=first_table.insertRow(first_table.rows.length-1);
		newRow=table.insertRow(table.rows.length-1);
		//添加第一列
		var firstcell0=firstRow.insertCell(0);
		firstcell0.setAttribute("align","center");
		firstcell0.innerHTML=first_table.rows.length-2;
		
		var cell0=newRow.insertCell(0);
		cell0.setAttribute("className","firstcolumn");
		cell0.setAttribute("align","center");
		cell0.innerHTML=first_table.rows.length-2;
		rowId="rowid_"+(table.rows.length-2);
	}
	for(var i=0;i<columns.length;i++)
	{
		var cell=newRow.insertCell((i+1));
		//cell.setAttribute("className","datacolumn");
		if(columns[i].type=="text")
		{
			cell.innerHTML=createText(columns[i],rowId);
		}
		else if(columns[i].type=="int")
		{
			cell.innerHTML=createInt(columns[i],rowId);
		}
		else if(columns[i].type=="number")
		{
			cell.innerHTML=createNumber(columns[i],rowId);
		}
		else if(columns[i].type=="date")
		{
			cell.innerHTML=createDate(columns[i],rowId);
		}
		else if(columns[i].type=="combox")
		{
			cell.innerHTML=createCombox(columns[i],rowId);
		}
		else if(columns[i].type=="refer")
		{
			cell.innerHTML=createRefer(columns[i],rowId);
		}
	}
	var lastCell=newRow.insertCell(columns.length+1);
	lastCell.setAttribute("className","lastdata")
	lastCell.innerHTML="<input name='rowid' type='hidden' value='"+rowId+"'/> ";
	block_scroll(id);
}
/**
 * 构建文本控件
 * @param column 列
 * @param rowId 行id
 * @param value 值
 * @param status 单元格的状态
 * @return
 */
function createText(column,rowId,value,status)
{
	var cell="<input name='"+column.name+rowId+"'";
	
	if(value)
	{
		cell+=" type='text' value='"+value+"'";
	}
	else if(column.value)
	{
		cell+=" type='text' value='"+column.value+"'";
	}
	else
	{
		cell+=" type='text' value=''";
	}
	if(column.disabled||status=="read")
	{
		cell+=" disabled='disabled'";
	}
	if(column.hidden)
	{
		cell+=" style=\"display:none;\"";
	}
	cell+="/>";
	return cell;
}
/**
 * 构建整数控件
 * @param column 列
 * @param rowId 行id
 * @param value 值
 * @param status 单元格的状态
 * @return
 */
function createInt(column,rowId,value,status)
{
	var cell="<input name='"+column.name+rowId+"'";
	if(value)
	{
		cell+=" type='text' value='"+value+"'";
	}
	else if(column.value)
	{
		cell+=" type='text' value='"+column.value+"'";
	}
	else
	{
		cell+=" type='text' value=''";
	}
	if(column.disabled||status=="read")
	{
		cell+=" disabled='disabled'";
	}
	cell+=" οnkeyup='var express=/^\\d+$/;if(!express.test(this.value))this.value=\"\";'";
	if(column.hidden)
	{
		cell+=" style=\"display:none;\"";
	}
	cell+="/>";
	return cell;
}
/**
 * 构建小数控件
 * @param column 列
 * @param rowId 行id
 * @param value 值
 * @param status 单元格的状态
 * @return
 */
function createNumber(column,rowId,value,status)
{
	var cell="<input name='"+column.name+rowId+"'";
	if(value)
	{
		cell+=" type='text' value='"+value+"'";
	}
	else if(column.value)
	{
		cell+=" type='text' value='"+column.value+"'";
	}
	else
	{
		cell+=" type='text' value=''";
	}
	if(column.disabled||status=="read")
	{
		cell+=" disabled='disabled'";
	}
	cell+=" οnkeyup='if(isNaN(this.value))this.value=\"\";'";
	if(column.hidden)
	{
		cell+=" style=\"display:none;\"";
	}
	cell+="/>";
	return cell;
}
/**
 * 构建日期控件
 * @param column 列
 * @param rowId 行id
 * @param value 值
 * @param status 单元格的状态
 * @return
 */
function createDate(column,rowId,value,status)
{
	var cell="<input name='"+column.name+rowId+"'";
	if(value)
	{
		cell+=" type='text' value='"+value+"'";
	}
	else if(column.value)
	{
		cell+=" type='text' value='"+column.value+"'";
	}
	else
	{
		cell+=" type='text' value=''";
	}
	if(column.disabled||status=="read")
	{
		cell+=" disabled='disabled'";
	}
	if(column.size)
	{
		cell+=" size="+column.size;
	}
	else
	{
		cell+=" size=14";
	}
	cell+=" οnclick='calendar();'";
	if(column.hidden)
	{
		cell+=" style=\"display:none;\"";
	}
	cell+="/>";
	cell+="<img src='images/datePicker/datePicker.gif' align='center'";
	if(column.hidden)
	{
		cell+=" style=\"display:none;\"";
	}
	cell+="/>";
	return cell;
}
/**
 * 构建下拉列表控件
 * @param column 列
 * @param rowId 行id
 * @param value 值
 * @param status 单元格的状态
 * @return
 */
function createCombox(column,rowId,value,status)
{
	var cell="<select name='"+column.name+rowId+"'";
	if(value)
	{
		cell+=" value='"+value+"'";
	}
	else if(column.value)
	{
		cell+=" value='"+column.value+"'";
	}
	else
	{
		cell+=" value=''";
	}
	if(column.disabled||status=="read")
	{
		cell+=" disabled='disabled'";
	}
	if(column.hidden)
	{
		cell+=" style=\"display:none;\"";
	}
	cell+="/>";
	if(column.data && column.data.length>0)
	{
		for(var i=0;i<column.data.length;i++)
		{
			cell+="<option value='"+column.data[i].value;
			cell+="'>";
			cell+=column.data[i].label;
			cell+="</option>";
		}
	}
	
	cell+="</select>";
	return cell;
}
/**
 * 构建参照控件
 * @param column 列
 * @param rowId 行id
 * @param value 值
 * @param status 单元格的状态
 * @return
 */
function createRefer(column,rowId,value,status)
{
	var cell="<input name='"+column.name+rowId+"'";
	if(value)
	{
		cell+=" type='text' value='"+value+"'";
	}
	else if(column.value)
	{
		cell+=" type='text' value='"+column.value+"'";
	}
	else
	{
		cell+=" type='text' value=''";
	}
	if(column.disabled||status=="read")
	{
		cell+=" disabled='disabled'";
	}
	if(column.size)
	{
		cell+=" size="+column.size;
	}
	else
	{
		cell+=" size=14";
	}
//	cell+=" readonly='true'";
	if(column.hidden)
	{
		cell+=" style=\"display:none;\"";
	}
	cell+=" οndblclick=\""+column.ondblclick+"\"/>";
	cell+="<img src='images/refer/refer.jpg'";
	if(column.hidden)
	{
		cell+=" style=\"display:none;\"";
	}
	cell+="/>";
	return cell;
}
/**
 * 删除行
 *@param id 表格id
 *@param columns 汇总列数组名称
 */
function deleteRowForTable(id)
{
   var isHbar=get(id,'isHbar');//取出全局变量
   var table=document.getElementById(id);
   var first_table=document.getElementById("first_"+id);
   if(isHbar)
   {
	  if(table.rows.length==3)
	  {
		 return;
	  }
	  table.deleteRow(table.rows.length-3);
	  first_table.deleteRow(first_table.rows.length-3);
   }
   else
   {
	  if(table.rows.length==2)
	  {
		 return;
	  }
	  table.deleteRow(table.rows.length-2);
	  first_table.deleteRow(first_table.rows.length-2);
   }
   sumRowForTable(id);
   block_scroll(id);
}

/**
 *汇总行
 *@param id 表格id
 *@param columns 汇总列数组
 */
function sumRowForTable(id)
{
   var columns=get(id,'sum_columns');
   var isHbar=get(id,'isHbar');
   if(columns==undefined||columns.length==0)
   {
        return;
   }
   var sumTR=new Array();//汇总行临时数据
   var table=document.getElementById(id);
   var sum_table=document.getElementById("sum_"+id);
   if((isHbar&&table.rows.length==3)||(!isHbar&&table.rows.length==2))
   {
	   for(var i=0;i<columns.length;i++)
	   {
		   sum_table.rows[0].cells[columns[i]].innerHTML=' ';
	   }
	   return;
   }
   var length=table.rows.length-1;
   if(isHbar)
   {
	   length=table.rows.length-2;
   }
   for(var i=1;i<length;i++)
   {
       for(var j=0;j<columns.length;j++)
       {
          var value=table.rows[i].cells[columns[j]].childNodes[0].value;
          if(!checkValueForTable(value))
          {
             value="0";
          }
          if(sumTR[j]==undefined)
          {
              sumTR[j]=value;
          }
          else if(sumTR[j]!="")
          {
              sumTR[j]=parseFloat(sumTR[j])+parseFloat(value);
          }
       }
   }
   //填充汇总行
   for(var i=0;i<columns.length;i++)
   {
	   sum_table.rows[0].cells[columns[i]].innerHTML=sumTR[i];
   }
}
/**
 *检查value是否为数字,返回true是数字,返回false为字符串
 *@param value要检查的值
 */
function checkValueForTable(value)
{
  if(value && value.length>0)
  {
    var newValue=value.replace(/\s+/g,"");
    value=newValue;
  }
  else
  {
	  return false;
  }
  if(value.length>0 && value.indexOf('.')!=-1)
  {//判断是否是小数
	  var express=/^\d+.\d+$/;//匹配小数
	  if(express.test(value)){
	    return true;
	  }
	  else
	  {
		  return false;
	  }
  }
  else
  {
	  var express=/^\d+$/;
	  if(express.test(value))
	  {
		  return true;
	  }
	  else
	  {
		  return false;
	  }
  }
  return false; 
}
/**
 * 构建表格以及滚动条
 * @param id 表格id
 * @param parentId 父节点,将建构建好的表格节点添加到父节点中
 * @param width 表格宽度
 * @param height 表格高度
 * @param ondblclick 表格双击事件
 * @param html (构建好的表格=序列号表格+表头表格+数据表格+汇总表格)
 * @param parentNode和parentId类似都用于追加构建好的动态表格对象
 * @return
 */
function execute(id,parentId,width,height,html,parentNode)
{
	var first_object=null;//第一列,序数表格
	var header_object=null;//表头
	var data_object=null;//数据表格
	var sum_object=null;//汇总表格
	var hbar_object=null;//横向滚动条
	var vbar_object=null;//纵向滚动条
	var current_row=null;//当前选中行
	var mainFrame=document.createElement("DIV");
	mainFrame.id="DIV_"+id;
	mainFrame.style.width=width;
	mainFrame.style.height=height;
	mainFrame.className="datagrid";
	mainFrame.οnmοusedοwn=function (e){//鼠标按下事件
		e=e||window.event;
		selectedRow(e,id);//选中行
	}
	mainFrame.innerHTML=html;
	/*
	 * 添加滚动事件,根据IE的冒泡特性子节点事件触发自后如果父节点也有相同的事件
	 * 就会接着执行父节点的事件
	 */
	addScrollEvent(mainFrame,id);
	//构建横向滚动条
	var hbar=document.createElement("DIV");
	hbar.id="hbar";
	hbar.style.position="absolute";
	hbar.style.width="100%";
	hbar.style.height="17px";
	hbar.style.overflowX="auto";
	hbar.style.top=height-17;
	hbar.style.zIndex="10";
	hbar.οnscrοll=function(){
		h_scroll(id);//横向滚动
	}
	hbar.innerHTML="<div style=\"width:100%;height:1px;overflow-y:hidden;\"> </div>";
	//构建纵向滚动条
	var vbar=document.createElement("DIV");
	vbar.id="vbar";
	vbar.style.position="absolute";
	vbar.style.width="17px";
	vbar.style.height="100%";
	vbar.style.overflowY="auto";
	vbar.style.left=width-17;
	vbar.style.zIndex="10";
	vbar.οnscrοll=function(){
		v_scroll(id);//纵向滚动
	}
	vbar.innerHTML="<div style=\"width:1px;height:100%;overflow-x:hidden;\"> </div>";
	//将表格和滚动条组合在一起
	mainFrame.appendChild(hbar);
	mainFrame.appendChild(vbar);
	//将构建好的表格节点追加到父节点中
	if(parentNode)
	{
		parentNode.appendChild(mainFrame);
	}
	else
	{
		document.getElementById(parentId).appendChild(mainFrame);
	}
	first_object=document.getElementById("first_"+id);//第一列,序数表格
	header_object=document.getElementById("header_"+id);//表头
	data_object=document.getElementById(id);//数据表格
	sum_object=document.getElementById("sum_"+id);//汇总表格
	hbar_object=hbar;//横向滚动条
	vbar_object=vbar;//纵向滚动条
	/*
	 * 注册全局变量
	 */
	put(id, 'first_object', first_object);
	put(id,'header_object',header_object);
	put(id,'data_object',data_object);
	put(id,'sum_object',sum_object);
	put(id,'hbar_object',hbar_object);
	put(id,'vbar_object',vbar_object);
	var bt=getCurrentStyle(mainFrame,"borderTopWidth");
	var bb=getCurrentStyle(mainFrame,"borderBottomWidth");
	var bl=getCurrentStyle(mainFrame,"borderLeftWidth");
	var br=getCurrentStyle(mainFrame,"borderRightWidth");
	hbar_object.style.top=parseInt(hbar_object.style.top)-parseInt(bt)-parseInt(bb);
	vbar_object.style.left=parseInt(vbar_object.style.left)-parseInt(bl)-parseInt(br);
	block_scroll(id);//设置滚动块
}
/**
 * 当鼠标按下时选中行
 * @param e
 * @return
 */
function selectedRow(e,id)
{
	var td_object=e.srcElement?e.srcElement:e.target;
	if(td_object.parentNode.tagName=="TR")
	{
		var tr_object=td_object.parentNode;
		var rowIndex=tr_object.rowIndex;//行索引
		var current_row=get(id, 'current_row');
		var data_object=get(id,"data_object");
		if(current_row!=null)
		{//取消之前的选中行状态
			data_object.rows[rowIndex].className="";
		}
		//重新设置选中行状态
	//	data_object.rows[rowIndex].className="selectedrow";
		current_row=rowIndex;
		put(id,'current_row',current_row);
	}
}
/**
 * 添加滚动事件监听器
 * @param element要添加事件的父节点
 * @return
 */
function addScrollEvent(element,id)
{
	var handler=function(e)
	{
		mouseScrollEvent.call(this, e,id)//由this调用mouseScrollEvent便于参数传递
	}
	if(document.attachEvent)
	{//微软自定义的添加事件监听器
		element.attachEvent("onmousewheel",handler);
	}
	else
	{//W3C规范定义的添加事件监听器
		element.addEventListener("DOMMouseScroll",handler,false);
	}
}
/**
 * 鼠标轮滚动事件和列表事件
 * @param e
 * @return
 */
function mouseScrollEvent(e,id)
{
	e=e||window.event;
	var vbar_object=get(id, 'vbar_object');
	if(e.wheelDelta<=0 || e.detail>0)
	{
		vbar_object.scrollTop+=18;//设置滚动步长为一行的高度
	}
	else
	{
		vbar_object.scrollTop-=18;
	}
}
/**
 * 横向滚动
 * @return
 */
function h_scroll(id)
{
	var hbar_object=get(id,'hbar_object');
	var header_object=get(id, 'header_object');
	var data_object=get(id,'data_object');
	var sum_object=get(id,'sum_object');
	header_object.style.left=-(hbar_object.scrollLeft);
	data_object.style.left=-(hbar_object.scrollLeft);
	sum_object.style.left=-(hbar_object.scrollLeft);
}
/**
 *纵向滚动
 * @return
 */
function v_scroll(id)
{
	var vbar_object=get(id,'vbar_object');
	var first_object=get(id,'first_object');
	var data_object=get(id,'data_object');
	first_object.style.top=-(vbar_object.scrollTop);
	data_object.style.top=-(vbar_object.scrollTop);
}
/**
 * 取出当前元素非style定义的样式
 * @param element
 * @param property
 * @return
 */
function getCurrentStyle(element,property)
{
	if(element.currentStyle)
	{//元素中非style定义的样式,包括内嵌样式和外部样式表中定义的样式
		return element.currentStyle[property];
	}
	else if(window.getComputedStyle)
	{//firefox的方式
		property=property.replace(/([A-Z])/g, "-$1").toLowerCase();
		return window.getComputedStyle(element,null).getPropertyValue(property);
	}
	else
	{
		return null;
	}
}
/**
 * 设置滚动块
 * @return
 */
function block_scroll(id)
{
	var hbar_object=get(id,'hbar_object');
	var vbar_object=get(id,'vbar_object');
	var data_object=get(id,'data_object');
	hbar_object.style.display="block";
	vbar_object.style.display="block";
	hbar_object.childNodes[0].style.width=data_object.offsetWidth;
	vbar_object.childNodes[0].style.height=data_object.offsetHeight;
	if(hbar_object.childNodes[0].offsetWidth<=hbar_object.offsetWidth)
	{
		hbar_object.style.display="none";
	}
	if(vbar_object.childNodes[0].offsetHeight<=vbar_object.offsetHeight)
	{
		vbar_object.style.display="none";
	}
}


/*

  *样式定义

*/

/*datagrid 样式*/
.datagrid {position:relative;background:white;margin:0px;padding:0px;overflow:hidden;border:1px inset;-moz-user-select:none;}
/*datagrid 表格全局样式*/
.datagrid table {table-layout:fixed;margin:0px;}
.datagrid table td {height:18px;cursor:default;font-size:12px;font-family:verdana;text-indent:2px;border-right:1px solid #cccccc;border-bottom:1px solid #cccccc;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;word-break:keep-all;}
.datagrid table td .arrow {font-size:8px;color:#808080;}
.datagrid table .lastdata {border-right:none;}
.datagrid table .column {cursor:default;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}
.datagrid table .over {cursor:default;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}
.datagrid table .sortdown {cursor:default;background:buttonface;border-right:1px solid #ffffff;border-bottom:1px solid #ffffff;border-left:1px solid #404040;border-top:1px solid #404040;position:relative;left:1px;}
.datagrid table .dataover {background:#FAFAFA;}
.datagrid table .firstcolumn {width:30px;text-indent:0px;text-align:center;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}
.datagrid table .lastcolumn {width:17px;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}
/*datagrid 选定行样式*/
.datagrid table .selectedrow {background:highlight;color:white;}
/*datagrid 表头样式*/
.titlecolumn {width:100%;position:absolute;top:0px;left:0px;z-index:3;}
/*datagrid 左边栏样式*/
.slidecolumn {width:30px;position:absolute;top:0px;left:0px;z-index:2;}
.slidecolumn td {width:30px;text-indent:0px;text-align:center;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}
/*datagrid 内容表体样式*/
.datacolumn {width:100%;position:absolute;top:0px;left:0px;}
.datacolumn td {top:0px;left:0px;margin:0px;padding:0px}
.datacolumn td input {margin:0px;border:0px #cccccc solid;}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值