一款jQuery通讯录树形节点选中编辑代码，可以全选或者单独选中某个部门，选中的人员会在右侧显示除了，可以点击右侧里的任意一个进行删除，右侧顶部的数字统计会自动识别，个人觉得这个还是挺实用的，喜欢的童鞋请收下吧。
页面的head部分需要引入4个CSS样式文件，并调用jQuery库，代码如下：
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/weui.min.css">
<link type="text/css" rel="stylesheet" href="css/jquery-weui.min.css">
<link type="text/css" rel="stylesheet" href="css/maillist2.css">
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>页面的body部分内容比较多，分为上下和左右的结构，然后多个部门放置在不同的容器里，部分代码如下：
<div id="indexPage">
<div class="bar bar-nav weui-search-bar" id="searchBar">
<form class="weui-search-bar__form">
<div class="weui-search-bar__box">
<i class="weui-icon-search"></i>
<input type="input" class="weui-search-bar__input" id="searchInput" readonly placeholder="搜索" >
<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
</div>
</form>
<!-- <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a> -->
</div>
<div class="bar bar-footer pull-right">
<!-- <span class="sels">提交</span>
<span>取消</span> -->
<span class="sel-btn">已选择: <strong>0</strong>人</span>
<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">确认</a>
<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default">取消</a>
</div>
<div class="content sel-con">
<div class="weui-cells weui-cells_checkbox">
<div class="list-item">
<label class="weui-cell weui-check__label all-input">
<div class="weui-cell__hd">
<input type="checkbox" name="checkbox" class="weui-check">
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd">
<p>全选</p>
</div>
</label>
</div>
<h3 class="list-item-tit">部门</h3>
<div class="list-item1">
</div>
<div class="list-item2">
<div class="list-item-box">
<h3 class="list-item-tit">A</h3>
<label class="weui-cell weui-check__label item-input">
<div class="weui-cell__hd">
<input type="checkbox" name="checkbox" class="weui-check" peoId="1">
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd touxiang">
<img src="images/tx.png">
</div>
<div class="weui-cell__bd">
<p>姓名1</p>
</div>
<div class="weui-cell__ft">教学部</div>
</label>
<label class="weui-cell weui-check__label item-input">
<div class="weui-cell__hd">
<input type="checkbox" name="checkbox" class="weui-check" peoId="13">
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd touxiang">
<img src="images/tx.png">
</div>
<div class="weui-cell__bd">
<p>姓名13</p>
</div>
<div class="weui-cell__ft">教学部</div>
</label>
<label class="weui-cell weui-check__label item-input">
<div class="weui-cell__hd">
<input type="checkbox" name="checkbox" class="weui-check" peoId="14">
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd touxiang">
<img src="images/tx.png">
</div>
<div class="weui-cell__bd">
<p>姓名14</p>
</div>
<div class="weui-cell__ft">教学部</div>
</label>
<label class="weui-cell weui-check__label item-input">
<div class="weui-cell__hd">
<input type="checkbox" name="checkbox" class="weui-check" peoId="15">
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd touxiang">
<img src="images/tx.png">
</div>
<div class="weui-cell__bd">
<p>姓名15</p>
</div>
<div class="weui-cell__ft">教学部</div>
</label>
</div>
<div class="list-item-box">
<h3 class="list-item-tit">B</h3>
<label class="weui-cell weui-check__label item-input">
<div class="weui-cell__hd">
<input type="checkbox" name="checkbox" class="weui-check" peoId="16">
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd touxiang">
<img src="images/tx.png">
</div>
<div class="weui-cell__bd">
<p>姓名16</p>
</div>
<div class="weui-cell__ft">教学部</div>
</label>
<label class="weui-cell weui-check__label item-input">
<div class="weui-cell__hd">
<input type="checkbox" name="checkbox" class="weui-check" peoId="17">
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd touxiang">
<img src="images/tx.png">
</div>
<div class="weui-cell__bd">
<p>姓名17</p>
</div>
<div class="weui-cell__ft">教学部</div>
</label>
</div>
</div>
</div>
</div>
</div>设置好上面的各容器内容后，通过jQuery定义一些样式的变化，比如：选中、移除等的样式，代码如下：
$("#selectPage").removeClass('weui-popup__container');
$("#selectPage .weui-popup__modal").css({
"-webkit-transform": "none",
"-moz-transform": "none",
"-ms-transform": "none",
"transform": "none"
})
$("#seachPage").css({
"z-index": 120
})
$("#selectPage .weui-popup__overlay").addClass('hide');
$(".sel-btn,.back-btn").addClass('hide');
$(".gray-bg").css({
"position":"relative",
"width": 740,
"height": 600,
"margin": "auto"
})
$("#indexPage").css({
"width": 370
})
$("#selectPage").css({
"width": 370,
"position": "absolute",
"height": "100%",
"top":0,
"right":0
})最后，需要引入4个特定的JS文件，代码如下：
<script type="text/javascript" src="js/icheck.min.js"></script>
<script type="text/javascript" src="js/jquery-weui.js"></script>
<script type="text/javascript" src="js/dot.min.js"></script>
<script type="text/javascript" src="js/maillist2.js"></script>
系统已开启自动识别垃圾评论机制，识别到的自动封号，下载出错或者资源有问题请联系全栈客服QQ 1915635791