jQuery实现树形员工信息表

本文实例为大家分享了jQuery实现树形员工信息表的具体代码,供大家参考,具体内容如下

一、效果图

jQuery实现树形员工信息表_第1张图片

jQuery实现树形员工信息表_第2张图片

jQuery实现树形员工信息表_第3张图片

二、核心代码

var list = [
   {
       name: "技术部",
       child: [
                {
                    name: "用户一"
                },
                {
                    name: "用户二"
                },
                {
                    name: "用户三"
                }
            ]
        },
        {
            name: "人事部",
            child: [
                {
                    name: "人事一"
                },
                {
                    name: "人事二"
                },
                {
                    name: "人事三"
                }
            ]
        },
        {
            name: "财务部",
            child: [
                {
                    name: "财务一"
                },
                {
                    name: "财务二"
                },
                {
                    name: "财务三"
                }
            ]
        },
        {
            name: "项目部",
            child: [
                {
                    name: "项目一"
                },
                {
                    name: "项目二"
                },
                {
                    name: "项目三"
                }
            ]
        }
    ];
    $(function(){
        list.forEach(function(item,index){
            var li=$("
  • "+item.name+"
  • ");             li.append(setchild(item.child));             $(".treemenu").append(li);         })         function setchild(child){             var str="
      ";             for(var i=0;i"             }             str+="
    ";             return str;         }         $(".icon").each(function(pindex){             $(this).click(function(){                 $(".c_menu").eq(pindex).slideToggle();             });         });         $(".icon_check").each(function(chindex){             $(this).click(function(){                 //点击时添加或移除选中符号                 $(this).toggleClass("icon_check_ck");                 //定义变量是否被选中                 var ishas=$(this).hasClass("icon_check_ck");                 //查找外层父元素对应的索引                 var parentIndex=$(this).parents(".plist").attr('data-p');                 //自身索引                 var childIndex=chindex;                 //如果被选中                 if(ishas){                     //查找同胞兄弟元素cname的文本值                     var txt=$(this).siblings(".cname").text();                     var app=$(""+txt+"");                     $(".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();                         }                     });                 }             });         });         //点击按钮事件         $(".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");             }         }) }) 

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    你可能感兴趣的