中文拼音排序(web前端实现)_前端汉字怎么实现按照拼音排序

作者：花生_TL007 | 2024-03-06 06:29:59

踩

前端汉字怎么实现按照拼音排序


var array = ['武汉', '北京', '上海', '天津'];
array.sort(
    function compareFunction(param1, param2) {
        return param1.localeCompare(param2, 'zh-Hans-CN', {sensitivity: 'accent'});
    }
);
array // ["北京", "上海", "天津", "武汉"]

localeCompare为最新函数。

以下为多年前没有提供localeCompare之前的解决方案，可忽略。

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

中文按照拼音排序的原理就是将几千个汉字及其拼音建立映射关系，然后将几千个汉字排序。

这个办法虽然看似很笨，但因为数据量并不大，实际应用中很靠谱。

转自： http://xkspace.iteye.com/blog/177473

test.html

<html><head>
<title></title>
<script type="text/javascript" src="./qswhGB2312.js"></script>
<script type="text/javascript" src="./SyjSort.js"></script>
<script language=javascript>

function init(){
var sorter=new syj.Sort('mainTable');
sorter.bindCell(0,'NUMBER');
sorter.bindCell(1,'STRING_EN',false);
sorter.bindCell(2,'STRING_CH');
sorter.bindCell(3,'DATE');
}
</script>
</head>
<body οnlοad="init();">
<table border='1' id='mainTable'>
<tr>
<th>数字</th>
<th>英文</th>
<th>中文</th>
<th>2000-01-01</th>
</tr>

<tr>
<td>2</td>
<td>bdwed</td>
<td>王鹏</td>
<td>2008-08-01</td>
</tr>
<tr>
<td>3</td>
<td>apsfsdf</td>
<td>孙钰佳</td>
<td>1997-07-01</td>
</tr>
<tr>
<td>4</td>
<td>cdsec</td>
<td>李广</td>
<td>2006-03-01</td>
</tr>
<tr>
<td>1</td>
<td>derq</td>
<td>重庆</td>
<td>2006-06-01</td>
</tr>
<tr>
<td>5</td>
<td>nerq</td>
<td>邹</td>
<td>2006-06-01</td>
</tr>
<tr>
<td>8</td>
<td>e</td>
<td>严</td>
<td>2006-06-01</td>
</tr>
<tr>
<td>7</td>
<td>ferq</td>
<td>李</td>
<td>2006-06-01</td>
</tr>
<tr>
<td>6</td>
<td>kerq</td>
<td>成龙</td>
<td>2006-06-01</td>
</tr>
</table>
</body>
</html>

SyjSort.js

if (syj == null) var syj = {};
/*
表格排序 author 孙钰佳 2008/02/24 sunyujia@yahoo.cn
汉字按拼音排序需要qswhGB2312.js拼音库的支持,此拼音库支持的汉字范围为GB2312精简出自qiushuiwuhen
动态构建的table同样可以排序,只需指定TD的sortObject属性指向待取值的对象(例如input控件)的引用例cell.sortObject=动态构建出的input对象
在页面加载时执行如下脚本即可
var sorter=new syj.Sort('mainTable');
sorter.bindCell(0,'NUMBER');
sorter.bindCell(1,'STRING_EN',false);如果列表已经有序指定顺序false正序
sorter.bindCell(2,'STRING_CH');
sorter.bindCell(3,'DATE');
*/
var table
//tbName待排序的表名start起始tr下标默认1,end结束tr下标默认0
syj.Sort =function(tbName,start,end){
this.tbName=tbName;//表名
this.table=document.getElementById(tbName);//表对象
this.start=start==null?1:start;//起始tr如果值为1则第一行不参与排序
this.end=end==null?0:end;//结束tr如果值为2则最后两行不参与排序
this.heads=this.table.rows[0].cells;
this.spanSrc=document.createElement("<span>");
this.spanSrc.innerHTML="▼";//占位用

}
//指定待排序的列cellIdx列号下标,desc如果列表已经有序true为倒序false为正序,null为无序,type类型支持类型有DATE,NUMBER,STRING_EN,STRING_CH
syj.Sort.prototype.bindCell=function(cellIdx,type,desc){
var c=this.heads[cellIdx],o=this;
c.style.cursor='hand';
c.οnclick=function(){
o.sortCell(this,type);
if(o.onclickExt!=null)o.onclickExt(this);//执行扩展的onclickExt事件
}
var f=this.spanSrc.cloneNode(true);
f.style.visibility='hidden';
c.updateSymbol=function(){ if(c.desc) f.innerHTML="▼";else f.innerHTML="▲";}
c.desc=desc;
if(c.desc!=null)c.updateSymbol();
c.οnmοuseοver=function(){if(c.desc!=null)f.style.visibility='visible';}
c.οnmοuseοut=function(){f.style.visibility='hidden';}
c.appendChild(f);
c.style.textIndent=f.offsetWidth;
}
//核心排序方法,采用冒泡排序,使用dom交换数据,不影响内存中cell对象的状态
syj.Sort.prototype.sortCell=function(cell,type){
var ips = this.table.all.tags("INPUT"),cks = [];//排序字段解决交换tr时checkbox的IE bug
for(var i=0; i < ips.length; i++){if(ips[i].type == "checkbox") cks.push(ips[i], ips[i].checked);}
if(cell.desc==null) cell.desc=false;else cell.desc=!cell.desc;
var funcName='CMP_'+type;//根据类型匹配算法的函数名称
if(this[funcName]==null){alert("类型错误,合法的类型为DATE,NUMBER,STRING_EN,STRING_CH");return ;}
for (var i = this.start,cIdx=cell.cellIndex,rows=this.table.rows,size = rows.length - this.end; i < size; i++) {
for (var k = this.start; k < size - 1 - i + this.start; k++) {
var row1=rows[k],row2=rows[k + 1];
var x=this.getValue(row1.cells[cIdx]),y=this.getValue(row2.cells[cIdx]);
if (this[funcName](x,y,cell)>0)
row1.swapNode(row2);
}
}
cell.updateSymbol();
while(cks.length > 0)cks.shift().checked = cks.shift();
}
//数字比较算法
syj.Sort.prototype.CMP_NUMBER=function(x,y,cell){
var r="/[^d|.|-]/g";
x=x.replace(r,"");
y=y.replace(r,"");
return this.compare(x*1,y*1,cell);
}
//时间比较算法
syj.Sort.prototype.CMP_DATE=function(x,y,cell){
var d='1900-01-01';
var x=this.strToDate(x==''?d:x);
var y=this.strToDate(y==''?d:y);
var z=x-y;
return cell.desc?z*(-1):z;
}
//英文字符串算法
syj.Sort.prototype.CMP_STRING_EN=function(x,y,cell){
x=this.getFirstChar(x);
y=this.getFirstChar(y);
return this.compare(x,y,cell);
}
//中文字符串算法
syj.Sort.prototype.CMP_STRING_CH=function(x,y,cell){
x=x==""?"":getGB2312Spell(this.getFirstChar(x));
y=y==""?"":getGB2312Spell(this.getFirstChar(y));
return this.compare(x,y,cell);
}
//简单值比较算法
syj.Sort.prototype.compare=function(x,y,cell){
if(x>y) return cell.desc?-1:1;
else if(x<y) return cell.desc?1:-1;
else return 0;
}
//取字符串的第一个字符
syj.Sort.prototype.getFirstChar=function(s){
if(s=="")return "";
return (s+"").substr(0,1);
}
//字符串转成日期类型格式 MM/dd/YYYY MM-dd-YYYY YYYY/MM/dd YYYY-MM-dd
syj.Sort.prototype.strToDate=function(ds){
var d = new Date(Date.parse(ds));
if (isNaN(d)){
var arys= ds.split('-');
d = new Date(arys[0],arys[1]-1,arys[2]);
}
return d;
}
//取TD中的值
syj.Sort.prototype.getValue=function(cell){
var v;
if(cell.sortObject!=null) v= cell.sortObject.value!=null?cell.sortObject.value:cell.sortObject.innerText;
else v= cell.innerText;
return v.replace(/(^s*)|(s*$)/g,"");
}  

qswhGB2312.js

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/196501