使用javascript编写的可编辑表格控件(支持汇总,滚动,增行,删行)
来源:互联网 发布:分布式数据库一致性 编辑:程序博客网 时间:2024/05/18 01:59
//////////////////////////////////////////////////////////////////////////////////////** * 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' onclick=\"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.ondblclick=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+=" onkeyup='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+=" onkeyup='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+=" onclick='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+=" ondblclick=\""+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.onmousedown=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.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);//将构建好的表格节点追加到父节点中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;}
- 使用javascript编写的可编辑表格控件(支持汇总,滚动,增行,删行)
- Java实现的自定义可编辑表格控件(支持汇总、滚动、增行、删行、小数、日期、下拉列表、参照等)
- 使用javascript编写的表格控件(支持汇总,排序,滚动,分页,支持跨行跨列,附带提供List,Map)
- 可编辑的 HTML JavaScript 表格控件 DataGrid
- 可编辑的 HTML JavaScript 表格控件 DataGrid II
- 可编辑的 HTML JavaScript 表格控件 DataGrid
- 可编辑的 HTML JavaScript 表格控件 DataGrid
- 可编辑的 HTML JavaScript 表格控件 DataGrid
- 可编辑的 HTML JavaScript 表格控件 DataGrid
- 可编辑的 HTML JavaScript 表格控件 DataGrid
- Javascript:可编辑表格
- 做一个可编辑的表格控件
- 做一个可编辑的表格控件
- 做一个可编辑的表格控件
- 做一个可编辑的表格控件
- 做一个可编辑的表格控件
- Ext可编辑的表格控件
- 编写可编辑的List控件
- 天使湾推荐 - 互联网创业者最值得关注的科技站点
- 关于”云计算“
- input用JavaScript实现回车响应事件,兼容各浏览器
- nginx 扩展 ngx_lua 的数据量连接池(1)
- 开发者之选:李彦宏的成功方程式
- 使用javascript编写的可编辑表格控件(支持汇总,滚动,增行,删行)
- 无线局域网概念介绍
- CLR无法从COM 上下文*****转换为COM上下文*****,这种状态已持续60秒。
- iphone 字符串转16进制
- 内存对齐的规则以及作用
- 汉诺塔-递归算法
- svchost.exe 上传下载占用大量资源
- Js获取元素位置
- Android中Toast的用法简介