需求描述
在移动端需要做一个汽车品牌和型号的选择页面。考虑到数据比较多,又基本不会变化,决定把车辆信息数据放在一个Excel表格中作为一个静态资源,需要用时通过js读取并展示。下图是Excel的部分内容:
最终效果
左侧是选择车辆品牌,右侧是选择好车辆品牌之后继续选择车辆型号。
关键代码(读取本地Excel数据)
1、需要提前引入 xlsx.full.min.js 文件。
2、在页面上写一个按钮和展示列表的容器。
<input type="file" id="file"/>
<div id="car-list"></div>
// js读取解析Excel
// 定义一个carData,用来保存读取到的数据
var carData;
$(document).ready(function(){
var wb;//读取完成的数据
var rABS = false; //是否将文件读取为二进制字符串
function fixdata(data) { //文件流转BinaryString
var o = "",
l = 0,
w = 10240;
for(; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
return o;
}
$("#file").change(function(){
if(!this.files) {
return;
}
var f = this.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
if(rABS) {
wb = XLSX.read(btoa(fixdata(data)),{
type: 'base64'
});
} else {
wb = XLSX.read(data,{
type: 'binary'
});
}
// carData就是我们需要的JSON数据
carData = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
console.log(carData);
};
if(rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
})
});
扩展补充(分类展示代码)
需要引入sortUnicode.js 文件
需要用到的方法:
// 按字母排序并分类(得到排序后的汽车品牌首字母)
function sortFn(dataJson, callback) {
var list = [];
for (var i = 0; i < dataJson.length; i++) {
list.push(dataJson[i].brand);
}
// 得到一串首字母数组
var pinYin = executive(list);
var arry = [];
for (var j = 0; j < pinYin.length; j++) {
arry[j] = pinYin[j];
}
//将出现的字符按ascii顺序由小到大存进数组
var temp;
for (var m = 0; m < pinYin.length - 1; m++) {
for (var n = 0; n < pinYin.length - 1 - m; n++) {
if (pinYin[n] > pinYin[n + 1]) {
temp = pinYin[n];
pinYin[n] = pinYin[n + 1];
pinYin[n + 1] = temp;
}
}
}
// 返回汽车品牌排序后的首字母
callback(pinYin);
}
// 得到一串首字母数组
function executive(str) {
var isEnglishOrNum = /^[A-Za-z0-9]+$/; //正则验算是否英文字母或数字
var arr = []; //存储各字符串首字母
var j = 0;
for(var i=0;i<str.length;i++){
if(Object.prototype.toString.call(str[i]) === "[object String]"){ //判断是否为字符串
var sing = str[i].substring(0,1); //截取字符串首个字符
var ch = str[i].charCodeAt(0); //获取字符对应Unicode编码值
if(isEnglishOrNum.test(sing)){ //判断是否为英文字母或数字
arr[j++] = sing.toUpperCase(); //是则将字符赋值给数组
}else{
if(ch<40869&&ch>=19968){ //判断字符编码值在19968到40869之间
arr[j++]=strChineseFirstPY.charAt(ch-19968); //获取对应表中的字母并赋值到数组
}else{
alert("字符串首字母仅支持字母和数字");
return false;
}
}
// 多音字特殊处理,如长安汽车、厦门金龙汽车
if (sing==='长') {
arr[j-1] = 'C';
}
if (sing==='厦') {
arr[j-1] = 'X';
}
}else{
console.log("出现有误");
return false;
}
}
return arr;
}
// 首字母去重
function firstLetterOnlyFn(data) {
var temp = [];
for(var i = 0; i < data.length; i++){
if(temp.indexOf(data[i]) == -1){
temp.push(data[i]);
}
}
return temp;
}
列表展示代码
var firstLetter;
var firstLetterNoRepeat;
$(function () {
sortFn(carData, function (pinYin) {
// 保存排序后的所有首字母
firstLetter = pinYin;
// 保存去重后的首字母
firstLetterNoRepeat = firstLetterOnlyFn(pinYin);
// 展示品牌列表
allCarList();
});
});
// 展示车辆品牌列表
function allCarList() {
$("#car-list").html('');
// 生成含有的字母
var arrangeLi = "";
for(var k=0;k<firstLetterNoRepeat.length;k++){
if(firstLetterNoRepeat[k]!=firstLetterNoRepeat[k-1]){
arrangeLi += "<li class='"+firstLetterNoRepeat[k]+"'><b>"+firstLetterNoRepeat[k]+"</b></li>";
}
}
$("#car-brand-list").html('<ul> ' + arrangeLi + ' </ul>');
// 生成汽车品牌
for(var r=firstLetter.length-1;r>=0;r--){
var firstZm = executive([carData[r].brand]);
var li = '<li><img src="static/car_logo/' + carData[r].icon + '.png" alt=""><label>' + carData[r].brand + '</label></li>';
$("."+firstZm[0]+"").after(li);
}
}
到这里就基本实现了汽车品牌的列表展示,其他细节处理就根据不同的需求略微修改就行了。