layim之邀请好友加入群组

整合layim即时通讯时，发现网上灰常少群组拉人的资料，最后自己慢慢琢磨，呈上教程！

一. 效果演示

打开群组成员，在成员列表前面绑定添加群成员与删除群成员图标，如下图

点击添加群成员图标，弹出添加群员界面，如图

二. 实现教程

2.1、初始化添加删除群成员图标：
我们在监听查看群员时，在成员列表前面初始化添加群成员与删除群成员图标。如何初始化呢，我们在页面中按F12，查看群员列表的class为layim-members-list，思路是否一下子清晰了。

// 监听查看群员
layim.on('members', function(res){
    
    
	console.log(res);
	var membersList = $(".layim-members-list");
	// groupId为群组编号
	var html = [
			'<div groupid="'+groupId+'" mark="1" class="handleGroupUser" style="float:left;margin:12px 31px;border:1px dashed #ccc;border-radius:48px;width:48px;height:48px;cursor:pointer;">',
			'<span class="icon iconfont" style="font-size:28px;line-height:48px;padding-left:10px;">&#xed24;</span>',
			'</div>',
			'<div groupid="'+groupId+'" mark="2" class="handleGroupUser" style="float:left;margin:12px 31px;border:1px dashed #ccc;border-radius:48px;width:48px;height:48px;cursor:pointer;">',
			'<span class="icon iconfont" style="font-size:28px;line-height:48px;padding-left:10px;">&#xed25;</span>',
			'</div>'
		].join('');
	// 在群员列表最前面添加元素
	membersList.prepend(html);
});

为了方便后面绑定事件的操作，我们务必先把群组编号绑定到元素中。细心的小伙伴已经发现，群组编号groupId在哪里来。一开始我也纠结这个问题，我们打印监听事件res的时候，只发现群成员列表以及其他用不着的对象，并没发现群组编号，如下图：
那肿么办呢，仔细一想，我们查看群组之前必须触发一个事件，就是聊天窗口切换事件，我们打印一下res（如下图），果然存在群组编号，因此我们只需要监听聊天窗口切换，便能成功拿到群组编号了。

// 先声明全局变量，存储切换聊天对象
var layimChangeTo;
// 监听聊天窗口的切换
layim.on('chatChange', function(res){
    
    
	// 打印res数据
	console.log(res);
	// 直接获取群聊
	layimChangeTo = res.data;
});

我们先声明一个全局变量layimChangeTo，把切换聊天的对象存储起来，然后在监听查看群员里通过全局变量把groupId拿出来即可。

var groupId = layimChangeTo.id;

2.2、绑定操作群成员事件：
点击添加群成员或删除群成员图标时，打开对应页面。

/* 处理群聊群员 */
$('body').on('click', '.handleGroupUser', function(e){
    
    
	// 群组编号（初始化图标时已经绑定）
	var groupId = $(this).attr("groupid");
	// 操作标识（初始化图标时已经绑定）
	var mark = $(this).attr("mark");
	var title, content;
	if(mark==1){
    
    
		title = '添加成员';
		content = 'append.html?groupId='+groupId;
	}else{
    
    
		title = '删除成员';
		content = 'remove.html?groupId='+groupId;
	}
	// 打开父子弹框
   	layer.open({
    
    
			type: 2,
			maxmin: !0,
			title: title,
			area: ['500px', '556px'],
			shade: !1,
			offset: 'auto',
			skin: "layui-box",
			anim: 2,
			id: "layui-layim-chatlog",
			content: content 
		});
});

2.3、添加群成员页面：
添加页面时，初始化你的所有好友，若已经是群成员的好友，默认选中好友前面的复选框，并设置为禁用。
（1）插入css样式：

<!-- 基本样式 -->
<link rel="stylesheet" href="<%=ligent_unitPath%>layui/css/layui.css" media="all">
<style>
body{
    
     height: auto;overflow-y: hidden;overflow-x: hidden;}
.search{
    
    width: 100%;height: 50px;margin-top: 10px;}
.search input{
    
    width: 300px;margin-left: 30px;float: left;}
.search button{
    
    margin-right: 5px;float: right;width: 100px;letter-spacing: 6px;}
.recordList{
    
    padding: 0px;margin-right: 0px;padding-bottom: 5px;}
#friendList{
    
    margin-right: 0px;height: 450px;display: block;overflow: hidden;overflow-y: auto;scrollbar-width: none;}
#friendList::-webkit-scrollbar {
    
    width: 5px;height: 1px;}
#friendList::-webkit-scrollbar-thumb {
    
    border-radius: 10px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: #efa13c;}
#friendList::-webkit-scrollbar-track {
    
    border-radius: 10px;background: #FFF;}
.recordList .demo-list .layui-card{
    
    height: 50px;width: 100%;}
.choose{
    
    float: left;padding-left: 30px;padding-top: 10px;}
.avatar{
    
    width: 48px; float: left;}
.avatar img{
    
    border-radius: 10%; width: 30px; height: 30px; margin-top: 5px;margin-left: 10px;}
.units{
    
    width: 360px;float: left; font-size: 12px;line-height: 20px; 
/* 超出部分省略号代替 */
overflow: hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
#notFriend{
    
    color: #ccc; margin-left: 160px;display: none;}
.ml_10{
    
    margin-left: 10px;}
.mr_none{
    
    margin-right: 0px;}.friend-list-gray{
    
    -webkit-filter: grayscale(100%);filter: grayscale(100%);color: #999;}
</style>

（2）添加html代码：

<div class="layui-card" style="margin-bottom:0px;">
   	<div class="layui-tab layui-tab-brief layadmin-latestData">
 			<div class="layui-row layui-col-space15 mr_none">
			<div class="layui-form mr_none">
				<div class="search">
           			<div class="layui-col-md2">
       					<input type="text" id="searchKey" placeholder="请输入姓名搜索" autocomplete="off" class="layui-input" style="">
					</div>
           			<div class="layui-col-md2">
           				<button class="appendFriend layui-btn layui-btn-sm">完成</button>
           			</div>
          			</div>
          			<div class="recordList">
				    <div id="friendList" class="layui-row layui-col-space10 demo-list">
				    	<input type="hidden" id="groupId" value="${groupId }" />
				    	<div id="notFriend"><span>没有找到符合搜索条件的成员</span></div>
				    	<div class="layui-col-sm4 layui-col-md4 layui-col-lg2 friend" username="小升">
				    		<div class="layui-card friend-list-gray">
					        	<div class="choose">
			          				<input type="checkbox" disabled="disabled" checked="checked" lay-skin="primary" >
					        	</div>
					        	<div class="avatar">
					          		<img class="layadmin-homepage-pad-img" src="http://tva1.sinaimg.cn/crop.0.0.180.180.180/7fde8b93jw1e8qgp5bmzyj2050050aa8.jpg" />
					        	</div>
					        	<div class="units">
						        	<p>小升</p>
						        	<p>更多精彩文章，请关注我</p>
					        	</div>
					        </div>
				    	</div>
				    	<div class="layui-col-sm4 layui-col-md4 layui-col-lg2 friend" username="小焕">
				    		<div class="layui-card friend-list-gray">
					        	<div class="choose">
			          				<input type="checkbox" disabled="disabled" checked="checked" lay-skin="primary" >
					        	</div>
					        	<div class="avatar">
					          		<img class="layadmin-homepage-pad-img" src="http://wx2.sinaimg.cn/mw690/5db11ff4gy1flxmew7edlj203d03wt8n.jpg" />
					        	</div>
					        	<div class="units">
						        	<p>小焕</p>
						        	<p>更多精彩文章，请关注小升</p>
					        	</div>
					        </div>
				    	</div>
					</div>
				</div>
           	</div>
		</div>
   	</div>
</div>

2.4、简单搜索用户：
若好友过多，查找某一好友想必会很繁琐，因此整理搜索好友功能，简单利用jquery的显示隐藏完成，代码如下。

/**
 * 搜索用户列表
 */
$(document).on('blur', '#searchKey', function() {
    
    
	/*// 取消所有选中
	$('input[name="userIds"]').prop("checked", false);
	form.render();*/
	// 隐藏找不到提示语
	$('#notFriend').hide();
	// 默认显示所有好友
	$('#friendList .friend').show();
	// 获取输入的关键字
	var searchKey = $("#searchKey").val();
	if(searchKey && searchKey!=null && searchKey!=''){
    
    
		var showCount = 0;
		$('#friendList .friend').each(function(){
    
    
			var userName = $(this).attr("username");
			if(userName.indexOf(searchKey)<0){
    
    
				// 隐藏跟关键字不匹配的好友
				$(this).hide();
			}else{
    
    
				showCount++;
			}
		});
		if(showCount == 0){
    
    
			// 若没有匹配的好友，提示没有符合好友
			$('#notFriend').show();
		}
	}
});

2.5、添加群聊成员：

/**
 * 添加群聊成员
 */
$(document).on('click', '.appendFriend', function() {
    
    
	var userIdArray = []; 
	$('input[name="userIds"]:checked').each(function(){
    
     
	　　　userIdArray.push($(this).val()); 
	});
	if(userIdArray.length == 0){
    
    
		layer_alert("请选择成员!", 5, null);
       	return;
	}
   	
	var userIds = userIdArray.join(',');
	var groupId = $("#groupId").val();
	// 以下是你保存数据库的代码
	// ------------------------
	// ------------------------
	// 成功返回后
	layer.msg("邀请成功，等待对方同意!");
   	// 推送一条消息
   	var msg = {
    
    
   			type: "inviteFriend",	// 类型自定义，标志邀请群好友
   			groupId: groupId,
   			userIds: userIds
   		}
   	top.websocket.send(JSON.stringify({
    
    
		    	type: 'chatMsgbox' // 随便定义，用于在服务端区分消息类型
		    	,data: msg
		  }));
	// 关闭本自身窗体
	setTimeout(function(){
    
    
	    			// 关闭查看成员窗体
	    			parent.layer.closeAll('tips');
	    			var layimGroup = parent.$(".layim-group"+groupId).parent();
	    			layimGroup.find(".layim-chat-username").data("down","")
	    			layimGroup.find(".layim-chat-members").html("");
	    			layimGroup.find(".layui-icon").html("");
					// 关闭本自身窗体
		var index = parent.layer.getFrameIndex(window.name); 
		parent.layer.close(index);
	},1000);
});

操作如此简单，前端代码不是很6，大牛莫怪！~~

赠人玫瑰手留余香，若对您有所帮助，来 点个赞呗！