JavaScript 实现全选,分组全选,列表折叠。
来源:互联网 发布:看行情的软件 编辑:程序博客网 时间:2024/06/05 06:41
实现功能
我们要实现的功能是展示好友列表,全选好友列表,按分组展开、收起列表,按分组全选好友。
效果展示
自定义多选按钮和显示好友列表
全选
按分组全选和展开收起分组
问题分析
(一)自定义多选按钮和列表
这个没啥好说的,用或是替代多选按钮,用数组控制是否选中。值得一说的li的点击事件和多选按钮覆盖,不用去掉冒泡事件。这样就实现点击li同样选中此项。
//判断元素在不在数组中function contains(arr, obj) { var i = arr.length; while (i-->=0) { if (parseInt(arr[i]) === parseInt(obj)) { return true; }else if(arr[i] === obj){ return true; } } return false;}var idstr = new Array();//选定项数组var idAll = new Array();//所有选项数组(已经存好)var allCheck= false;//全选按钮是否触发function checkUser(id){//$$("id") == document.getelementById("id");if(id=="All"&allCheck){//取消全选for(var i=0;i<idAll.length;i++){$$(idAll[i]).style.background="#fff";idstr.remove(idAll[i]);}idstr.splice(0,idstr.length);$$("All").style.background="#fff";allCheck = false;return;}if(id=="All"&&!allCheck){//全选idstr=[];$$("All").style.backgroundImage = "url(/static/img/check.jpg)";$$("All").style.backgroundPosition = "0,3px";for(var i=0;i<idAll.length;i++){$$(idAll[i]).style.backgroundImage = "url(/static/img/check.jpg)";$$(idAll[i]).style.backgroundPosition ="0,3px";idstr.push(idAll[i]);allCheck = true;}}//判断是否在已选数组中if (!contains(idstr,id)) {console.log(idstr);$$(id).style.backgroundImage="url(/static/img/check.jpg)";$$(id).style.backgroundPosition="0,3px";idstr.push(id);}else{console.log(idstr);$$(id).style.background="#fff"; idstr.remove(id); }}
实现方法有很多的!
(二)分组全选和收起展开
这里介绍个我自己的方法!有点笨,正常情况应该每一个组就是一个ul的。但是我用两种其他方式实现,仅供参考。
首先id可以存成“选项id|分组id”,而分组按钮id可以存成“分组id”。因此可以根据 id.split(“|”).length来判断。上代码:
//分组 选取 //$$("id") == document.getelementById("id");if (id.split("|").length == 1) {//选取某个分组按钮if (!contains(idstr,id)) {$$(id).style.backgroundImage="url(/static/img/check.jpg)";$$(id).style.backgroundPosition="0,3px";idstr.push(id);for (var k=0 ; k<idAll.length;k++) {//从所有好友数组查找相应组里的好友,再进行判断显示if (idAll[k].endsWith("|"+id.substring(2))) {if (!contains(idstr,idAll[k]))idstr.push(idAll[k]);$$(idAll[k]).style.backgroundImage="url(/static/img/check.jpg)";$$(idAll[k]).style.backgroundPosition="0,3px";}}console.log("添加",idstr);return;}else{$$(id).style.background="#fff";idstr.remove(id);console.log("删除",idstr);var len = idstr.length;var k = 0;for (var j=0 ; j<len;j++) {console.log("三场",len,idstr[0],idstr[0].endsWith("|"+id.substring(2)));if (idstr[k].endsWith("|"+id.substring(2))) {$$(idstr[k]).style.background="#fff"; idstr.remove(idstr[k]); console.log("删除后",idstr); }else{ k++; } } return; } }
第二种方法:
根据标签来查找!分组按钮标签相同id格式相同根据这样就可以将分组按钮后一直到下一个分组按钮的标签隐藏,就可以实现展开收起分组。
两种情况下,第一种,收起、展开按钮在li标签里面!
//展开,收起//$$("id") == document.getelementById("id");function packup_open(id,e,event){var ev = event || window.event;ev.cancelBubble=true;//去掉冒泡这样不会触发li的点击事件var open=false;if(e.innerHTML=="展开"){open = true;}//改变button内容if(open){e.innerHTML="收起";}else{e.innerHTML="展开";}var main = $$("msgbody").getElementsByTagName("ul")[0]; //获取所有li var li = main.getElementsByTagName("li"); var change=false; var id = id.substring(5); console.log(li.length,id) for (var i=0;i<li.length;i++) { if(change){//开始改变显示状态 //到下一个按钮停止 if(li[i].id.startsWith("mid"))return; if(open){ li[i].style.display = "block"; }else{ li[i].style.display = "none"; } } if (li[i].id=="mid"+id) { change=true; } }}
第二种情况!按钮不在li里面!其他步骤都一样只是不同的定位而已!
/展开,收起function packup_open(id,e,event){ var ev = event || window.event; ev.cancelBubble=true; var open=false; if(e.innerHTML=="展开"){ open = true; } if(open){ e.innerHTML="收起"; }else{ e.innerHTML="展开"; } var main = $$("friList"); var _ele=main.childNodes; //这里可以转换为数组进行其他操作var _ele=Array.prototype.slice.call(main.childNodes); var change=false; //找到指定id for(var i= 0,len=_ele.length;i<len;i++){ //根据节点定位,之后到达相应的停止位置。 if (change) { if(_ele[i].id.startsWith("user_"))return; if (_ele[i].localName=="li") { if(open){ _ele[i].style.display = "block"; }else{ _ele[i].style.display = "none"; } } } if(_ele[i].id == id){ var change=true; var id = id.substring(5); } }}
只要思想不跑偏,办法总比困难多!哈!欢迎分享你的方法!
阅读全文
0 0
- JavaScript 实现全选,分组全选,列表折叠。
- 实现列表CheckBox全选的Javascript
- javascript 实现 checkbox 全选
- javascript实现checkbox全选
- javascript 实现全选/全不选
- javaScript实现全选功能
- javascript实现全选全不选
- JavaScript实现全选功能
- javaScript实现点击全选
- javascript实现全选全不选
- 实现全选和取消全选(JavaScript控制CheckBox 的全选与取消全选)
- checkbox全选javascript代码实现
- javascript实现全选/反选
- javascript实现---全选、反选
- JavaScript简单实现checkbox全选
- 使用JavaScript实现checkbox全选
- JavaScript实现复选框全选
- JavaScript实现全选,伸展收缩
- tomcat 单点登录 SSO 原理分析
- 移动端证件识别采用视频预览模式识别
- Android studio 错误 (10048)的错误:解决通常每个套接字地址(协议/网络地址/端口)只允许使用一次。
- TOP100summit2017:网易测试总监钱蓓蕾——新时代测试正走向精英化、自动化、智能化
- WEEK4 JAVA 作业
- JavaScript 实现全选,分组全选,列表折叠。
- Smoke Test & Daily Build
- 单链表
- python条件、循环、终止
- CSV文件解析
- ionic ios测试https无法连接问题
- highcharts坐标轴标签格式化回调函数formatter:function中引用series中的数据
- js获取当前URL、参数、端口、IP等信息
- Drozer二 亲测------测试android应用程序漏洞的安全评估工具---Drozer配置安装篇