资源描述:
《基于jquery的表格排序》由会员上传分享,免费在线阅读,更多相关内容在工程资料-天天文库。
1、基于jquery的表格排序看了《javascript高级程序设计》里面有个表格排序的例子;觉得很有意思,所以自己用jquery的基本库做了一个,里面的概念基本和书里面的差不多很多高手也位jquery写了专门的排序库,因为自己也想尝试一下,当然运行速度实在不能接受,但是我会慢慢的把他改进的。注:这里只是拿出了一部分代码来,查看演示demo文档载入后给W添加click事件。1.$('th').click(function(){vardatel=(newDate()).getTime()vardataType=$(this).attr('dataType');找到点击对象的自定义属性
2、dataType,当然这个不符合W3C的标准是无法通过检验的,也可以用ID或者class來定义,但是我觉得这样直观点在Transitional模式下也可以正常解读.2.varindex=$('th').index(this)+l;找到被点击对象在文档中的位置加上1,加1是为了给所对应的列的td添加样式才做的。因为用:eq()只能得到td的全文档位置,而用:nth-child()的话得到的是每个td在自己的父元素里面的序列位置。3.varrow=$('tbodytr');将tbody里所有tr存到变量row.4.$.each(rowzfunction(i){arr[i]=row[
3、i]})遍历所有行讲它插入arr数组.5.if($(this).hasClass(,select')){arr.reverse()}如果这个卅被点击过那么它将会被添加select样式,如果是这样直接将原来的arr数组反向。6.else{arr.sort(sortStr(index,dataType))$('.select').removeClass();$(,td:nth-child(,+index+')').addClass('select');$(this).addClass('select')}否则,将arr用sort()方法进行排序sort()方式可以接受1个函数,这个
4、函数接受2个参数作为需要比较的数据,我在这里定义为sortStr();它有两个参数:复制代码代码如下:functionsortStr(index,dataType){returnfunction(a,b){varaText=$(a).find('td:nth-child('+index+')').text();varbText=$(b).find('td:nth-child(,+index+')').text();if(dataType!=,roomType,){aText=Parse(aText,dataType)bText=Parse(bText,dataType)retu
5、rnaText>;bText?-l:bText>;aText?l:O;}elsereturnaText」ocaIeCompare(bText)}}第一个是index,它是在click事件中获得的变量,这个变量包含了被点击的那个W的在文档中的位置是一个数字,jquert的index()方法获得对彖的位置,这个位置从0算起,这个例子中有6个先F;第二个参数是dataType,他包含每个W的属性值。sortStr()里面包含了一个比较的函数,这个函数是匿名函数,它有2个参数每个参数代表着一个,tbodytr*,(在这里a和b代表需要比较的tr)这两个参数是在包含他的函数环境中获取的,
6、sort()方法里面的参数,在这是一个函数,这个函数都会获得数组对象的元素,这个匿名函数返回对操作数组的引用。arr里面包含的一个数组,每个数组的值包含对tbody里面的tr的引用,排序函数按照返回的值对原有数组里面的元素直接进行位置的改变,varaText=$(a).find('td:nth-child('+index+')').text();获取需要比较的行里面其中一个td里面包含的文本这个就是需要比较的值,click事件中得到的index变量成为参数传递到这里就是为了得到th所对应的td的位置;复制代码代码如下:if(dataType!='roomType'){aText
7、=Parse(aText,dataType)bText=Parse(bText,dataType)returnaText>;bText?-l:bText>;aText?l:O;}如果需要排序的类型是不包含了数字和字母的话,(因为拥有roomType值的元素所包含了数字和字母),将获得的td里面的文本值和dataType传递到Parse()里面进行转换,复制代码代码如下:functionParse(data,dataType){switch(dataType){caseSum':returnp