jQuery实现树形员工信息表

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

一、效果图

二、核心代码

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");
            }
        })
}) 

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