div table的效率 - ITeye问答

问答首页 → Web前端技术

0 0

div table的效率10

项目开始用DOJO的TABLE, 但不太好用, 我仿EXT重写了一个WIDGET,但发现,表现并不好,比如表头随滚动条滚动．我想用DIV重构，大家有谁做过啊，效率怎么样．
数据量１０００条左右，支持排序和拖动列宽．

JavaScript Ajax

2008年8月28日 23:57

youkie
10
0 0 0

1个答案按时间排序按投票排序

0 0

<html> 
 <head> 
 <title></title> 
 <style> 
 td {border-bottom:1px solid Black; border-left:1px solid Black} 
 .title {border-left:1px solid #FFFFFF; border-top:1px solid #FFFFFF; border-right:1px solid #666666; border-bottom:1px solid #666666; background:#999999; color:#FFFFFF;} 
 .left {border-left:2px solid Black} 
 .right {border-right:2px solid Black} 
 .bottom {border-bottom:2px solid Black} 
 .bottomleft {border-bottom:2px solid Black; border-left:2px solid Black} 
 .bottomright {border-bottom:2px solid Black; border-right:2px solid Black} 
 </style> 
 <script> 
 /**************************************** 
 蒋玉龙编制于2002-8-6 星期二 
 QQ:66840199 
 用时5个小时，功能：实现首行根据边框调整表格大小； 
 请保留相关信息 
 
 Powered by Stone, 2003-04-15 
 ****************************************/ 
 //记录鼠标状态, 记录鼠标按下, 记录当前列 
 var curState, curDown, curCol; 
 var oldPlace, newPlace; 
 
 function getTable(item) { 
 var obj = null; 
 do { 
 if (item.tagName=="TABLE") { 
 obj = item; 
 break; 
 } 
 item = item.offsetParent; 
 } 
 while (item != null); 
 return obj; 
 } 
 
 function calculateOffset(item, offsetName) { 
 var totalOffset = 0; 
 do { 
 totalOffset += eval('item.offset' + offsetName); 
 item = item.offsetParent; 
 } 
 while (item != null); 
 return totalOffset; 
 } 
 
 function moveCol(objCol) { 
 window.status = window.document.body.scrollLeft; 
 if (!curDown) { 
 //curCol = objCol; 
 //鼠标没有按下 
 if (window.event.x + window.document.body.scrollLeft > calculateOffset(objCol, "Left") + objCol.offsetWidth-3) { 
 //移动到了相应的部位/改变鼠标 
 curState=true; 
 window.document.body.style.cursor = "move"; 
 } 
 else { 
 curState = false; 
 window.document.body.style.cursor = "default"; 
 } 
 curCol = objCol; 
 } 
 } 
 
 function upBody() { 
 //鼠标抬起/一切恢复原状态 
 if (curState) { 
 //---------------------------调整表格-------------------------- 
 //调整条件:(层左侧+线左侧=线绝对左侧坐标)>目标的左侧坐标+20 
 newPlace = window.event.x + window.document.body.scrollLeft; 
 if (myDiv.offsetLeft + myLine.offsetLeft > calculateOffset(curCol, "Left") + 20) { 
 if (curCol.width > oldPlace - newPlace) 
 curCol.width -= oldPlace - newPlace; 
 var curTable = getTable(curCol); 
 if (curTable!=null) 
 curTable.width -= oldPlace - newPlace; 
 curCol.innerText = curCol.width; 
 } 
 //------------------------------------------------------------- 
 curState = false; 
 curDown = false; 
 myDiv.style.display = "none"; 
 window.document.body.style.cursor = "default"; 
 } 
 } 
 
 function downBody() { 
 //鼠标按下 
 if (curState) { 
 curDown = true; 
 var curTable = getTable(window.event.srcElement); 
 if (curTable!=null) { 
 //---------定位竖线---------- 
 myDiv.style.display = ""; //层可见 
 myLine.style.height = curTable.offsetHeight; 
 myLine.style.width = 1; 
 myDiv.style.left = window.event.x + window.document.body.scrollLeft - myLine.offsetLeft; 
 myDiv.style.top = calculateOffset(curTable, "Top") - myLine.offsetTop; 
 //--------------------------- 
 oldPlace = window.event.x + window.document.body.scrollLeft; 
 } 
 } 
 } 
 
 function moveBody() { 
 //鼠标移动 
 if (curDown) { 
 //鼠标按下状态 
 myDiv.style.left = window.event.x + window.document.body.scrollLeft - myLine.offsetLeft; 
 window.document.body.style.cursor = "move"; 
 } 
 } 
 
 function selectBody() { 
 //鼠标选择文本[不支持动态调整？] 
 if (curDown) //鼠标按下于调整状态 
 window.event.returnValue = false; 
 } 
 
 function sort(objCol) { 
 var txt = objCol.innerHTML; 
 var sortAsc = false; 
 if (txt.charAt(txt.length - 1)=='↓') 
 sortAsc = true; 
 var objTable = getTable(objCol); 
 for (var i = 0; i < objTable.rows(0).cells.length; i++) { 
 txt = objTable.rows(0).cells(i).innerHTML; 
 if ((txt.charAt(txt.length - 1)=='↓') || (txt.charAt(txt.length - 1)=='↑')) 
 objTable.rows(0).cells(i).innerHTML = txt.substring(0, txt.length - 1); 
 } 
 objCol.innerHTML += (sortAsc?"↑":"↓") 
 sortTable(objCol, sortAsc); 
 } 
 function sortTable(objCol, sortAsc) { 
 if (objCol.tagName == "TD") { 
 var objTable = getTable(objCol); 
 var i,j,k; 
 var intCol = objCol.cellIndex; 
 var boltmp, tmp; 
 for (i = 1; i < objTable.rows.length; i++) 
 for (j = i + 1; j < objTable.rows.length; j++) { 
 boltmp = (objTable.rows(i).cells(intCol).innerText >= objTable.rows(j).cells(intCol).innerText); 
 if ((sortAsc && !boltmp) || (!sortAsc && boltmp)) 
 for (k = 0; k < objTable.rows(0).cells.length; k++) { 
 tmp = objTable.rows(i).cells(k).innerHTML; 
 objTable.rows(i).cells(k).innerHTML = objTable.rows(j).cells(k).innerHTML; 
 objTable.rows(j).cells(k).innerHTML = tmp; 
 } 
 } 
 } 
 } 
 
 function setTableBorder(objTable) { 
 var i,j; 
 for (i = 0; i < objTable.rows.length; i++) 
 for (j = 0; j < objTable.rows(i).cells.length; j++) { 
 if (objTable.rows(i).cells(j).innerHTML == "") 
 objTable.rows(i).cells(j).innerHTML = "&nbsp;"; 
 objTable.rows(i).cells(j).className = (i==0?"title":(i == (objTable.rows.length-1)?"bottom":"") + (j==0?"left":"") + (j == (objTable.rows(i).cells.length-1)?"right":"")); 
 } 
 } 
 </script> 
 </head> 
 <body onmousedown="downBody()" onmouseover="moveBody()" onmouseup="upBody()" onselectstart="selectBody()"> 
 <div id="myDiv" style="display:none; height:201px; left:12px; position:absolute; top:50px; width:28px; z-index:1"> 
 <hr id="myLine" width="1" size="200" noshade color="black"> 
 </div> 
 <table id="myTable" cellpadding="0" cellspacing="0" width="300"> 
 <tr> 
 <td width="100" onclick="sort(this)" onmousemove="moveCol(this)">01</td> 
 <td width="100" onclick="sort(this)" onmousemove="moveCol(this)">02</td> 
 <td width="100" onclick="sort(this)" onmousemove="moveCol(this)">03</td> 
 </tr> 
 <tr> 
 <td onmousemove="moveCol(this)">04</td> 
 <td onmousemove="moveCol(this)">09</td> 
 <td onmousemove="moveCol(this)">10</td> 
 </tr> 
 <tr> 
 <td>05</td> 
 <td>08</td> 
 <td>11</td> 
 </tr> 
 <tr> 
 <td>06</td> 
 <td>07</td> 
 <td>12</td> 
 </tr> 
 </table> 
 <br> 
 <br> 
 <table id="myTable1" cellpadding="0" cellspacing="0" width="300"> 
 <tr> 
 <td width="100" onclick="sort(this)" onmousemove="moveCol(this)">01</td> 
 <td width="100" onclick="sort(this)" onmousemove="moveCol(this)">02</td> 
 <td width="100" onclick="sort(this)" onmousemove="moveCol(this)">03</td> 
 </tr> 
 <tr> 
 <td>04</td> 
 <td>05</td> 
 <td>06</td> 
 </tr> 
 <tr> 
 <td>07</td> 
 <td>08</td> 
 <td>09</td> 
 </tr> 
 <tr> 
 <td>10</td> 
 <td>11</td> 
 <td>12</td> 
 </tr> 
 <tr> 
 <td>13</td> 
 <td>14</td> 
 <td>15</td> 
 </tr> 
 </table> 
 <script> 
 setTableBorder(myTable); 
 setTableBorder(myTable1); 
 </script> 
 </body> 
 </html>

不知道这段代码对你有没用,网上找到,支持排序和表头拖拉列宽

2008年9月01日 12:49