来自 新葡亰服务器 2019-11-27 16:48 的文章
当前位置: 澳门新葡亰app > 新葡亰服务器 > 正文

tr中必需含有可点击排序的因素th

华语汉字排序、 中德文混合排序、 数据大小排序、 文件类型排序 日期时间排序、 价格排序、 普通话混合数字排序; 使用办法:文书档案载入后new tableListSort。 选择多少个参数:第叁个参数为必得的,能够是字符串ID,也足以是table对象;首个可选参数,此参数为贰个对象,{data:index,fileType:index,fn:function(){}};对象有多少个可选的性质,第叁个和首个为扩展排序的数据类型,第多个参数为排序后需求实践的函数;假若表格数据中有亟待排序的数量大小,如1KB 1MB 1GB 那样的数据类型的话,能够{data:index};index为表格需排序的某一列的下标值,从0最早计数,如表格的第二名列1KB MB那样的数据类型,{data:2};对象的第一个天性{fileType:index},此扩张排序为文件类型,如xml,jpg,exe那样的后缀名。index相像为列的下标值。 对象的第多个可选属性为二个排序后需执行的函数{fn:function(){实施的代码}}。 HTML代码中必须的要素为:table成分,table元素的第意气风发行必须使用thead成分蕴含tr,tr中必得带有可点击排序的成分th;thead下一个sibling成分必需为tbody,tbody中需包罗tr。排序数据应用td富含,table也能够包蕴caption和tfoot。 1十一月 二二十十九日, 更新:加多了排序后升序降序的标识Logo。 自定义增加class 假设不思考增加此属性可感到不设置,鼠标准样板式mymickey在剧本里面加好了不须求CSS增加。 table.Index为上贰回被排序过的坐标值;table.Index开端化为null; fn:fini函数仅为排序过后需求推行的函数,固然未有它也是能够排序的,这里传递一个排序过后须要奉行的函数仅仅是为了抬高排序down和up的标记Logo. 以下的源代码: 复制代码 代码如下: window.onload=function{ table.th[num].className= table.th[num].className=='selectUp'? 'selectDown':'selectUp';//切换标示Logo each{//highLight高亮当前排序的列 o.cells[num].className='highLight'; if(table.Index!=null&&table.Index!=num){ o.cells[table.Index].className=''; } }); if(table.Index!=null&&table.Index!=num){//其它的被点击 原先的被吊销表示Logo table.th[table.Index].className=''; } } var table=new tableListSort,{data:8,fileType:9,fn:fini})//文书档案载入后new传递参数 } 复制代码 代码如下: var Class={ create:function{ this.init.apply } } } function each{ for(var j=0,len=o.length;ji;i++){ this.th[i].onclick=this.Sort.bind//使用bind间接保持四个下标值,传递过去 this.th[i].style.cursor='pointer'; } this.re=//g;// 替换的正则表明式 this.dataIndex&&subData(this.Row,this.dataIndex,this.Row.length); }, Sort:function{ //var date1=new Date//测验用于排序时间 假诺想测量试验排序时间请讲注释去掉 //此外的被点击 原先的被裁撤表示Logo(this.Index!=null&&this.Index!=num)&&this.th[this.Index].setAttribute; this.th[num].getAttribute!='ed'? this.rowArr.sort(this.naturalSort.bind:this.rowArr.reverse(); //假若当前指标被点击过,使用reverse()对应的列直接反序,不然排序,因为使用的是预订义的sort()方法,所以风姿浪漫旦要让实践排序的函数 //知道须要排序的列的下标值的话,bind()传递num过去,this来调用; var frag=document.createDocumentFragment();//制造文书档案碎片 each(this.rowArr,function{frag.appendChild;//将排序后的数组插入文书档案碎片 this.tbody.appendChild;//碎片插入节点 this.th[num].setAttribute; //$.innerHTML=-date1;//测验用于排序时间 假设想测量检验排序时间请讲注释去掉 this.finish;//排序后实施的函数 this.Index=num;//被排序过的坐标值 }, naturalSort:function { //决断是不是是数据排序 要是是的话 查找属性 var a=this.dataIndex!=num?a.cells[num].innerHTML:a.cells[num].getAttribute, b=this.dataIndex!=num?b.cells[num].innerHTML:b.cells[num]澳门新葡亰官网APP,.getAttribute; //num被bind方法传递过来的,找到需排序的单元格里面包车型客车剧情 var x = a.toString || '', y = b.toString || '', nC = String.fromCharCode, xN = x.replace(this.re, nC + '$1' + nC).split,// 将字符串差异成数组 yN = y.replace(this.re, nC + '$1' + nC).split, xD = .get提姆e.getTime() xN = this.file!=num?xN:xN.reverse(),//如果有filetype则反序 yN = this.file!=num?yN:yN.reverse() if ( xD && yD && xD < yD ) return -1; else if ( xD && yD && xD > yD ) return 1; for ( var cLoc=0, numS = Math.max( xN.length, yN.length ); cLoc < numS; cLoc++ ) if ( ( parseFloat || xN[cLoc] ) < ( parseFloat || yN[cLoc] ) ) //不能够改造为floatNumber直接开展字母相比,如'A' ( parseFloat || yN[cLoc] ) ) return 1; return 0; } } function subData{//假使有数量大小排序给td增加叁个自定属性给data//正则也是能够的论断的//mymickey未有在那处写正则 for{ if(o[j].cells[澳门新葡亰app,i].innerHTML.substring(o[j].cells[i].innerHTML.lastIndexOf=='kb'){ o[j].cells[i].setAttribute('data',parseFloat(o[j].cells[i].innerHTML)*1024); } if(o[j].cells[i].innerHTML.substring(o[j].cells[i].innerHTML.lastIndexOf=='mb'){ o[j].cells[i].setAttribute('data',parseFloat(o[j].cells[i].innerHTML)*1000000); } else if(o[j].cells[i].innerHTML.substring(o[j].cells[i].innerHTML.lastIndexOf=='gb'){ o[j].cells[i].setAttribute('data',parseFloat(o[j].cells[i].innerHTML)*1000000000); } } } 复制代码 代码如下: table#tb { text-align:center; border:1px #ccc solid; border-collapse:collapse; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#666; width:900px; background:url 0 -13px repeat-x ; } table#tb td { border-bottom:#ccc 1px solid; padding:.3em 0 .3em 0; } #tb th { height:30px; color:#009; padding-right:16px; } #tb thead tr{ } #tb td.highLight{color:#000;} #tb th.selectUp { background:url no-repeat right center transparent ; } #tb th.selectDown { background:url no-repeat right center transparent ; } #tb tfoot{ font-weight:bold; color:#06F; background:url 0 -13px repeat-x ; } 打包下载 //www.jb51.net/jiaoben/32017.html

本文由澳门新葡亰app发布于新葡亰服务器,转载请注明出处:tr中必需含有可点击排序的因素th

关键词: