前端JQuery开发 树形组件

jquery写的一个树形组件,只写了功能逻辑,暂时没写初始化数据的方法。

html 代码

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>newslist</title>
    <script src=”http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js”></script>
    <style>
        #tree {
            width: 930px;
            height: auto;
            border: solid #ccc 1px;
        }
        .tree_head {
            width: 100%;
            height: 45px;
            line-height: 45px;
            border-bottom: solid #ccc 1px;
            background: #ebebeb;
        }
        .tree_head button {
            width: 85px;
            height: 26px;
            line-height: 24px;
            border: solid #ccc 1px;
            background: #f8f8f8;
            cursor: pointer;
            position: relative;
        }
        .tree_head .t_h_tj {
            padding-left: 19px;
        }
        .tree_head .t_h_tj img {
            position: absolute;
            top: 5px;
            left: 7px;
        }
        .fir_t {
            width: 870px;
            height: 40px;
            border: solid #CCC 1px;
            line-height: 40px;
            margin-left: 15px;
            overflow: hidden;
            padding-left: 30px;
            background: #fff;
        }
        .fir_t span {
            line-height: 40px;
        }
        .tr_btn {
            float: right;
            margin-right: 15px;
            margin-top: 10px;
        }
        .tr_btn button {
            background: none;
            border: none;
            cursor: pointer;
        }
        .sec_img {
            width: 25px;
            float: left;
            margin-left: 40px;
        }
        .sec_a {
            width: 820px;
            height: 40px;
            border: solid #CCC 1px;
            line-height: 40px;
            overflow: hidden;
            padding-left: 30px;
            background: #fff;
            float: left;
        }
        .sec_a .tr_btn {
            margin-top: 10px;
        }
        .sec_a:after {
            height: 0;
            clear: both;
            content: “”;
            visibility: hidden;
        }
        .sec_t {
            clear: both;
            margin: 10px 0;
            overflow: hidden;
        }
        .tr_contain1 {
            background: url(http://cdn.attach.qdfuns.com/notes/pics/201606/06/141955bbccjdfzj4fdzr6x.png) 13px 0 repeat-y;
        }
        .tr_contain2 {
            margin: 10px 0;
            background: url(http://cdn.attach.qdfuns.com/notes/pics/201606/06/141955bbccjdfzj4fdzr6x.png) 13px 0 repeat-y;
            clear: both;
            margin-top: -14px;
            overflow: hidden;
            position: relative;
        }
        .ychx,
        .ychx1,
        .ychx2 {
            width: 25px;
            height: 29px;
            position: absolute;
            background: #fff;
            left: 30px;
            bottom: 0;
            display: block;
        }
        .thi_img {
            width: 25px;
            float: left;
            margin-left: 40px;
        }
        .thi_a {
            width: 770px;
            height: 40px;
            border: solid #CCC 1px;
            line-height: 40px;
            overflow: hidden;
            padding-left: 30px;
            background: #fff;
            float: left;
        }
        .thi_a span {
            line-height: 40px;
        }
        .thi_a .tr_btn {
            margin-top: 7px;
        }
        .thi_t {
            clear: both;
            margin: 10px 0;
            overflow: hidden;
        }
        .tr_contain3 {
            margin-left: 50px;
            background: url(http://cdn.attach.qdfuns.com/notes/pics/201606/06/141955bbccjdfzj4fdzr6x.png) 13px 0 repeat-y;
            clear: both;
            margin-top: -10px;
            overflow: hidden;
            position: relative;
        }
        .fou_img {
            width: 25px;
            float: left;
            margin-left: 40px;
        }
        .fou_a {
            width: 720px;
            height: 40px;
            border: solid #CCC 1px;
            line-height: 40px;
            overflow: hidden;
            padding-left: 30px;
            background: #fff;
            float: left;
        }
        .fou_a span {
            line-height: 40px;
        }
        .fou_a .tr_btn {
            margin-top: 7px;
        }
        .fou_t {
            clear: both;
            margin: 10px 0;
            overflow: hidden;
        }
        .tr_contain4 {
            margin-left: 50px;
            background: url(http://cdn.attach.qdfuns.com/notes/pics/201606/06/141955bbccjdfzj4fdzr6x.png) 13px 0 repeat-y;
            clear: both;
            margin-top: -10px;
            overflow: hidden;
            position: relative;
        }
    </style>
</head>
<body>
    <div id=”contain05242″>
        <div class=”main_right”>
            <div id=”tree”>
                <div class=”tree_head”>&emsp;&emsp;资料分类&emsp;&emsp;
                    <button id=”add_fl” name=”” class=”t_h_tj”>
                        <img src=”http://cdn.attach.qdfuns.com/notes/pics/201606/06/142005iebz585b6k9y59i6.png” width=”15″ />添加分类</button>
                    <button id=”” name=””>保存更改</button>
                </div>
                ![border](attimg://article/content/picture/201606/06/141640h11zzurpddd00f0j.png)
            </div>
        </div>
    </div>
    <script type=”text/javascript”>
        $(document).ready(function () {
            var js = 0;
            var js2 = 0;
            var js3 = 0;
            var js4 = 0;
            //增加新类别方法
            function xmc() {
                var name = prompt(“请输入类别名称”, “”);
                if (name != null && name != “”) {
                    return name;
                }
                else {
                    return false;
                }
            }
            //修改类别名称方法
            function xgmc() {
                var xgname = prompt(“请输入新名称”, “”);
                if (xgname != null && xgname != “”) {
                    return xgname;
                }
            }
            //最上边“添加分类”方法
            $(“#add_fl”).click(function () {
                var fenlei = “”;
                fenlei += ‘<div class=”tr_contain1″ id=”contain1’ + js + ‘”><dl class=”fir_t”><img src=”http://cdn.attach.qdfuns.com/notes/pics/201606/06/141640t63fjygpr07z6fd7.png” /><span class=”yjmc” id=”yjmc’ + js + ‘”></span><dt class=”tr_btn”><button class=”firbj” name=”” id=”fir_bj’ + js + ‘”><img src=”http://cdn.attach.qdfuns.com/notes/pics/201606/06/142023n0emhkyh55ykl1le.png” /></button><button class=”firadd” name=”” id=”fir_add’ + js + ‘”><img src=”http://cdn.attach.qdfuns.com/notes/pics/201606/06/142005iebz585b6k9y59i6.png”></button><button class=”firdel” name=”” id=”fir_del’ + js + ‘”><img src=”http://cdn.attach.qdfuns.com/notes/pics/201606/06/142014vb8qhbbzos1ir01q.png” width=”15″ /></button></dt></dl></div>’;
                var cc = xmc();
                if (cc != false) {
                    $(“#tree”).append(fenlei);
                    $(“#yjmc” + js).text(cc);
                }
                js++;
            });
            //一级菜单编辑名称
            $(“#tree”).on(“click”, “.firbj”, function () {
                $(this).parent().parent().find(“.yjmc”).text(xgmc());
            });
            //一级菜单删除
            $(“#tree”).on(“click”, “.firdel”, function () {
                $(this).parents(“.tr_contain1”).remove();
            });
            ////+++++++++一级点击添加二级菜单
            $(“#tree”).on(“click”, “.firadd”, function () {
                var fenlei2 = “”;
                fenlei2 += ‘<div class=”tr_contain2″ id=”contain2’ + js2 + ‘”><dl class=”sec_t”><img class=”sec_img” src=”http://cdn.attach.qdfuns.com/notes/pics/201606/06/141640h11zzurpddd00f0j.png” /><dt class=”sec_a”><span class=”ejmc” id=”ermc’ + js2 + ‘”></span><div class=”tr_btn”><button id=”sec_bj’ + js2 + ‘” class=”secbj” name=””><img src=”http://cdn.attach.qdfuns.com/notes/pics/201606/06/142023n0emhkyh55ykl1le.png” /></button><button id=”sec_bj’ + js2 + ‘” class=”secadd” name=””><img src=”http://cdn.attach.qdfuns.com/notes/pics/201606/06/142005iebz585b6k9y59i6.png”></button><button id=”sec_bj’ + js2 + ‘” class=”secdel” name=””><img src=”http://cdn.attach.qdfuns.com/notes/pics/201606/06/142014vb8qhbbzos1ir01q.png” width=”15″ /></button></div></dt></dl></div>’;
                var cc = xmc();
                if (cc != false) {
                    $(this).parents(“.tr_contain1”).append(fenlei2);
                    $(“#ermc” + js2).text(cc);
                }
                $(“#contain2″ + js2).append(‘<div class=”ychx”></div>’);
                $(“#contain2” + js2).siblings().find(“.ychx”).remove();
                js2++;
            })
            //二级菜单编辑名称
            $(“#tree”).on(“click”, “.secbj”, function () {
                $(this).parent().parent().find(“.ejmc”).text(xgmc());
            });
            //————二级菜单删除
            $(“#tree”).on(“click”, “.secdel”, function () {
                var fjindex = $(this).parents(“.tr_contain2”).index();
                var fjleng = $(this).parents(“.tr_contain2”).parent().find(“.tr_contain2”).length;
                var lsow = $(this).parents(“.tr_contain2”).attr(“id”);
                var sygjdid = $(this).parents(“.tr_contain2”).prev().attr(“id”);
                var shuw = ($(“#” + sygjdid).find(“.tr_contain3”).length) + ($(“#” + sygjdid).find(“.tr_contain4”).length);
                var sowol = $(this).parents(“.tr_contain2”).find(“.ychx”).height();
                //alert(sowol);
                var oseo = $(this).parents().find(“.tr_contain2”).last().attr(“id”);
                if (fjindex == fjleng) {
                    $(this).parents(“.tr_contain2″).siblings().last().append(‘<div class=”ychx”></div>’);
                }
                if (lsow == oseo) {
                    $(this).parents(“.tr_contain2”).siblings().last().find(“.ychx”).height(29 + 52 * shuw);
                }
                $(this).parents(“.tr_contain2”).remove();
                $(this).parents(“.tr_contain2”).siblings().find(“.ychx1”).remove();
            });
            ////++++++++二级点击添加三级菜单
            $(“#tree”).on(“click”, “.secadd”, function () {
                var fenlei3 = “”;
                fenlei3 += ‘<div class=”tr_contain3″ id=”contain3’ + js3 + ‘”><dl class=”thi_t”><img class=”thi_img” src=”http://cdn.attach.qdfuns.com/notes/pics/201606/06/141640h11zzurpddd00f0j.png” /><dt class=”thi_a”><span class=”sjmc” id=”sjmc’ + js3 + ‘”></span><div class=”tr_btn”><button id=”thi_bj’ + js3 + ‘” class=”thibj” name=””><img src=”http://cdn.attach.qdfuns.com/notes/pics/201606/06/142023n0emhkyh55ykl1le.png” /></button><button id=”thi_bj’ + js3 + ‘” class=”thiadd” name=””><img src=”http://cdn.attach.qdfuns.com/notes/pics/201606/06/142005iebz585b6k9y59i6.png”></button><button id=”thi_del’ + js3 + ‘” class=”thidel” name=””><img src=”http://cdn.attach.qdfuns.com/notes/pics/201606/06/142014vb8qhbbzos1ir01q.png” width=”15″ /></button></div></dt></dl></div>’;
                var dd = xmc();
                if (dd != false) {
                    $(this).parents(“.tr_contain2”).append(fenlei3);
                    $(“#sjmc” + js3).text(dd);
                }
                $(“#contain3″ + js3).append(‘<div class=”ychx1”></div>’);
                $(“#contain3” + js3).siblings().find(“.ychx1”).remove();
                var gddse = $(“.tr_contain3”).parent().find(“.ychx”).height();
                var clse = $(this).parents(“.tr_contain2”).attr(“id”);
                var lsoe = $(“.tr_contain2”).last().attr(“id”)
                if (clse == lsoe) {
                    $(“.tr_contain3”).parent().find(“.ychx”).height(gddse + 52);
                }
                js3++;
            });
            //三级菜单编辑名称
            $(“#tree”).on(“click”, “.thibj”, function () {
                $(this).parent().parent().find(“.sjmc”).text(xgmc());
            });
            //————-三级菜单删除
            $(“#tree”).on(“click”, “.thidel”, function () {
                var utrw = $(this).parents(“.tr_contain3”).find(“.ychx1”).height();
                var sowol = $(this).parents(“.tr_contain3”).parent().find(“.ychx”).height();
                var clse = $(this).parents(“.tr_contain3”).attr(“id”);
                var lsoe = $(this).parents(“.tr_contain2”).find(“.tr_contain3”).last().attr(“id”);
                var lsow = $(this).parents(“.tr_contain2”).attr(“id”);
                var oseo = $(this).parents().find(“.tr_contain2”).last().attr(“id”);
                var sygjdid = $(this).parents(“.tr_contain3”).prev().attr(“id”);
                var shuw = $(“#” + sygjdid).find(“.tr_contain4”).length;
                //console.log(lsoe);
                //console.log(clse);
                //判断他的兄弟元素有几个,如果有两个以上,给最后一个后面加上隐藏线
                if ($(this).parents(“.tr_contain3”).siblings(“.tr_contain3”).length >= 1) {
                    $(this).parents(“.tr_contain3”).siblings(“.tr_contain3″).last().append(‘<div class=”ychx1”></div>’);
                }
                if (lsoe == clse) {
                    //alert(“—-“);
                    $(this).parents(“.tr_contain3”).prev().find(“.ychx1”).height(29 + 52 * shuw);
                    $(this).parents(“.tr_contain2”).find(“.ychx”).height(sowol – 52);
                }
                $(this).parents(“.tr_contain3”).remove();
                $(this).parents(“.tr_contain2”).siblings().find(“.ychx1”).remove();
            });
            ////++++++++三级点击添加四级菜单
            $(“#tree”).on(“click”, “.thiadd”, function () {
                var fenlei4 = “”;
                fenlei4 += ‘<div class=”tr_contain4″ id=”contain4’ + js4 + ‘”><dl class=”fou_t”><img class=”fou_img” src=”http://cdn.attach.qdfuns.com/notes/pics/201606/06/141640h11zzurpddd00f0j.png” /><dt class=”fou_a”><span class=”shimc” id=”shimc’ + js4 + ‘”></span><div class=”tr_btn”><button id=”fou_bj’ + js4 + ‘” class=”foubj” name=””><img src=”http://cdn.attach.qdfuns.com/notes/pics/201606/06/142023n0emhkyh55ykl1le.png” /></button><button id=”fou_del’ + js4 + ‘” class=”foudel” name=””><img src=”http://cdn.attach.qdfuns.com/notes/pics/201606/06/142014vb8qhbbzos1ir01q.png” width=”15″ /></button></div></dt></dl></div>’;
                var ee = xmc();
                if (ee != false) {
                    $(this).parents(“.tr_contain3”).append(fenlei4);
                    $(“#shimc” + js4).text(ee);
                }
                $(“#contain4″ + js4).append(‘<div class=”ychx2”></div>’);
                $(“#contain4” + js4).siblings().find(“.ychx2”).remove();
                var utrw = $(this).parents(“.tr_contain3”).find(“.ychx1”).height();
                var sowol = $(this).parents(“.tr_contain3”).parent().find(“.ychx”).height();
                var clse = $(this).parents(“.tr_contain3”).attr(“id”);
                var lsoe = $(this).parents(“.tr_contain2”).find(“.tr_contain3”).last().attr(“id”);
                var lsow = $(this).parents(“.tr_contain2”).attr(“id”);
                var oseo = $(this).parents().find(“.tr_contain2”).last().attr(“id”);
                //console.log(lsoe);
                //console.log(clse);
                //判断他的父级是不是最后面的
                if (clse == lsoe) {
                    $(this).parents(“.tr_contain3”).find(“.ychx1”).height(utrw + 52);
                }
                //判断他的父级的父级是不是最后面的
                if (lsow == oseo) {
                    $(this).parents(“.tr_contain3”).find(“.ychx1”).height(utrw + 52);
                    $(this).parents(“.tr_contain2”).find(“.ychx”).height(sowol + 52);
                }
                js4++;
            });
            //四级菜单编辑名称
            $(“#tree”).on(“click”, “.foubj”, function () {
                $(this).parent().parent().find(“.shimc”).text(xgmc());
            });
            //————-四级菜单删除
            $(“#tree”).on(“click”, “.foudel”, function () {
                var utrw = $(this).parents(“.tr_contain3”).find(“.ychx1”).height();
                var sowol = $(this).parents(“.tr_contain3”).parent().find(“.ychx”).height();
                var clse = $(this).parents(“.tr_contain3”).attr(“id”);
                var lsoe = $(this).parents(“.tr_contain2”).find(“.tr_contain3”).last().attr(“id”);
                var lsow = $(this).parents(“.tr_contain2”).attr(“id”);
                var oseo = $(this).parents().find(“.tr_contain2”).last().attr(“id”);
                console.log(clse);
                console.log(lsoe);
                //判断他的父级是不是最后面的
                if (clse == lsoe) {
                    $(this).parents(“.tr_contain3”).find(“.ychx1”).height(utrw – 52);
                }
                //判断他的父级的父级是不是最后面的
                if (lsow == oseo) {
                    //$(this).parents(“.tr_contain3”).find(“.ychx1”).height(utrw-52);
                    $(this).parents(“.tr_contain2”).find(“.ychx”).height(sowol – 52);
                }
                //判断他的兄弟元素有几个,如果有两个以上,给最后一个后面加上隐藏线
                if ($(this).parents(“.tr_contain4”).siblings(“.tr_contain4”).length >= 1) {
                    $(this).parents(“.tr_contain4″).siblings().last().append(‘<div class=”ychx2”></div>’);
                }
                $(this).parents(“.tr_contain4”).remove();
            })
        })
    </script>
</body>
</html>

对前端开发的框架|前端 移动端开发 pc模拟安卓浏览器|前端模块化开发实战

» 本文来自:前端开发者 » 《前端JQuery开发 树形组件》
» 本文链接地址:https://www.rokub.com/4981.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!