使用javascript编写的表格控件(支持汇总，排序，滚动，分页，支持跨行跨列，附带提供List，Map)

来源：互联网发布：网络教育宣传图片编辑：程序博客网时间：2024/05/18 15:53

//////////////////////////////////////////////////////////////////////////////////////** * 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;}

//===========================================================================/** *表格操作 *@author 陈双 *@date 2012-09-26 *@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 表格id * @param cellIndex 单元格索引 * @param isMultiple 是否有勾选框 * @return Array 选中行的id值的集合 */function getSelectedCellValue(id,cellIndex,isMultiple){if(!id)return null;var values=new Array();//所有选中的id值if(isMultiple){var checkList=document.getElementsByName(id+"chbox");var rows=new Array();//选中的行集合var index=-1;if(checkList && checkList.length>0){for(var i=0;i<checkList.length;i++){if(checkList[i].checked){index++;rows[index]=checkList[i].parentNode.parentNode;}}}if(rows.length==0){alert("请选中一行！");return null;}else{for(var i=0;i<rows.length;i++){values[i]=rows[i].cells[parseInt(cellIndex)+2].innerText;}return values;}}else{var _current_row=get(id,'_current_row');if(_current_row==null){alert("请选择一行！");return null;}else{values[0]=document.getElementById(id).rows[_current_row].cells[parseInt(cellIndex)+1].innerText;return values;}}return null;}/** * 创建可编辑的表格对象，并添加到指定的父节点中 * @param id 表格名称 * @param parentId 父节点id * @param width 表格宽度 * @param height 表格高度 * @param isMultiple 多行是否有勾选框 * @param columns 表格所有的列，以数组的形式保存GridColumn对象 * @param rows 数据列表，它是以集合List的形式保存Map，其中key是name，value是值 * @param status 表格状态值: read只读，update可修改，insert新增 */function CreateTable(id,parentId,width,height,isMultiple,columns,rows){if((!id)|(!parentId)||(!width)||(!height)||(!columns)||(!rows)){return;}var _sum_columns=null;//汇总列var _isHbar=false;//是否有横向滚动条var flag=false;//默认没有跨列操作var first="";//声明第一列表var title="";//标题表var data="";//数据表var sum="";//汇总表var columnWidth=125;//默认列宽for(var i=0;i<columns.length;i++){//检查是否有跨列操作if(columns[i].colspan){flag=true;break;}}put(id, 'flag', flag);//构建标题列if(flag){//有跨列操作for(var i=0;i<2;i++){if(i==0){title="<tr><td class='firstcolumn' rowspan='2'> </td>";if(isMultiple){title+="<td class='column' width='30' rowspan='2' align='center'><input name='checkbox' type='checkbox' onclick=\"checkAllForGrid(this.checked,'"+id+"chbox');\"/></td>";}}else{title+="<tr>";}for(var j=0;j<columns.length;j++){if(columns[j].colspan){//执行跨列if(i==0){//第一行title+="<td class='column' align='center' colspan='"+columns[j].colspan+"'";if(columns[j].width){title+=" width='"+(columns[j].width*parseInt(columns[j].colspan))+"'";}else{title+=" width='"+(columnWidth*parseInt(columns[j].colspan))+"'";}title+=">"+(columns[j].label.split(",")[0])+"</td>";}else{//第二行title+="<td class='column' align='center'";if(columns[j].hidden){columns[j].width=1;title+=" style=\"border:none;\"";}if(columns[j].width){title+=" width='"+columns[j].width+"'";}else{title+=" width='"+columnWidth+"'";}title+=">"+(columns[j].label.split(",")[1])+"</td>";}}else {//执行跨行var rs=columns[j].label.indexOf(',');//是否是跨列if(i==0){//跨行操作if(rs==-1){//跨行title+="<td class='column' align='center' rowspan='2'";if(columns[j].hidden){columns[j].width=1;title+=" style=\"border:none;\"";}if(columns[j].width){title+=" width='"+columns[j].width+"'";}else{title+=" width='"+columnWidth+"'";}title+=">"+columns[j].label+"</td>";}}else{//跨列操作if(rs!=-1){//跨行title+="<td class='column' align='center'";if(columns[j].hidden){columns[j].width=1;title+=" style=\"border:none;\"";}if(columns[j].width){title+=" width='"+columns[j].width+"'";}else{title+=" width='"+columnWidth+"'";}title+=">"+(columns[j].label.split(',')[1])+"</td>";}}}}if(i==0){//最后一列title+="<td class='lastcolumn' rowspan='2'> </td></tr>";}else{title+="</tr>";}}}else{//正常情况title="<tr><td class='firstcolumn'> </td>";if(isMultiple){title+="<td class='column' width='30' align='center'><input name='checkbox' type='checkbox' onclick=\"checkAllForGrid(this.checked,'"+id+"chbox');\"/></td>";}for(var i=0;i<columns.length;i++){title+="<td class='column' align='center'";if(columns[i].hidden){columns[i].width=1;title+=" style=\"border:none;\"";}if(columns[i].width){title+=" width='"+columns[i].width+"'";}else{title+=" width='"+columnWidth+"'";}title+=" onclick=\"sortTableForGrid('"+id+"',"+i+","+isMultiple+");\"";title+=">"+columns[i].label+"<span></span></td>";}title+="<td class='lastcolumn'> </td></tr>";}if(columns&&columns.length>0){//汇总表格sum="<tr><td class='firstcolumn'>汇总</td>";if(isMultiple){sum+="<td class='column' width='30'> </td>";}for(var i=0;i<columns.length;i++){sum+="<td class='column' align='center'";if(columns[i].hidden){columns[i].width=1;sum+=" style=\"border:none;\"";}if(columns[i].width){sum+=" width='"+columns[i].width+"'";}else{sum+=" width='"+columnWidth+"'";}sum+="> </td>";}sum+="<td class='lastcolumn'> </td></tr>";}if(rows&&rows.size()>0){//构建第一列和数据表格if(flag){first="<tr><td> </td></tr>";first+="<tr><td> </td></tr>";}else{first="<tr><td> </td></tr>";}for(var i=0;i<rows.size();i++){first+="<tr><td style='border-right:none;'>"+(i+1)+"</td></tr>";data+="<tr><td class='firstcolumn' style='border-bottom-color:#cccccc;'>"+(i+1)+"</td>";if(isMultiple){data+="<td width='30' align='center'><input type='checkbox' name='"+id+"chbox'/></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+=">";data+=map.get(columns[j].name)==null?" ":map.get(columns[j].name);data+="</td>";}data+="<td class='lastdata'>";data+="<input name='rowid' type='hidden' value='"+(rowId)+"'/>";data+=" </td></tr>";}}//构建汇总列    _sum_columns=new Array();//初始化var k=0;for(var i=0;i<columns.length;i++){if(columns[i].sum&&(columns[i].type=="int"||columns[i].type=="number")){if(isMultiple){_sum_columns[k]=i+2;}else{_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);}}allWidth+=30;if(isMultiple){allWidth+=30;}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'>";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+"</table>";_execute(id, parentId, width, height, first_html+title_html+data_html+sum_html,isMultiple);sumRowForGrid(id);}/** * 列结构 * @param name名称 * @param label 标签 * @param type 类型 * @param width 宽度 * @param height 高度 * @param data 列数据来源是一个数组 * @param hidden 是否隐藏 * @param disabled 是否可用 * @param sum 是否汇总 * @param size 字符个数 * @param colspan 跨列 * @param rowspan 跨行 * @param ondblclick 鼠标双击事件 * @param drillEvent 数据钻取处理函数 */function GridColumn(name,label,type,width,height,data,hidden,disabled,sum,size,colspan,ondblclick,drillEvent){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.colspan=colspan;this.ondblclick=ondblclick;this.drillEvent=drillEvent;}/** *@param 排序 *@param id为表格id *@param index：列索引 *@param sort：asc是升序,dsc是降序 *@param isMultiple是否多行 */function sortTableForGrid(id,index,isMultiple){var flag=get(id, 'flag');var _isHbar=get(id, '_isHbar');var tr=new Array();//行集合var td=new Array();//列集合var temp;//临时单元格    var table=document.getElementById(id);    var header=document.getElementById("header_"+id);    var sort;    if(flag)    {    return;    }    if(isMultiple)    {    index+=2;    }    else    {    index+=1;    }    var html=header.rows[0].cells[index].childNodes[1].innerHTML;    if(html=="")    {       sort="asc";       header.rows[0].cells[index].childNodes[1].innerHTML="▲";    }    else if(html=="▲")    {       sort="dsc";       header.rows[0].cells[index].childNodes[1].innerHTML="▼";    }    else if(html=="▼")    {       sort="asc";       header.rows[0].cells[index].childNodes[1].innerHTML="▲";    }    var k=1;    if(isMultiple)    {    k=2;    }    for(var i=k;i<header.rows[0].cells.length-1;i++)    {       if(i!=index)       {           header.rows[0].cells[i].childNodes[1].innerHTML="";       }    }    if(_isHbar)    {    for(var i=1;i<table.rows.length-3;i++)        {           tr[i-1]=table.rows[i];           td[i-1]=table.rows[i].cells[index];        }    }    else    {    for(var i=1;i<table.rows.length-2;i++)        {           tr[i-1]=table.rows[i];           td[i-1]=table.rows[i].cells[index];        }    }        var isNumber=false;//是数字    for(var i=0;i<td.length;i++)    {       if(!checkValueForGrid(td[i].innerHTML))       {      isNumber=true;//字符串          break;       }    }    //开始比较数据    for(var i=0;i<td.length;i++)    {         for(var j=0;j<td.length;j++)         {            if(isNumber)            {//字符串比较                if(sort=="asc")                {                     if(td[i].innerHTML<td[j].innerHTML)                     {                         temp=td[i];                         td[i]=td[j];                         td[j]=temp;                     }                }                else if(sort=="dsc")                {                    if(td[i].innerHTML>td[j].innerHTML)                     {                         temp=td[i];                         td[i]=td[j];                         td[j]=temp;                     }                }            }            else            {//数字比较               if(sort=="asc")                {                     if(parseFloat(td[i].innerHTML)<parseFloat(td[j].innerHTML))                     {                         temp=td[i];                         td[i]=td[j];                         td[j]=temp;                     }                }                else if(sort=="dsc")                {                    if(parseFloat(td[i].innerHTML)>parseFloat(td[j].innerHTML))                     {                         temp=td[i];                         td[i]=td[j];                         td[j]=temp;                     }                }            }         }    }    var cellCount=table.rows[0].cells.length;    var tempTR=new Array();//临时行    for(var i=0;i<tr.length;i++)    {        var tempTD=new Array();//临时列集合        for(var j=k;j<cellCount-1;j++)        {           tempTD[j]=td[i].parentNode.cells[j].innerHTML;        }        tempTR[i]=tempTD;    }    for(var i=0;i<tr.length;i++)    {       for(var j=k;j<cellCount-1;j++)       {           tr[i].cells[j].innerHTML=tempTR[i][j];       }    }}/** *汇总行 *@param id 表格id *@param columns 汇总列数组 */function sumRowForGrid(id){   var columns=get(id,'_sum_columns');   var _isHbar=get(id,'_isHbar');   var flag=get(id,'flag');   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&&flag==false&&table.rows.length==3)||(_isHbar&&flag&&table.rows.length==4)||(!_isHbar&&flag&&table.rows.length==3)||(!_isHbar&&!flag&&table.rows.length==2))   {   for(var i=0;i<columns.length;i++)   {   sum_table.rows[0].cells[columns[i]].innerHTML=' ';   }   return;   }   var index=1;   if(flag)   {   index=2;   }   var end=table.rows.length-1;   if(_isHbar)   {    end=table.rows.length-2;   }   for(var i=index;i<end;i++)   {       for(var j=0;j<columns.length;j++)       {          var value=table.rows[i].cells[columns[j]].innerText;          if(!checkValueForGrid(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 checkValueForGrid(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 checked是否选中true为选中，false没选中 *@param name 名称 */function checkAllForGrid(checked,name){var checkList=document.getElementsByName(name);if(checkList && checkList.length>0){for(var i=0;i<checkList.length;i++){checkList[i].checked=checked;}}}/** * 构建表格以及滚动条 * @param id 表格id * @param parentId 父节点，将建构建好的表格节点添加到父节点中 * @param width 表格宽度 * @param height 表格高度 * @param ondblclick 表格双击事件 * @param html (构建好的表格=序列号表格+表头表格+数据表格+汇总表格) * @return */function _execute(id,parentId,width,height,html,isMultiple){/** * 定义构建表格需要的变量 */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.onmousedown=function (e){//鼠标按下事件e=e||window.event;_selectedRow(e,id,isMultiple);//选中行}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.onscroll=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.onscroll=function(){_v_scroll(id);//纵向滚动}vbar.innerHTML="<div style=\"width:1px;height:100%;overflow-x:hidden;\"> </div>";//将表格和滚动条组合在一起mainFrame.appendChild(hbar);mainFrame.appendChild(vbar);//将构建好的表格节点追加到父节点中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,isMultiple){if(isMultiple)return;var td_object=e.srcElement?e.srcElement:e.target;var _data_object=get(id,'_data_object');var table=document.getElementById(id);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 flag=get(id,'flag');var _isHbar=get(id,'_isHbar');if(flag){if(rowIndex==0||rowIndex==1){return;}}else{if(rowIndex==0){return;}}if(_isHbar){if(rowIndex==table.rows.length-1||rowIndex==table.rows.length-2){return;}}else{if(rowIndex==table.rows.length-1){return;}}if(_current_row!=null){//取消之前的选中行状态_data_object.rows[_current_row].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);}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;}