亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery實(shí)現(xiàn)樹形員工信息表

 更新時(shí)間:2022年05月06日 10:22:43   作者:南初?  
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)樹形員工信息表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論