01javascript核心編程表格排序及拖動

北風(fēng)網(wǎng)項目培訓(xùn)第5講：表格排序及JS拖動講師：風(fēng)舞煙JavaScript-JQuery系列全程精通+圖書館管理系統(tǒng)實戰(zhàn)]目標(biāo)數(shù)組排序(基礎(chǔ))對單列的表格排序?qū)Χ嗔械谋砀衽判驅(qū)Σ煌瑪?shù)據(jù)類型進行排序高級排序模擬拖動表格排序一、數(shù)組排序例：

vararr=[3,32,5,34];arr.sort();alert(arr.toString());//output“3,32,34,5”問題：如何實現(xiàn)正確的排序?一個基本的比較函數(shù):functioncomparison_function(value1,value2){if(value1<value2)return-1elseif(value1>value2)return1elsereturn0}//說明：返回1代表升序,返回-1代表降序,返回0代表相等表格排序vararr=[3,32,5,34];arr.sort(comparison_function);alert(arr.toString());//output“3,5,32,34”如果要降序？functioncomparison_function(value1,value2){if(value1<value2)return1elseif(value1>value2)return-1elsereturn0}表格排序vararr=[3,32,5,34];arr.sort(comparison_function);alert(arr.toString());//output“34,32,5,3”reverse()方法vararr=[3,32,5,34];arr.sort(comparison_function);alert(arr.toString());//output“34,32,5,3”arr.reverse();alert(arr.toString());//output“3,5,32,34”說明：如果數(shù)組已經(jīng)以一種順序排序了，使用reverse()方法將其按照相反的順序排序，要比再次調(diào)用sort()快得多表格排序二、對單列的表格排序

Demo1

Demo1_Code如何獲取td中的值<tableborder="1"id="table1"><thead><tr> <th>firstName</th> </tr> </thead> <tbody> <tr> <td>zhang</td> </tr><tr> <td>wang</td> </tr> </tbody></table>表格排序varoTable=document.getElementById(“table1”);varoTbody=oTable.tBodies[0];varcolDataRows=oTbody.rows;varname=colDataRows[0].cells[0].firstChild.nodeValue;比較函數(shù)://升序

functioncomparisonTRs(oTR1,oTR2){varvalue1=oTR1.cells[0].firstChild.nodeValue; varvalue2=oTR2.cells[0].firstChild.nodeValue; if(value1<value2) return-1 elseif(value1>value2) return1 else return0}表格排序functionSortTable(sTableID) { varoTable=document.getElementById(sTableID); varoTBody=oTable.tBodies[0]; varcolDataRows=oTBody.rows; ... }問題：colDataRows是DOM集合，不是數(shù)組，沒有sort()方法，解決方案是創(chuàng)建一個數(shù)組，并將<tr/>元素放入其中，對其排序，最后使用DOM將其按順序逐個放置表格排序改進一：functionSortTable(sTableID) { varoTable=document.getElementById(sTableID); varoTBody=oTable.tBodies[0]; varcolDataRows=oTBody.rows; varoTRs=newArray(); for(vari=0;i<colDataRows.length;i++) { aTRs.push(colDataRows[i]); } aTRs.sort(comparisonTRs); .... }表格排序改進二：functionSortTable(sTableID) { varoTable=document.getElementById(sTableID); varoTBody=oTable.tBodies[0]; varcolDataRows=oTBody.rows; varoTRs=newArray(); for(vari=0;i<colDataRows.length;i++) { oTRs.push(colDataRows[i]); } oTRs.sort(comparisonTRs); varoFragment=document.createDocumentFragment(); for(vari=0;i<oTRs.length;i++) { oFragment.appendChild(oTRs[i]); } oTBody.appendChild(oFragment); }表格排序三、對多列表格進行排序

Demo2

Dem2_Code表格排序<tableborder="1"id="tblSort"><thead><tr><thonclick="sortTable('tblSort',0)"style="cursor:pointer">LastName</th><thonclick="sortTable('tblSort',1)"style="cursor:pointer">FirstName</th></tr></thead><tbody><tr><td>Smith</td><td>John</td></tr><tr><td>Johnson</td><td>Betty</td></tr>表格排序<tr><td>Henderson</td><td>Nathan</td></tr><tr><td>Williams</td><td>James</td></tr><tr><td>Gilliam</td><td>Michael</td></tr><tr><td>Walker</td><td>Matthew</td></tr></tbody></table>表格排序比較函數(shù)生成器：

functiongenCompareTo(iCol){ returnfunctioncompareTRs(oTR1,oTR2) { varsValue1=oTR1.cells[iCol].firstChild.nodeValue; varsValue2=oTR2.cells[iCol].firstChild.nodeValue; returnsValue1.localCompare(sValue2); } }表格排序定義好這個函數(shù)后，就可根據(jù)需要排序的列生成相應(yīng)的比較函數(shù)了varcompareTRs=genCompareTo(0);varcompareTRs1=genCompareTo(1);varcompareTRs2=genCompareTo(2);對某列排序aTRs.sort(genCompareTo(0));//對第一列排序aTRs.sort(genCompareTo(1));//對第二列排序aTRs.sort(genCompareTo(2));//對第三列排序表格排序四、對不同數(shù)據(jù)類型進行排序在很多情況下，需要進行排序的列是包含各種不同的數(shù)據(jù)類型的，因為DOM的文本節(jié)點只是字符串，這意味著進行任何排序之前，必須對數(shù)據(jù)進行轉(zhuǎn)換。

Demo3

Demo3_Code表格排序1、創(chuàng)建轉(zhuǎn)換函數(shù)

functionconvert(sValue,sDataType){switch(sDataType){case"int": returnparseInt(sValue); case"float": returnparseFloat(sValue); case"date": returnnewDate(Date.parse(sValue)); default returnsValue.toString();}}表格排序2、修改代碼：

functiongenCompareTo(iCol,sDataType){ returnfunctioncompareTRs(oTR1,oTR2) { varsValue1=convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType); varsValue2=convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType); if(sValue1<sValue2) { return-1; }elseif(sValue1>sValue2) { return1; }else{ return0; } }}表格排序高級排序問題：如果表格中出現(xiàn)鏈接、圖像或某種HTML的內(nèi)容，而用戶仍希望對其進行排序。最常見的情況也許就是包含圖標(biāo)的列.解決方案：

Demo4

Demo4_Code1、候選值表格中的每個單元格必須包含可排序的值，也就是說至少有一個值屬于以下數(shù)據(jù)類型:字符串、整形、浮點數(shù)和日期,因為HTML代碼不能直接被轉(zhuǎn)化為這些數(shù)據(jù)類型，所以需指定一個候選值?？梢酝ㄟ^以下方式實現(xiàn)：如：<tdvalue=“blue”><imgsrc=“blueimag.gif”/></td>表格排序排序函數(shù)functiongenCompareTo(iCol,sDataType){ returnfunctioncompareTRs(oTR1,oTR2) { varsValue1; varsValue2; if(oTR1.cells[iCol].getAttribute("value")) { sValue1=convert(oTR1.cells[iCol].getAttribute("value"),sDataType); sValue2=convert(oTR2.cells[iCol].getAttribute("value"),sDataType); }else { sValue1=convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType); sValue2=convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType); }表格排序 if(sValue1<sValue2) { return-1; }elseif(sValue1>sValue2) { return1; }else{ return0; } }}模擬托放模擬拖放1、經(jīng)典的鼠標(biāo)拖尾

演示模擬托放核心代碼：<scripttype="text/javascript">functionhandleMouseMove(){ varoEvent=window.event;varoDiv=document.getElementById("div1");oDiv.style.left=oEvent.clientX;oDiv.style.top=oEvent.clientY;}</script>模擬拖動

演示核心代碼：<body><p>Trydraggingtheredsquare.</p><p><divid="div1"onmousedown="handleMouseDown()"></div></p></body><styletype="text/css">#div1{background-color:red;height:100px;width:100px;position:absolute;}</style>functionhandleMouseMove(){varoEvent=window.event;varoDiv=document.getElementById(“div1”)；oDiv.style.left=oEvent.clientX;oDiv.style.top=oEvent.clientY;}問題：第一次拖動時，會產(chǎn)生一個偏移，讓用戶感覺不自然，改進：

演示改進核心代碼：variDiffX=0;variDiffY=0;functionhandleMouseDown(){varoEvent=window.event;varoDiv=document.getElementById("div1");iDiffX=oEvent.clientX