01javascript核心编程表格排序及拖动

北风网项目培训第5讲：表格排序及JS拖动讲师：风舞烟JavaScript-JQuery系列全程精通+图书馆管理系统实战]目标数组排序(基础)对单列的表格排序对多列的表格排序对不同数据类型进行排序高级排序模拟拖动表格排序一、数组排序例：

vararr=[3,32,5,34];arr.sort();alert(arr.toString());//output“3,32,34,5”问题：如何实现正确的排序?一个基本的比较函数: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”说明：如果数组已经以一种顺序排序了，使用reverse()方法将其按照相反的顺序排序，要比再次调用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;比较函数://升序

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集合，不是数组，没有sort()方法，解决方案是创建一个数组，并将<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>表格排序比较函数生成器：

functiongenCompareTo(iCol){ returnfunctioncompareTRs(oTR1,oTR2) { varsValue1=oTR1.cells[iCol].firstChild.nodeValue; varsValue2=oTR2.cells[iCol].firstChild.nodeValue; returnsValue1.localCompare(sValue2); } }表格排序定义好这个函数后，就可根据需要排序的列生成相应的比较函数了varcompareTRs=genCompareTo(0);varcompareTRs1=genCompareTo(1);varcompareTRs2=genCompareTo(2);对某列排序aTRs.sort(genCompareTo(0));//对第一列排序aTRs.sort(genCompareTo(1));//对第二列排序aTRs.sort(genCompareTo(2));//对第三列排序表格排序四、对不同数据类型进行排序在很多情况下，需要进行排序的列是包含各种不同的数据类型的，因为DOM的文本节点只是字符串，这意味着进行任何排序之前，必须对数据进行转换。

Demo3

Demo3_Code表格排序1、创建转换函数

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; } }}表格排序高级排序问题：如果表格中出现链接、图像或某种HTML的内容，而用户仍希望对其进行排序。最常见的情况也许就是包含图标的列.解决方案：

Demo4

Demo4_Code1、候选值表格中的每个单元格必须包含可排序的值，也就是说至少有一个值属于以下数据类型:字符串、整形、浮点数和日期,因为HTML代码不能直接被转化为这些数据类型，所以需指定一个候选值。可以通过以下方式实现：如：<tdvalue=“blue”><imgsrc=“blueimag.gif”/></td>表格排序排序函数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、经典的鼠标拖尾

演示模拟托放核心代码：<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;}问题：第一次拖动时，会产生一个偏移，让用户感觉不自然，改进：

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