jQuery實(shí)現(xiàn)樹形員工信息表
本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)樹形員工信息表的具體代碼,供大家參考,具體內(nèi)容如下
一、效果圖
二、核心代碼
var list = [ ? ?{ ? ? ? ?name: "技術(shù)部", ? ? ? ?child: [ ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? name: "用戶一" ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? name: "用戶二" ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? name: "用戶三" ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ] ? ? ? ? }, ? ? ? ? { ? ? ? ? ? ? name: "人事部", ? ? ? ? ? ? child: [ ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? name: "人事一" ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? name: "人事二" ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? name: "人事三" ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ] ? ? ? ? }, ? ? ? ? { ? ? ? ? ? ? name: "財(cái)務(wù)部", ? ? ? ? ? ? child: [ ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? name: "財(cái)務(wù)一" ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? name: "財(cái)務(wù)二" ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? name: "財(cái)務(wù)三" ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ] ? ? ? ? }, ? ? ? ? { ? ? ? ? ? ? name: "項(xiàng)目部", ? ? ? ? ? ? child: [ ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? name: "項(xiàng)目一" ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? name: "項(xiàng)目二" ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? name: "項(xiàng)目三" ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ] ? ? ? ? } ? ? ]; ? ? $(function(){ ? ? ? ? list.forEach(function(item,index){ ? ? ? ? ? ? var li=$("<li class='plist' data-p='"+index+"'><span class='icon icon_close'></span><span class='icon_tree'></span><span>"+item.name+"</span></li>"); ? ? ? ? ? ? li.append(setchild(item.child)); ? ? ? ? ? ? $(".treemenu").append(li); ? ? ? ? }) ? ? ? ? function setchild(child){ ? ? ? ? ? ? var str="<ul class='c_menu'>"; ? ? ? ? ? ? for(var i=0;i<child.length;i++){ ? ? ? ? ? ? ? ? str+="<li><span class='line'></span><span class='icon_check'></span><span class='cname'>"+child[i].name+"</span></li>" ? ? ? ? ? ? } ? ? ? ? ? ? str+="</ul>"; ? ? ? ? ? ? return str; ? ? ? ? } ? ? ? ? $(".icon").each(function(pindex){ ? ? ? ? ? ? $(this).click(function(){ ? ? ? ? ? ? ? ? $(".c_menu").eq(pindex).slideToggle(); ? ? ? ? ? ? }); ? ? ? ? }); ? ? ? ? $(".icon_check").each(function(chindex){ ? ? ? ? ? ? $(this).click(function(){ ? ? ? ? ? ? ? ? //點(diǎn)擊時(shí)添加或移除選中符號(hào) ? ? ? ? ? ? ? ? $(this).toggleClass("icon_check_ck"); ? ? ? ? ? ? ? ? //定義變量是否被選中 ? ? ? ? ? ? ? ? var ishas=$(this).hasClass("icon_check_ck"); ? ? ? ? ? ? ? ? //查找外層父元素對(duì)應(yīng)的索引 ? ? ? ? ? ? ? ? var parentIndex=$(this).parents(".plist").attr('data-p'); ? ? ? ? ? ? ? ? //自身索引 ? ? ? ? ? ? ? ? var childIndex=chindex; ? ? ? ? ? ? ? ? //如果被選中 ? ? ? ? ? ? ? ? if(ishas){ ? ? ? ? ? ? ? ? ? ? //查找同胞兄弟元素cname的文本值 ? ? ? ? ? ? ? ? ? ? var txt=$(this).siblings(".cname").text(); ? ? ? ? ? ? ? ? ? ? var app=$("<span class='cklist' data-p="+parentIndex+" data-c="+childIndex+">"+txt+"</span>"); ? ? ? ? ? ? ? ? ? ? $(".ck").append(app); ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? else{ ? ? ? ? ? ? ? ? ? ? $(".cklist").each(function(index){ ? ? ? ? ? ? ? ? ? ? ? ? var pindex=$(this).attr("data-p"); ? ? ? ? ? ? ? ? ? ? ? ? var cindex=$(this).attr("data-c"); ? ? ? ? ? ? ? ? ? ? ? ? if(pindex==parentIndex&&cindex==childIndex){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? $(this).remove(); ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? }); ? ? ? ? ? ? ? ? } ? ? ? ? ? ? }); ? ? ? ? }); ? ? ? ? //點(diǎn)擊按鈕事件 ? ? ? ? $(".btn").click(function(){ ? ? ? ? ? ? var txt=$(".ipt").val(); ? ? ? ? ? ? if(txt){ ? ? ? ? ? ? ? ? //遍歷list ? ? ? ? ? ? ? ? list.forEach(function(item,index){ ? ? ? ? ? ? ? ? ? ? item.child.map(function(it,id){ ? ? ? ? ? ? ? ? ? ? ? ? if(txt==it.name){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? $(".c_menu").eq(index).slideToggle().find(".cname").eq(id).addClass("red"); ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? }); ? ? ? ? ? ? ? ? }); ? ? ? ? ? ? } ? ? ? ? ? ? else{ ? ? ? ? ? ? ? ? $(".c_menu").slideUp(); ? ? ? ? ? ? ? ? $(".cname").removeClass("red"); ? ? ? ? ? ? } ? ? ? ? }) })?
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jquery實(shí)現(xiàn)自定義樹形表格的方法【自定義樹形結(jié)構(gòu)table】
- jQuery 利用ztree實(shí)現(xiàn)樹形表格的實(shí)例代碼
- 推薦8款jQuery輕量級(jí)樹形Tree插件
- jQuery樹形控件zTree使用小結(jié)
- jquery ztree實(shí)現(xiàn)下拉樹形框使用到了json數(shù)據(jù)
- json+jQuery實(shí)現(xiàn)的無限級(jí)樹形菜單效果代碼
- jquery實(shí)現(xiàn)樹形菜單完整代碼
- jQuery ztree實(shí)現(xiàn)動(dòng)態(tài)樹形多選菜單
- jQuery 樹形結(jié)構(gòu)的選擇器
- 輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建樹形菜單
相關(guān)文章
jQuery內(nèi)置的AJAX功能和JSON的使用實(shí)例
通過jQuery內(nèi)置的AJAX功能,訪問后臺(tái)獲得JSON格式的數(shù)據(jù),然后通過jQuer把數(shù)據(jù)直接在頁面上顯示,需要的朋友可以參考下2014-07-07Jquery實(shí)現(xiàn)地鐵線路指示燈提示牌效果的方法
這篇文章主要介紹了Jquery實(shí)現(xiàn)地鐵線路指示燈提示牌效果的方法,實(shí)例分析了jQuery動(dòng)態(tài)顯示特效的使用技巧,需要的朋友可以參考下2015-03-03JQuery 操作Javascript對(duì)象和數(shù)組的工具函數(shù)小結(jié)
JQuery提供了很多實(shí)用的工具函數(shù)。這些函數(shù)主要分為兩類,操作集合數(shù)組的函數(shù)和非集合數(shù)組函數(shù)。2010-01-01jquery ui 1.7 ui.tabs 動(dòng)態(tài)添加與關(guān)閉(按鈕關(guān)閉+雙擊關(guān)閉)
jquery ui 1.7 ui.tabs 動(dòng)態(tài)添加與關(guān)閉(按鈕關(guān)閉+雙擊關(guān)閉)實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-04-04jQuery實(shí)現(xiàn)tab標(biāo)簽自動(dòng)切換的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)tab標(biāo)簽自動(dòng)切換的方法,實(shí)例分析了jQuery操作tab標(biāo)簽的技巧,涉及addClass、siblings及removeClass鏈?zhǔn)讲僮鞯募记?需要的朋友可以參考下2015-02-02Jquery 數(shù)據(jù)選擇插件Pickerbox使用介紹
目前市面上很少見或幾乎沒有這數(shù)據(jù)(對(duì)象)選擇插件.比如,點(diǎn)擊input , select 元素時(shí)彈出div(窗口),載入數(shù)據(jù)讓用戶選擇數(shù)據(jù),選擇后在填充回對(duì)應(yīng)的元素.2012-08-08