HTML+JS+CSS自定义树形菜单

小编最近做项目的时候时常用到树形菜单(Treeview),一直用的是别人的插件,但有时候不符合自己的页面风格,修改样式、图标什么的都不方便,所以在这里我急写个方便修改样式什么的。

下面开始...

应用到技术:JavaScript/Css/HTML

IDAVS 2010

 

首先构造一下思路,需要哪些文件

1、js文件

2、Css文件

3、Html文件

4、图标

5、Juuery文件

6、后台查询数据文件

 

创建项目

 

在Html添加如下内容

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width" />

    <script src="Scripts/Jquery-3.1.1/jquery-3.1.1.min.js" type="text/javascript">script>

    <script src="Scripts/Jquery-3.1.1/jquery-3.1.1.js" type="text/javascript">script>

    <title>用户自定义树形菜单title>

  

head>

<body>

    

    <div class="parentnode">

    div>

body>

html>

这里主要是给TreeView一个容器

 

给这个容器添加Css样式

bodt, html

{

    padding: 0;

    margin: 0;

    border: 0;

    font-family: 'Microsoft YaHei';

}

 

.parentnode

{

    border: 1px solid #808080;

width: 280px;

height: 240px;//暂时写在这后面会删除

    position: relative;

    text-align: left;

    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.09);

    display: inline-block;

    vertical-align: top;

}

效果图

 

下面我们开始写树形菜单内部结构

 

HTML代码:

<div class="parentnode">

        <div class=" parentnode_noe">

            <div class=" parentnode_title ">

                <div class="parentnode_title_symbol parentnode_title_fix ">

                    <b>1b>div>

                <div class="parentnode_title_check parentnode_title_fix">

                    <b>1b>div>

                <div class="parentnode_title_picture parentnode_title_fix">

                div>

                <div class="parentnode_title_name" id="14" name="0">

                    系统管理div>

            div>

            <div class=" parentnode_noe">

                <div class=" parentnode_title ">

                    <div class="parentnode_title_fix parentnode_title_nochildnode_symbol">

                        <b style="display: none;">1b>div>

                    <div class="parentnode_title_check parentnode_title_fix">

                        <b>1b>div>

                    <div class="parentnode_title_picture parentnode_title_fix">

                    div>

                    <div class="parentnode_title_name" id="15" name="14">

                        用户管理div>

                div>

            div>

            <div class=" parentnode_noe">

                <div class=" parentnode_title ">

                    <div class="parentnode_title_fix parentnode_title_nochildnode_symbol">

                        <b style="display: none;">1b>div>

                    <div class="parentnode_title_check parentnode_title_fix">

                        <b>1b>div>

                    <div class="parentnode_title_picture parentnode_title_fix">

                    div>

                    <div class="parentnode_title_name" id="16" name="14">

                        角色功能管理div>

                div>

            div>

            <div class=" parentnode_noe">

                <div class=" parentnode_title ">

                    <div class="parentnode_title_fix parentnode_title_nochildnode_symbol">

                        <b style="display: none;">1b>div>

                    <div class="parentnode_title_check parentnode_title_fix">

                        <b>1b>div>

                    <div class="parentnode_title_picture parentnode_title_fix">

                    div>

                    <div class="parentnode_title_name" id="17" name="14">

                        角色管理div>

                div>

            div>

            <div class=" parentnode_noe">

                <div class=" parentnode_title ">

                    <div class="parentnode_title_symbol parentnode_title_fix ">

                        <b>1b>div>

                    <div class="parentnode_title_check parentnode_title_fix">

                        <b>1b>div>

                    <div class="parentnode_title_picture parentnode_title_fix">

                    div>

                    <div class="parentnode_title_name" id="18" name="14">

                        用户角色管理div>

                div>

                <div class=" parentnode_noe">

                    <div class=" parentnode_title ">

                        <div class="parentnode_title_symbol parentnode_title_fix ">

                            <b>1b>div>

                        <div class="parentnode_title_check parentnode_title_fix">

                            <b>1b>div>

                        <div class="parentnode_title_picture parentnode_title_fix">

                        div>

                        <div class="parentnode_title_name" id="24" name="18">

                            召回信息div>

                    div>

                    <div class=" parentnode_noe">

                        <div class=" parentnode_title ">

                            <div class="parentnode_title_fix parentnode_title_nochildnode_symbol">

                                <b style="display: none;">1b>div>

                            <div class="parentnode_title_check parentnode_title_fix">

                                <b>1b>div>

                            <div class="parentnode_title_picture parentnode_title_fix">

                            div>

                            <div class="parentnode_title_name" id="29" name="24">

                                三级div>

                        div>

                    div>

                    <div class=" parentnode_noe">

                        <div class=" parentnode_title ">

                            <div class="parentnode_title_fix parentnode_title_nochildnode_symbol">

                                <b style="display: none;">1b>div>

                            <div class="parentnode_title_check parentnode_title_fix">

                                <b>1b>div>

                            <div class="parentnode_title_picture parentnode_title_fix">

                            div>

                            <div class="parentnode_title_name" id="30" name="24">

                                三级div>

                        div>

                    div>

                    <div class=" parentnode_noe">

                        <div class=" parentnode_title ">

                            <div class="parentnode_title_symbol parentnode_title_fix ">

                                <b>1b>div>

                            <div class="parentnode_title_check parentnode_title_fix">

                                <b>1b>div>

                            <div class="parentnode_title_picture parentnode_title_fix">

                            div>

                            <div class="parentnode_title_name" id="31" name="24">

                                三级div>

                        div>

                        <div class=" parentnode_noe">

                            <div class=" parentnode_title ">

                                <div class="parentnode_title_fix parentnode_title_nochildnode_symbol">

                                    <b style="display: none;">1b>div>

                                <div class="parentnode_title_check parentnode_title_fix">

                                    <b>1b>div>

                                <div class="parentnode_title_picture parentnode_title_fix">

                                div>

                                <div class="parentnode_title_name" id="32" name="31">

                                    四级div>

                            div>

                        div>

                        <div class=" parentnode_noe">

                            <div class=" parentnode_title ">

                                <div class="parentnode_title_fix parentnode_title_nochildnode_symbol">

                                    <b style="display: none;">1b>div>

                                <div class="parentnode_title_check parentnode_title_fix">

                                    <b>1b>div>

                                <div class="parentnode_title_picture parentnode_title_fix">

                                div>

                                <div class="parentnode_title_name" id="33" name="31">

                                    四级div>

                            div>

                        div>

                    div>

                div>

                <div class=" parentnode_noe">

                    <div class=" parentnode_title ">

                        <div class="parentnode_title_fix parentnode_title_nochildnode_symbol">

                            <b style="display: none;">1b>div>

                        <div class="parentnode_title_check parentnode_title_fix">

                            <b>1b>div>

                        <div class="parentnode_title_picture parentnode_title_fix">

                        div>

                        <div class="parentnode_title_name" id="25" name="18">

                            投诉处理div>

                    div>

                div>

            div>

            <div class=" parentnode_noe">

                <div class=" parentnode_title ">

                    <div class="parentnode_title_fix parentnode_title_nochildnode_symbol">

                        <b style="display: none;">1b>div>

                    <div class="parentnode_title_check parentnode_title_fix">

                        <b>1b>div>

                    <div class="parentnode_title_picture parentnode_title_fix">

                    div>

                    <div class="parentnode_title_name" id="19" name="14">

                        部门管理div>

                div>

            div>

            <div class=" parentnode_noe">

                <div class=" parentnode_title ">

                    <div class="parentnode_title_fix parentnode_title_nochildnode_symbol">

                        <b style="display: none;">1b>div>

                    <div class="parentnode_title_check parentnode_title_fix">

                        <b>1b>div>

                    <div class="parentnode_title_picture parentnode_title_fix">

                    div>

                    <div class="parentnode_title_name" id="20" name="14">

                        功能管理div>

                div>

            div>

        div>

        <div class=" parentnode_noe">

            <div class=" parentnode_title ">

                <div class="parentnode_title_symbol parentnode_title_fix ">

                    <b>1b>div>

                <div class="parentnode_title_check parentnode_title_fix">

                    <b>1b>div>

                <div class="parentnode_title_picture parentnode_title_fix">

                div>

                <div class="parentnode_title_name" id="21" name="0">

                    公告管理div>

            div>

            <div class=" parentnode_noe">

                <div class=" parentnode_title ">

                    <div class="parentnode_title_fix parentnode_title_nochildnode_symbol">

                        <b style="display: none;">1b>div>

                    <div class="parentnode_title_check parentnode_title_fix">

                        <b>1b>div>

                    <div class="parentnode_title_picture parentnode_title_fix">

                    div>

                    <div class="parentnode_title_name" id="22" name="21">

                        发公告div>

                div>

            div>

            <div class=" parentnode_noe">

                <div class=" parentnode_title ">

                    <div class="parentnode_title_fix parentnode_title_nochildnode_symbol">

                        <b style="display: none;">1b>div>

                    <div class="parentnode_title_check parentnode_title_fix">

                        <b>1b>div>

                    <div class="parentnode_title_picture parentnode_title_fix">

                    div>

                    <div class="parentnode_title_name" id="23" name="21">

                        收公告div>

                div>

            div>

        div>

        <div class=" parentnode_noe">

            <div class=" parentnode_title ">

                <div class="parentnode_title_fix parentnode_title_nochildnode_symbol">

                    <b style="display: none;">1b>div>

                <div class="parentnode_title_check parentnode_title_fix">

                    <b>1b>div>

                <div class="parentnode_title_picture parentnode_title_fix">

                div>

                <div class="parentnode_title_name" id="26" name="0">

                    种植企业div>

            div>

        div>

        <div class=" parentnode_noe">

            <div class=" parentnode_title ">

                <div class="parentnode_title_fix parentnode_title_nochildnode_symbol">

                    <b style="display: none;">1b>div>

                <div class="parentnode_title_check parentnode_title_fix">

                    <b>1b>div>

                <div class="parentnode_title_picture parentnode_title_fix">

                div>

                <div class="parentnode_title_name" id="27" name="0">

                    存储企业div>

            div>

        div>

        <div class=" parentnode_noe">

            <div class=" parentnode_title ">

                <div class="parentnode_title_fix parentnode_title_nochildnode_symbol">

                    <b style="display: none;">1b>div>

                <div class="parentnode_title_check parentnode_title_fix">

                    <b>1b>div>

                <div class="parentnode_title_picture parentnode_title_fix">

                div>

                <div class="parentnode_title_name" id="28" name="0">

                    加工企业div>

            div>

        div>

    div>

效果图:

 

额~,好吧结构出来了,下一步添加样式,这样看着好别扭

Css文件:UserTreeView.min.css

body,html

{

    padding: 0;

    margin: 0;

    border: 0;

    font-family: 'Microsoft YaHei';

}

 

.parentnode

{

    border: 1px solid #808080;

    width: 280px;

    position: relative;

    text-align: left;

    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.09);

    display: inline-block;

    vertical-align: top;

}

 

.parentnode_noe

{

    width: 100%;

    padding-left: 20px;

}

 

.parentnode_title

{

    width: 100%;

    padding: 2px;

}

 

.parentnode_title_fix

{

    height: 24px;

    width: 18px;

    float: left;

    background-repeat: no-repeat;

    background-position: center;

    background-position-x: center;

    background-position-y: center;

}

 

.parentnode_title_symbol

{

    background-image: url("../../Images/TreeView/minus.gif");

}

.parentnode_title_symbol:hover

{

    cursor: pointer;

}

 

.parentnode_title_symbol b

{

    display: none;

}

 

.parentnode_title_check

{

    background-image: url("../../Images/TreeView/iconUncheckAll.gif");

}

 

.parentnode_title_check:hover

{

    cursor: pointer;

}

 

.parentnode_title_check b

{

    display: none;

}

 

.parentnode_title_picture

{

    width: 24px;

    height: 24px;

    background-image: url("../../Images/TreeView/folderClosed.gif");

}

 

.parentnode_title_nochildnode_symbol

{

    width: 18px;

}

 

.parentnode_title_nochildnode_picture

{

    width: 24px;

    height: 24px;

    background-image: url("../../Images/TreeView/leaf.gif");

}

 

.parentnode_tow

{

    padding-left: 20px;

}

 

.parentnode_three

{

    padding-left: 20px;

}

 

这里面引用的图片全部是我之前准备好的

 

 

不要忘了在你的HTML页面中引用你的css文件

 

运行效果图:

 

 

到这里我们的排版基本上完成了,下一步就是点击效果了,一样的想整理一下思路:

1、菜单展开收缩

2、复选框勾选

3、数据绑定

 

菜单展开收缩

Html页面引用jquery文件、UserTreeView.min.js

 

Js文件:UserTreeView.min.js

 $(function () {

            //注册菜单展开收缩事件

            $(".parentnode_title_symbol").click(function () {

                shrinkage($(this));

            })

        });

 

//菜单节点展开关闭

function shrinkage(dom) {

    //改变图片背景

    switch (parseInt($(dom).children("b").html())) {

        case 1: //关闭

            $(dom).css('background-image','url("../../Images/TreeView/plus.gif")');

            $(dom).children("b").html("2");

            //$(dom).parent().siblings().css("display", "none");

            $(dom).parent().siblings().hide(500);

            break;

        case 2://展开

            $(dom).css('background-image','url("../../Images/TreeView/minus.gif")');

            $(dom).children("b").html("1");

            $(dom).parent().siblings().show(500);

            break;

        default: break;

    }

}

效果图:

 

复选框选中

Js文件:UserTreeView.min.js

 $(function () {

            //注册菜单展开收缩事件

            $(".parentnode_title_symbol").click(function () {

                shrinkage($(this));

            })

            //注痢册复选框勾选事件

            $(".parentnode_title_check").click(function () {

                check($(this));

            })

        });

        //菜单节点展开关闭

function shrinkage(dom) {

    //改变图片背景

    switch (parseInt($(dom).children("b").html())) {

        case 1: //关闭

            $(dom).css('background-image','url("../../Images/TreeView/plus.gif")');

            $(dom).children("b").html("2");

            //$(dom).parent().siblings().css("display", "none");

            $(dom).parent().siblings().hide(500);

            break;

        case 2://展开

            $(dom).css('background-image','url("../../Images/TreeView/minus.gif")');

            $(dom).children("b").html("1");

            $(dom).parent().siblings().show(500);

            break;

        default: break;

    }

}

        //复选框勾选方法

        function check(dom) {

            //改变图片背景

            switch (parseInt($(dom).children("b").html())) {

                case 1:

                    //1、修改所有节点选择状态

                    $(dom).parent().parent().find("b").html("2");

                    //2、更换所有节点复选框背景图片(全选)

                    $(dom).parent().parent().find(".parentnode_title_check").css('background-image','url("../../Images/TreeView/iconCheckAll.gif")');

                    break;

                case 2:

                    //1、修改所有节点选择状态

                    $(dom).parent().parent().find("b").html("1");

                    //2、更换所有节点复选框背景图片(取消全选)

                    $(dom).parent().parent().find(".parentnode_title_check").css('background-image','url("../../Images/TreeView/iconUncheckAll.gif")');

                    break;

                case 3:

                    //1、修改所有节点选择状态

                    $(dom).parent().parent().find("b").html("2");

                    //2、更换所有节点复选框背景图片(全选)

$(dom).parent().parent().find(".parentnode_title_check").css('background-image','url("../../Images/TreeView/iconCheckAll.gif")');

                    break;

                default: break;

            }

            //判断父节点下所有子节点是否全部选中 父div->父div->兄弟div            if (($(dom).parent().parent().attr('class')).split(" ")[0] != "parentnode_noe") {

                var num = $(dom).parent().parent().siblings().find(".parentnode_title_check b").length;

                var checktrue = 0;

                var checkfalse = 0;

                //获取点击属性下b标签的内容                

if ($(dom).find("b").html() =="1") {

                    checkfalse++

                }

                else if ($(dom).find("b").html() =="2") {

                    checktrue++

                }

                //获取父节点下所有b标签的内容

                for (var i = 0; i < num; i++) {

                    if (!($(dom).parent().parent().siblings().eq(i).attr('class') =="parentnode_title")) {

 

                        if ($(dom).parent().parent().siblings().find(".parentnode_title_check b").eq(i).html() =="1") {

                            checkfalse++

                        }

                        else if ($(dom).parent().parent().siblings().find(".parentnode_title_check b").eq(i).html() =="2") {

                            checktrue++

                        }

                    }

                }

                //全都没有选中

                if (checktrue == 0) {

                    $(dom).parent().parent().siblings(".parentnode_title").find(".parentnode_title_check b").html("1");

                    $(dom).parent().parent().siblings(".parentnode_title").find(".parentnode_title_check").css('background-image','url("../../Images/TreeView/iconUncheckAll.gif")')

                } //全都选中

                else if (checkfalse == 0) {

                    $(dom).parent().parent().siblings(".parentnode_title").find(".parentnode_title_check b").html("2");

                    $(dom).parent().parent().siblings(".parentnode_title").find(".parentnode_title_check").css('background-image','url("../../Images/TreeView/iconCheckAll.gif")')

                } //选中一部分

                else if (checktrue != 0 && checkfalse !== 0) {

                    $(dom).parent().parent().siblings(".parentnode_title").find(".parentnode_title_check b").html("3");

                    $(dom).parent().parent().siblings(".parentnode_title").find(".parentnode_title_check").css('background-image','url("../../Images/TreeView/iconCheckGray.gif")')

                }

            }

        }

效果图:

 

 

数据绑定

这个地方我使用Json做了一个模拟数据

Js文件:UserTreeView.min.js

 

 $(function () {

//初始化动态加载控件

    initialize();

            //注册菜单展开收缩事件

            $(".parentnode_title_symbol").click(function () {

                shrinkage($(this));

            })

            //注册复选框勾选事件

            $(".parentnode_title_check").click(function () {

                check($(this));

            })

        });

 

//初始化控件,调用定义的js

        function initialize() {

            $.ajax({

                type: 'POST',

                url: "/UserTreeView.ashx",//访问地址,获取数据

                data: {},

                //dataType: "Json",

                async: false, //默认是true,false为同步

                success: function (data) {

                    //模拟数据

                    data = {

                        "tbFuncDic":

                        [

                            { "FunID": 14,"ParentID": 0, "FunName": "系统管理"},

                            { "FunID": 15,"ParentID": 14, "FunName": "用户管理"},

                            { "FunID": 16,"ParentID": 14, "FunName": "角色功能管理" },

                            { "FunID": 17,"ParentID": 14, "FunName": "角色管理" },

                            { "FunID": 18,"ParentID": 14, "FunName": "用户角色管理"},

                            { "FunID": 19,"ParentID": 14, "FunName": "部门管理"},

                            { "FunID": 20,"ParentID": 14, "FunName": "功能管理"},

                            { "FunID": 21,"ParentID": 0, "FunName": "公告管理" },

                            { "FunID": 22,"ParentID": 21, "FunName": "发公告" },

                            { "FunID": 23,"ParentID": 21, "FunName": "收公告" },

                            { "FunID": 24,"ParentID": 18, "FunName": "召回信息" },

                            { "FunID": 25,"ParentID": 18, "FunName": "投诉处理" },

                            { "FunID": 26,"ParentID": 0, "FunName": "种植企业" },

                            { "FunID": 27,"ParentID": 0, "FunName": "存储企业" },

                            { "FunID": 28,"ParentID": 0, "FunName": "加工企业" },

                            { "FunID": 29,"ParentID": 24, "FunName": "三级" },

                            { "FunID": 30,"ParentID": 24, "FunName": "三级" },

                            { "FunID": 31,"ParentID": 24, "FunName": "三级" },

                            { "FunID": 32,"ParentID": 31, "FunName": "四级" },

                            { "FunID": 33,"ParentID": 31, "FunName": "四级" },

                        ]

                    }

                    databinding(data); //绑定数据

                }

            });

        }

//循环绑定数据

function databinding(data) {

    //动态创建树形菜单

    var parentnodediv = $(".parentnode");

    for (var i = 0; i < data.tbFuncDic.length; i++) {

        //最上层父节点

        if (data.tbFuncDic[i].ParentID == 0) {

            Cycledata(parentnodediv, data.tbFuncDic[i]);

        }

    }

    //创建子节点

    if (data.tbFuncDic.length > 0) {

        childnodes(data);

    }

}

//创建子节点

function childnodes(data) {

    for (var j = 0; j < $(".parentnode").find(".parentnode_title_name").length; j++) {

        for (var i = 0; i < data.tbFuncDic.length ; i++) {

            if (data.tbFuncDic[i].ParentID == $(".parentnode").find(".parentnode_title_name")[j].id) {

                var parentnodediv = $($(".parentnode").find(".parentnode_title_name")[j]).parent().parent();

                Cycledata(parentnodediv, data.tbFuncDic[i]);

            }

        }

    }

}

 

//绑定数据方法

function Cycledata(parentnodediv, data) {

 

    var parentnode_noe = document.createElement("div");//创建一个div

    parentnode_noe.className = " parentnode_noe";//为div添加class

    parentnodediv.append(parentnode_noe);//将其添加到div末尾

 

    var parentnode_title = document.createElement("div");//创建一个div

    parentnode_title.className = " parentnode_title ";//为div添加class

    parentnode_noe.appendChild(parentnode_title);//将其添加到div末尾

 

    var parentnode_title_symbol = document.createElement("div");//创建一个div

    parentnode_title_symbol.className = "parentnode_title_symbol parentnode_title_fix ";//为div添加class

    parentnode_title.appendChild(parentnode_title_symbol);//将其添加到div末尾

    var b = document.createElement("b");//创建一个b标签

    b.innerHTML = 1;//为b添加内容

    parentnode_title_symbol.appendChild(b);//将其添加到div末尾

 

    var parentnode_title_check = document.createElement("div");//创建一个div

    parentnode_title_check.className = "parentnode_title_check parentnode_title_fix";//为div添加class

    parentnode_title.appendChild(parentnode_title_check);//将其添加到div末尾

    var b = document.createElement("b");//创建一个b标签

    b.innerHTML = 1;//为b添加内容

    parentnode_title_check.appendChild(b);//将其添加到div末尾

 

    var parentnode_title_picture = document.createElement("div");//创建一个div

    parentnode_title_picture.className = "parentnode_title_picture parentnode_title_fix";//为div添加class

    parentnode_title.appendChild(parentnode_title_picture);//将其添加到div末尾

 

    var parentnode_title_name = document.createElement("div");//创建一个div

    parentnode_title_name.className = "parentnode_title_name";//为div添加class

    parentnode_title_name.innerHTML = data.FunName;//为div添加class

    parentnode_title_name.id = data.FunID;//为div添加ID

    parentnode_title_name.setAttribute("name", data.ParentID);

    parentnode_title.appendChild(parentnode_title_name);//将其添加到div末尾

}

效果图:

 

与模拟数据不匹配,删除HTML页面填充的静态数据

 

效果图:

静态页面图

 

 

我们发现结构完全一样,但是收缩展开图标全部都有,怎么办呢

Js文件:UserTreeView.min.js

$(function () {

    //初始化动态加载控件

    initialize();

    //注册菜单展开收缩事件

    $(".parentnode_title_symbol").click(function () {

        shrinkage($(this));

    })

    //注册复选框勾选事件

    $(".parentnode_title_check").click(function () {

        check($(this));

    })

    //当没有子节点的div去除样式

    upclass();

});

 

//当没有子节点的div去除样式

function upclass() {

    $(".parentnode_title").each(function () {

        var me = $(this);

        if (me.siblings().length == 0) {

            me.find(".parentnode_title_symbol b").css("display","none");

            me.find(".parentnode_title_symbol").addClass("parentnode_title_nochildnode_symbol").removeClass("parentnode_title_symbol");

        }

    })

}

运行效果:

 

搞定

下面我把完整代码粘贴在下面

HTML页面:UserTreeView.htm

DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width" />

    <script src="~/Scripts/Jquery-3.1.1/jquery-3.1.1.js">script>

    <script src="~/Scripts/Jquery-3.1.1/jquery-3.1.1.min.js">script>

@*    *@

    <script src="~/Scripts/UserTreeView/UserTreeView.min.js">script>

    <link href="~/Scripts/UserTreeView/UserTreeView.min.css" rel="stylesheet" />

    <title>用户自定义树形菜单title>

    <script type="text/javascript">

        //初始化控件,调用定义的js

        function initialize() {

            $.ajax({

                type: 'POST',

                url: "/UserTreeView/Initialize",

                data: {},

                dataType: "Json",

                async: false,//默认是true,false为同步

                success: function (data) {

                    //模拟数据

                    data = {

                        "tbFuncDic":

                        [

                            { "FunID": 14,"ParentID": 0, "FunName": "系统管理" },

                            { "FunID": 15,"ParentID": 14, "FunName": "用户管理" },

                            { "FunID": 16,"ParentID": 14, "FunName": "角色功能管理" },

                            { "FunID": 17,"ParentID": 14, "FunName": "角色管理" },

                            { "FunID": 18,"ParentID": 14, "FunName": "用户角色管理" },

                            { "FunID": 19,"ParentID": 14, "FunName": "部门管理" },

                            { "FunID": 20,"ParentID": 14, "FunName": "功能管理" },

                            { "FunID": 21,"ParentID": 0, "FunName": "公告管理" },

                            { "FunID": 22,"ParentID": 21, "FunName": "发公告" },

                            { "FunID": 23,"ParentID": 21, "FunName": "收公告" },

                            { "FunID": 24,"ParentID": 18, "FunName": "召回信息" },

                            { "FunID": 25,"ParentID": 18, "FunName": "投诉处理" },

                            { "FunID": 26,"ParentID": 0, "FunName": "种植企业" },

                            { "FunID": 27,"ParentID": 0, "FunName": "存储企业" },

                            { "FunID": 28,"ParentID": 0, "FunName": "加工企业" },

                            { "FunID": 29,"ParentID": 24, "FunName": "三级" },

                            { "FunID": 30,"ParentID": 24, "FunName": "三级" },

                            { "FunID": 31,"ParentID": 24, "FunName": "三级" },

                            { "FunID": 32,"ParentID": 31, "FunName": "四级" },

                            { "FunID": 33,"ParentID": 31, "FunName": "四级" },

                        ]

                    }

                    databinding(data);//绑定数据

                }

            });

        }

 

    script>

head>

<body>

    @*树形菜单容器*@

    <div class="parentnode">

    div>

body>

html>

 

CSS页面:UserTreeView.min.css

bodt, html

{

    padding: 0;

    margin: 0;

    border: 0;

    font-family: 'Microsoft YaHei';

}

 

.parentnode

{

    border: 1px solid #808080;

    width: 280px;

    position: relative;

    text-align: left;

    box-shadow: 0 1px 3px rgba(0,0,0,0.05),0 1px 3px rgba(0,0,0,0.09);

    display: inline-block;

    vertical-align: top;

}

 

.parentnode_noe

{

    width: 100%;

    padding-left: 20px;

}

 

.parentnode_title

{

    width: 100%;

    padding: 2px;

}

 

.parentnode_title_fix

{

    height: 24px;

    width: 18px;

    float: left;

    background-repeat: no-repeat;

    background-position: center;

    background-position-x: center;

    background-position-y: center;

}

 

.parentnode_title_symbol

{

    background-image: url("../../Image/minus.gif");

}

 

    .parentnode_title_symbol:hover

    {

        cursor: pointer;

    }

 

    .parentnode_title_symbol b

    {

        display: none;

    }

 

.parentnode_title_check

{

    background-image: url("../../Image/iconUncheckAll.gif");

}

 

    .parentnode_title_check:hover

    {

        cursor: pointer;

    }

 

    .parentnode_title_check b

    {

        display: none;

    }

 

.parentnode_title_picture

{

    width: 24px;

    height: 24px;

    background-image: url("../../Image/folderClosed.gif");

}

 

.parentnode_title_nochildnode_symbol

{

    width: 18px;

}

 

.parentnode_title_nochildnode_picture

{

    width: 24px;

    height: 24px;

    background-image: url("../../Image/leaf.gif");

}

 

.parentnode_tow

{

    padding-left: 20px;

}

 

.parentnode_three

{

    padding-left: 20px;

}

JS页面:UserTreeView.min.js

$(function () {

    //初始化动态加载控件

    initialize();

    //注册菜单展开收缩事件

    $(".parentnode_title_symbol").click(function () {

        shrinkage($(this));

    })

    //注册复选框勾选事件

    $(".parentnode_title_check").click(function () {

        check($(this));

    })

    //当没有子节点的div去除样式

    upclass();

});

//复选框勾选方法

function check(dom) {

    //改变图片背景

    switch (parseInt($(dom).children("b").html())) {

        case 1:

            //1、修改所有子节点选择状态

            $(dom).parent().parent().find("b").html("2");

            //2、更换所有子节点复选框背景图片(全选)

            $(dom).parent().parent().find(".parentnode_title_check").css('background-image','url("../../Image/iconCheckAll.gif")');

            break;

        case 2:

            //1、修改所有子节点选择状态

            $(dom).parent().parent().find("b").html("1");

            //2、更换所有子节点复选框背景图片(取消全选)

            $(dom).parent().parent().find(".parentnode_title_check").css('background-image','url("../../Image/iconUncheckAll.gif")');

            break;

        case 3:

            //1、修改所有子节点选择状态

            $(dom).parent().parent().find("b").html("2");

            //2、更换所有子节点复选框背景图片(全选)

            $(dom).parent().parent().find(".parentnode_title_check").css('background-image','url("../../Image/iconCheckAll.gif")');

            break;

        default: break;

    }

    //判断父节点下所有子节点是否全部选中 父div->父div->兄弟div

    if (($(dom).parent().parent().attr('class')).split(" ")[0] !="parentnode_noe") {

        var num = $(dom).parent().parent().siblings().find(".parentnode_title_check b").length;

        var checktrue = 0;

        var checkfalse = 0;

        //alert($(this).find("b").html());//获取点击属性下b标签的内容

        if ($(dom).find("b").html() =="1") {

            checkfalse++

        }

        else if ($(dom).find("b").html() =="2") {

            checktrue++

        }

        //获取父节点下所有b标签的内容

        for (var i = 0; i < num; i++) {

            if (!($(dom).parent().parent().siblings().eq(i).attr('class') =="parentnode_title")) {

 

                if ($(dom).parent().parent().siblings().find(".parentnode_title_check b").eq(i).html() =="1") {

                    checkfalse++

                }

                else if ($(dom).parent().parent().siblings().find(".parentnode_title_check b").eq(i).html() =="2") {

                    checktrue++

                }

            }

        }

        //全都没有选中

        if (checktrue == 0) {

            $(dom).parent().parent().siblings(".parentnode_title").find(".parentnode_title_check b").html("1");

            $(dom).parent().parent().siblings(".parentnode_title").find(".parentnode_title_check").css('background-image','url("../../Image/iconUncheckAll.gif")')

        }//全都选中

        else if (checkfalse == 0) {

            $(dom).parent().parent().siblings(".parentnode_title").find(".parentnode_title_check b").html("2");

            $(dom).parent().parent().siblings(".parentnode_title").find(".parentnode_title_check").css('background-image','url("../../Image/iconCheckAll.gif")')

        }//选中一部分

        else if (checktrue != 0 && checkfalse !== 0) {

            $(dom).parent().parent().siblings(".parentnode_title").find(".parentnode_title_check b").html("3");

            $(dom).parent().parent().siblings(".parentnode_title").find(".parentnode_title_check").css('background-image','url("../../Image/iconCheckGray.gif")')

        }

    }

}

//菜单子节点展开关闭

function shrinkage(dom) {

    //改变图片背景

    switch (parseInt($(dom).children("b").html())) {

        case 1://关闭

            $(dom).css('background-image','url("../../Image/plus.gif")');

            $(dom).children("b").html("2");

            //$(dom).parent().siblings().css("display", "none");

            $(dom).parent().siblings().hide(500);

            break;

        case 2://展开

            $(dom).css('background-image','url("../../Image/minus.gif")');

            $(dom).children("b").html("1");

            $(dom).parent().siblings().show(500);

            break;

        default: break;

    }

 

}

//循环绑定数据

function databinding(data) {

    //动态创建树形菜单

    var parentnodediv = $(".parentnode");

    for (var i = 0; i < data.tbFuncDic.length; i++) {

        //最上层父节点

        if (data.tbFuncDic[i].ParentID == 0) {

            Cycledata(parentnodediv, data.tbFuncDic[i]);

        }

    }

    //创建子节点

    if (data.tbFuncDic.length > 0) {

        childnodes(data);

    }

}

//创建子节点

function childnodes(data) {

    for (var j = 0; j < $(".parentnode").find(".parentnode_title_name").length; j++) {

        for (var i = 0; i < data.tbFuncDic.length ; i++) {

            if (data.tbFuncDic[i].ParentID == $(".parentnode").find(".parentnode_title_name")[j].id) {

                var parentnodediv = $($(".parentnode").find(".parentnode_title_name")[j]).parent().parent();

                Cycledata(parentnodediv, data.tbFuncDic[i]);

            }

        }

    }

}

 

//绑定数据方法

function Cycledata(parentnodediv, data) {

 

    var parentnode_noe = document.createElement("div");//创建一个div

    parentnode_noe.className = " parentnode_noe";//为div添加class

    parentnodediv.append(parentnode_noe);//将其添加到div末尾

 

    var parentnode_title = document.createElement("div");//创建一个div

    parentnode_title.className = " parentnode_title ";//为div添加class

    parentnode_noe.appendChild(parentnode_title);//将其添加到div末尾

 

    var parentnode_title_symbol = document.createElement("div");//创建一个div

    parentnode_title_symbol.className = "parentnode_title_symbol parentnode_title_fix ";//为div添加class

    parentnode_title.appendChild(parentnode_title_symbol);//将其添加到div末尾

    var b = document.createElement("b");//创建一个b标签

    b.innerHTML = 1;//为b添加内容

    parentnode_title_symbol.appendChild(b);//将其添加到div末尾

 

    var parentnode_title_check = document.createElement("div");//创建一个div

    parentnode_title_check.className = "parentnode_title_check parentnode_title_fix";//为div添加class

    parentnode_title.appendChild(parentnode_title_check);//将其添加到div末尾

    var b = document.createElement("b");//创建一个b标签

    b.innerHTML = 1;//为b添加内容

    parentnode_title_check.appendChild(b);//将其添加到div末尾

 

    var parentnode_title_picture = document.createElement("div");//创建一个div

    parentnode_title_picture.className = "parentnode_title_picture parentnode_title_fix";//为div添加class

    parentnode_title.appendChild(parentnode_title_picture);//将其添加到div末尾

 

    var parentnode_title_name = document.createElement("div");//创建一个div

    parentnode_title_name.className = "parentnode_title_name";//为div添加class

    parentnode_title_name.innerHTML = data.FunName;//为div添加class

    parentnode_title_name.id = data.FunID;//为div添加ID

    parentnode_title_name.setAttribute("name", data.ParentID);

    parentnode_title.appendChild(parentnode_title_name);//将其添加到div末尾

}

 

//当没有子节点的div去除样式

function upclass() {

    $(".parentnode_title").each(function () {

        var me = $(this);

        if (me.siblings().length == 0) {

            me.find(".parentnode_title_symbol b").css("display","none");

            me.find(".parentnode_title_symbol").addClass("parentnode_title_nochildnode_symbol").removeClass("parentnode_title_symbol");

        }

    })

}

你可能感兴趣的:(HTML+JS+CSS自定义树形菜单)