版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)
文檔簡介
北風(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
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 新概念二家長會
- 陌陌藝人簽約合同模板
- 采購業(yè)務(wù)服務(wù)合同模板
- 退休財務(wù)勞務(wù)合同模板
- 讓我們蕩起雙槳課件
- 油脂企業(yè)租賃合同模板
- 貸款定金合同模板
- 私人租房陰陽合同模板
- 合作合同和采購合同模板
- 飯店合伙店鋪合同模板
- 小學(xué)數(shù)學(xué)小專題講座《數(shù)學(xué)教學(xué)生活化-》
- 黑龍江省哈爾濱市第四十七中學(xué)校2024-2025學(xué)年(五四制)九年級上學(xué)期9月月考語文試題
- 小學(xué)校園防欺凌班會課件
- 2024發(fā)展對象培訓(xùn)班考試題庫及答案
- 《山東省職業(yè)院校技能大賽中職組“護理技能”賽項規(guī)程》
- 《法國飲食文化》課件
- RBA管理體系程序文件(系列)
- (學(xué)校)教育領(lǐng)域群眾身邊不正之風(fēng)和腐敗問題集中整治問題自查報告及整改措施
- 江蘇省常州市金壇區(qū)2023-2024學(xué)年高二上學(xué)期期中質(zhì)量調(diào)研語文試卷(含答案)
- 醫(yī)院醫(yī)療廢物處置及分類測試題及答案
- 個人與村集體合作協(xié)議書
評論
0/150
提交評論