前端JQuery开发 树形组件
摘要：用jquery写的一个树形组件，只写了功能逻辑，暂时没写初始化数据的方法。 html 代码 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/x……
用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>
<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”>  资料分类  
<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>
</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
近期评论