C#+MUI框架实现首字母索引列表

这种通过首字母索引搭建的列表相信大家应该见过很多了，比如微信好友列表，手机通讯录等等，今天就来说一下如何实现这种功能。

在这里我使用了MUI框架，在MUI的API中也有官方的例子，我们可以先看一下这种索引列表的实现过程。

首先需要准备一个搜索栏和右侧索引导航栏：

<div id='list' class="mui-indexed-list">
	<!-- 搜索栏 -->
	<div class="mui-indexed-list-search mui-input-row mui-search">
		<input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索机场">
	</div>
	<!-- 右侧索引导航 -->
	<div class="mui-indexed-list-bar">
		<a>A</a>
		<a>B</a>
		<a>C</a>
		<a>D</a>
		<a>E</a>
		<a>F</a>
		<a>G</a>
		<a>H</a>
		<!-- 以下略 -->

之后就是列表的数据，有几个重要的属性需要注意

data-group :在列首中使用，侧边索引导航可以根绝这个属性值进行位置的调整。

data-value :在数据列中使用，设置的是该条数据的拼音首字母大写，可以在页面顶部的搜索栏输入首字母大写来进行数据的筛选。

<div class="mui-indexed-list-alert"></div>
	<div class="mui-indexed-list-inner">
		<div class="mui-indexed-list-empty-alert">没有数据</div>
		<ul class="mui-table-view">
			<li data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li>
			<li data-value="AKU" data-tags="AKeSu" class="mui-table-view-cell mui-indexed-list-item">阿克苏机场</li>
			<li data-value="BPL" data-tags="ALaShanKou" class="mui-table-view-cell mui-indexed-list-item">阿拉山口机场</li>
			<li data-value="AAT" data-tags="ALeTai" class="mui-table-view-cell mui-indexed-list-item">阿勒泰机场</li>
			<li data-value="NGQ" data-tags="ALiKunSha" class="mui-table-view-cell mui-indexed-list-item">阿里昆莎机场</li>
			<li data-value="AQG" data-tags="AnQingTianZhuShan" class="mui-table-view-cell mui-indexed-list-item">安庆天柱山机场</li>
			<li data-value="MFM" data-tags="AoMenGuoJi" class="mui-table-view-cell mui-indexed-list-item">澳门国际机场</li>
			<li data-group="B" class="mui-table-view-divider mui-indexed-list-group">B</li>
			<li data-value="BSD" data-tags="BaoShan" class="mui-table-view-cell mui-indexed-list-item">保山机场</li>
			<li data-value="BAV" data-tags="BaoTou" class="mui-table-view-cell mui-indexed-list-item">包头机场</li>
<!-- 以下略 -->

现在我们知道了它的实现过程，只有ul标签中的数据是需要我们动态添加的，其他的都可以不变，而ul标签中的内容是由两种li标签组成，一种是带有data-group属性的列首，另一种就是带有data-value的数据列。

//以上数据查询略
               		userBirthday=tbUser2.UserBirthday.ToString()
                     }).ToList();
   foreach (var friend in listFriend)
   {
   		//如果好友有备注，索引值则是通过备注名来获取的拼音首字母大写
       if (friend.Remark != null)
       {
       		//GetFirstCode 转换拼音首字母大写的方法
           friend.index = GetFirstCode(friend.Remark);
       }
       else
       {
       		//如果没有备注，则通过好友昵称来获取索引
           friend.index = GetFirstCode(friend.UserName);
       }
   }
   if (CompanyID != 0)
   {
       listFriend=listFriend.Where(m => m.CompanyID == CompanyID).ToList();
   }
   //通过字母索引进行排序
   listFriend = listFriend.OrderBy(m => m.index.Substring(0, 1)).ToList();
   return Json(listFriend, JsonRequestBehavior.AllowGet);

汉字转拼音首字母大写的方法我在上一篇文章有讲到，可以去参考一下：
https://blog.csdn.net/weixin_44538399/article/details/93974591

页面接收到返回结果后，就可以通过append()和after()方法对ul标签进行页面数据的添加。

function selectList(){
	$.ajaxSettings.async=false;
	var indexs = [];//存放索引的数组
	$.ajax({
	type:"get",
	url:url+"Main/SelectFriendsList",
	dataType:'json',
	data:{
		'UserID':UserID,
		'CompanyID':0
	},
	success:function(e){
		$("#indexlist").empty();//清空ul标签内容
		$.each(e,function(i){
			//循环查询结果，提取出首字母
			var index = e[i].index.substr(0,1);
			if((indexs.indexOf(index)==-1)){
				//indexOf()方法可以返回元素在数组中的位置，如果不存在则返回-1
				//追加列首
				if(index=="#"){
					$("#indexlist").append('<li id="indexed0" data-group="'
					+index+'" class="mui-table-view-divider mui-indexed-list-group">'
					+index+'</li>');
				}else{
					$("#indexlist").append('<li id="indexed'+index+'" data-group="'
					+index+'" class="mui-table-view-divider mui-indexed-list-group">'
					+index+'</li>');
				}
				//将已追加的字母索引添加到数组中，在前面能通过indexOf()方法来判断该索引是否存在
				//避免重复追加索引
				indexs.push(e[i].index.substr(0,1));	
			}
			var name = e[i].Remark;
			if(e[i].Remark==null){
				name=e[i].UserName;
			}
			//通过after()方法将数据列追加到相应的列首之后
			if(index=="#"){
				$("#indexed0").after('<li id="this'+e[i].CompanyID+'" οnclick="showInfo('+e[i].CompanyID+')" data-value="'
				+e[i].index+'" data-tags="'+e[i].index+'" class="mui-table-view-cell mui-indexed-list-item">'
				+'<img src="image/admin.png" /><span>'+name+'</span></li>');
			}else{
				$("#indexed"+index).after('<li id="this'+e[i].CompanyID+'" οnclick="showInfo('+e[i].CompanyID+')" data-value="'
				+e[i].index+'" data-tags="'+e[i].index+'" class="mui-table-view-cell mui-indexed-list-item">'
				+'<img src="image/admin.png" /><span>'+name+'</span></li>');
			}
			if(e[i].UserImg!=null){
				$("#this"+e[i].CompanyID+" img").attr("src",url+e[i].UserImg);
			}
		});
			
		//在所有数据都添加完成后，还需要对IndexList控件进行激活
		mui.ready(function() {
			var header = document.querySelector('header.mui-bar');
			var list = document.getElementById('list');
			//设置容器高度
			list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
			//激活IndexList控件
			window.indexedList = new mui.IndexedList(list);
		});
		}
	});
}

一定要记得激活IndexList控件哦

最后测试一下效果

右侧索引导航：

顶部搜索栏：