上一个树形菜单的改进，增添了数据绑定功能而非仅仅的jq特效
Posted 前端小菜一枚
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了上一个树形菜单的改进，增添了数据绑定功能而非仅仅的jq特效相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.menulevelzero{display:inline-block;width:200px;height:30px;border: 1px solid black;text-align: center;line-height: 30px;font-size: 16px;}
.menulevelzero_input{width:198px;height:26px;display: none;}
.addbox{width:100px;height:69px;background-color: grey;display:none}
.addbox_list{color:black;border:1px solid black;}
.addbox_last,.addbox_first{height:46px;width:100px;background-color: grey;display:none}
button{display:inline-block;top:20px;left:200px; width:22px;}
</style>
</head>
<body>
<button class="menulevelzero_0" aaa>-</button><input class="menulevelzero_input" type="text" name="" id="" value="" /><div class="menulevelzero" id="menulevelzero_0">总菜单</div>
<div class="menulevelzero_box">
</div>
<div class="addbox">
<div class="addbox_list addbox_add">添加</div>
<div class="addbox_list addbox_chg">修改</div>
<div class="addbox_list addbox_del">删除</div>
</div>
<div class="addbox_first">
<div class="addbox_list addbox_add">添加</div>
<div class="addbox_list addbox_chg">修改</div>
<div></div>
</div>
<div class="addbox_last">
<div class="addbox_list addbox_chg">修改</div>
<div class="addbox_list addbox_del">删除</div>
</div>
</body>
<script type="text/javascript">
var count=0;
var menuid;
var inputval;
var parent;
var str;
// addbox文本框的定位
function addboxposition(){
var e = event || window.event;
$(".addbox").css({"display":"inline-block",
"position":"absolute",
})
function getviewheight(){
return document.documentElement.clientHeight || document.body.clientHeight ;
}
function getviewwidth(){
return document.documentElement.clientWidth || document.body.clientWidth ;
}
if(e.clientX<=getviewwidth()-100){
$(".addbox").css("left",e.clientX);
}else{
$(".addbox").css("left",(e.clientX-100));
}
if(e.clientY<=getviewheight()-69){
$(".addbox").css("top",e.clientY);
}else{
$(".addbox").css("top",(e.clientY-69));
}
$(".addbox_last").css("display","none");
$(".addbox_first").css("display","none");
}
// 总菜单addbox文本框展示
function addboxpositionfirst(){
var e = event || window.event;
$(".addbox_first").css({"display":"inline-block",
"position":"absolute",
})
function getviewheight(){
return document.documentElement.clientHeight || document.body.clientHeight ;
}
function getviewwidth(){
return document.documentElement.clientWidth || document.body.clientWidth ;
}
if(e.clientX<=getviewwidth()-100){
$(".addbox_first").css("left",e.clientX);
}else{
$(".addbox_first").css("left",(e.clientX-100));
}
if(e.clientY<=getviewheight()-46){
$(".addbox_first").css("top",e.clientY);
}else{
$(".addbox_first").css("top",(e.clientY-46));
}
$(".addbox").css("display","none");
$(".addbox_last").css("display","none");
}
// 四级菜单addbox文本框展示
$(".menulevelzero_box").on("contextmenu",".menulevelfourth",function(e){return false;}).on("mousedown",".menulevelfourth", function addmenulevelfourth(event, a){
if(event.which == 3 || a == ‘right‘){
menuid=$(this).attr("id");
addboxpositionlast();
}
})
function addboxpositionlast(){
var e = event || window.event;
$(".addbox_last").css({"display":"inline-block",
"position":"absolute",
})
function getviewheight(){
return document.documentElement.clientHeight || document.body.clientHeight ;
}
function getviewwidth(){
return document.documentElement.clientWidth || document.body.clientWidth ;
}
if(e.clientX<=getviewwidth()-100){
$(".addbox_last").css("left",e.clientX);
}else{
$(".addbox_last").css("left",(e.clientX-100));
}
if(e.clientY<=getviewheight()-46){
$(".addbox_last").css("top",e.clientY);
}else{
$(".addbox_last").css("top",(e.clientY-46));
}
$(".addbox").css("display","none");
$(".addbox_first").css("display","none");
}
// addbox 右键事件的阻止
$(".addbox").on("contextmenu",function(e){return false;});
$(".addbox_first").on("contextmenu",function(e){return false;});
$(".addbox_last").on("contextmenu",function(e){return false;});
// 点击全屏隐藏 addbox事件
$("body").on("click",function boxhide(){
$(".addbox").css("display","none");
$(".addbox_last").css("display","none");
$(".addbox_first").css("display","none");
})
// 数据处理
var arr0 = [{CID:"menulevelzero_0",Istake:0,content:"总菜单",CClass:"menulevelzero_box",CList:[]}];
// 数据添加函数
function dataadd() {
if (menuid == arr0[0].CID){
var arr=arr0[0].CList;
var obj = {CID:"menulevelfirst"+count,Istake:0,content:"一级菜单",CClass:"menulevelfirst_box",CList:[]}
arr.push(obj);
arr0[0].Istake=arr.length;
count++;
}else{
var arr1 = arr0[0].CList;
for (var i=0;i<arr1.length;i++) {
if (menuid == arr1[i].CID){
var arr=arr1[i].CList;
arr.push({
CID:"menulevelsecond"+count,Istake:0,content:"二级菜单",CClass:"menulevelsecond_box",CList:[]
})
arr1[i].Istake=arr.length;
count++;
}else{
var arr2 = arr1[i].CList;
for (var j=0;j<arr2.length;j++) {
if (menuid == arr2[j].CID){
var arr=arr2[j].CList;
arr.push({
CID:"menulevelthird"+count,Istake:0,content:"三级菜单",CClass:"menulevelthird_box",CList:[]
})
arr2[j].Istake=arr.length;
count++;
}else{
var arr3 = arr2[j].CList;
for (var k=0;k<arr3.length;k++) {
if (menuid == arr3[k].CID){
var arr=arr3[k].CList;
arr.push({
CID:"menulevelfourth"+count,Istake:0,content:"四级菜单",CClass:"menulevelfourth_box",CList:[]
})
arr3[k].Istake=arr.length;
count++;
}
}
}
}
}
}
}
}
// 数据修改函数
function datachange() {
if (menuid == arr0[0].CID){
arr0[0].content=inputval;
}else{
var arr1 = arr0[0].CList;
for (var i=0;i<arr1.length;i++) {
if (menuid == arr1[i].CID){
arr1[i].content=inputval;
}else{
var arr2 = arr1[i].CList;
for (var j=0;j<arr2.length;j++) {
if (menuid == arr2[j].CID){
arr2[j].content=inputval;
}else{
var arr3 = arr2[j].CList;
for (var k=0;k<arr3.length;k++) {
if (menuid == arr3[k].CID){
arr3[k].content=inputval;
}else{
var arr4 = arr3[k].CList;
for (var a=0;a<arr4.length;a++) {
if (menuid == arr4[a].CID){
arr4[a].content=inputval;
}
}
}
}
}
}
}
}
}
}
// 数据删除函数
function datadel() {
var arr1 = arr0[0].CList;
for (var i=0;i<arr1.length;i++) {
if (menuid == arr1[i].CID){
arr1.splice(i,1);
arr0[0].Istake=arr1.length;
}else{
var arr2 = arr1[i].CList;
for (var j=0;j<arr2.length;j++) {
if (menuid == arr2[j].CID){
arr2.splice(j,1);
arr1[i].Istake=arr2.length;
}else{
var arr3 = arr2[j].CList;
for (var k=0;k<arr3.length;k++) {
if (menuid == arr3[k].CID){
arr3.splice(k,1);
arr2[j].Istake=arr3.length;
}else{
var arr4 = arr3[k].CList;
for (var a=0;a<arr4.length;a++) {
if (menuid == arr4[a].CID){
arr4.splice(a,1);
arr3[k].Istake=arr4.length;
}
}
}
}
}
}
}
}
}
// 改变菜单样式
function setmenucss() {
$(".menulevelfirst").css({"display":"inline-block","width":"200px","height":"25px",
"border":"1px solid black",
"text-align": "center","line-height": "25px",
"font-size": "16px","background-color": "#fff"})
$(".menulevelsecond").css({"display":"inline-block","width":"200px","height":"25px",
"border":"1px solid black",
"text-align": "center","line-height": "25px",
"font-size": "16px","background-color": "#ccc"})
$(".menulevelthird").css({"display":"inline-block","width":"200px","height":"25px",
"border":"1px solid black",
"text-align": "center","line-height": "25px",
"font-size": "16px","background-color": "#999"})
$(".menulevelfourth").css({"display":"inline-block","width":"200px","height":"25px",
"border":"1px solid black",
"text-align": "center","line-height": "25px",
"font-size": "16px","background-color": "#666"})
$(".menu_input").css({"width":"198px","height":"21px",
"display": "none"})
$("button").css({"display":"inline-block","top":"20px","left":"200px","width":"22px"})
}
// 数据展示
function showlist(){
var html="";
if (arr0[0].Istake==0) {
$(".menulevelzero_0[aaa]").html(‘-‘);
} else{
$(".menulevelzero_0[aaa]").html(‘+‘);
}
var arr1 = arr0[0].CList;
for (var i=0;i<arr1.length;i++) {
if (arr1[i].Istake==0) {
html+=‘<button class="‘+arr1[i].CID+‘" aaa>-</button><input class="menu_input input‘+arr1[i].CID+‘" type="text" /><div class="menulevelfirst" id="‘+arr1[i].CID+‘">‘+arr1[i].content+‘</div><div class="menulevelfirst_box‘+arr1[i].CID+‘">‘;
} else{
html+=‘<button class="‘+arr1[i].CID+‘" aaa>+</button><input class="menu_input input‘+arr1[i].CID+‘" type="text" /><div class="menulevelfirst" id="‘+arr1[i].CID+‘">‘+arr1[i].content+‘</div><div class="menulevelfirst_box‘+arr1[i].CID+‘">‘;
}
var arr2 = arr1[i].CList;
for (var j=0;j<arr2.length;j++) {
if (arr2[j].Istake==0) {
html+=‘<button class="‘+arr2[j].CID+‘" aaa>-</button><input class="menu_input input‘+arr2[j].CID+‘" type="text" /><div class="menulevelsecond" id="‘+arr2[j].CID+‘">‘+arr2[j].content+‘</div><div class="menulevelsecond_box‘+arr2[j].CID+‘">‘;
} else{
html+=‘<button class="‘+arr2[j].CID+‘" aaa>+</button><input class="menu_input input‘+arr2[j].CID+‘" type="text" /><div class="menulevelsecond" id="‘+arr2[j].CID+‘">‘+arr2[j].content+‘</div><div class="menulevelsecond_box‘+arr2[j].CID+‘">‘;
}
var arr3 = arr2[j].CList;
for (var k=0;k<arr3.length;k++) {
if (arr3[k].Istake==0) {
html+=‘<button class="‘+arr3[k].CID+‘" aaa>-</button><input class="menu_input input‘+arr3[k].CID+‘" type="text" /><div class="menulevelthird" id="‘+arr3[k].CID+‘">‘+arr3[k].content+‘</div><div class="menulevelthird_box‘+arr3[k].CID+‘">‘;
} else{
html+=‘<button class="‘+arr3[k].CID+‘" aaa>+</button><input class="menu_input input‘+arr3[k].CID+‘" type="text" /><div class="menulevelthird" id="‘+arr3[k].CID+‘">‘+arr3[k].content+‘</div><div class="menulevelthird_box‘+arr3[k].CID+‘">‘;
}
var arr4 = arr3[k].CList;
for (var z=0;z<arr4.length;z++) {
html+=‘<button class="‘+arr4[z].CID+‘" aaa>-</button><input class="menu_input input‘+arr4[z].CID+‘" type="text" /><div class="menulevelfourth" id="‘+arr4[z].CID+‘">‘+arr4[z].content+‘</div><div class="menulevelfourth_box‘+arr4[z].CID+‘"></div><div bbb></div>‘;
}
html+=‘</div><div bbb></div>‘;
}
html+=‘</div><div bbb></div>‘;
}
html+=‘</div><div bbb></div>‘;
}
console.log(arr0);
$(".menulevelzero_box").html(html);
}
//操作一级菜单
//右键事件的阻止与新的右键事件的设置
$(".menulevelzero").on("contextmenu",function(e){return false;}).on("mousedown", function addmenulevelfirst(event, a){
if(event.which == 3 || a == ‘right‘){
menuid=$(this).attr("id"); //获取所点击DIV的id
addboxpositionfirst();
}
}).on("click",function (){
$(".menulevelzero_box").toggle();
})
//操作二级菜单
//右键事件的阻止与新的右键事件的设置
$(".menulevelzero_box").on("contextmenu",".menulevelfirst",function(e){return false;}).on("mousedown",".menulevelfirst", function addmenulevelsecond(event, a){
if(event.which == 3 || a == ‘right‘){
menuid=$(this).attr("id");
addboxposition();
}
}).on("click",".menulevelfirst",function firsttoggle(){ //菜单的点击收起点击释放
$(this).next().toggle();
})
//操作三级菜单
$(".menulevelzero_box").on("contextmenu",".menulevelsecond",function(e){return false;}).on("mousedown",".menulevelsecond", function addmenulevelthird(event, a){
if(event.which == 3 || a == ‘right‘){
menuid=$(this).attr("id");
addboxposition();
}
}).on("click",".menulevelsecond",function secondtoggle(){
$(this).next().toggle();
})
//操作四级菜单
$(".menulevelzero_box").on("contextmenu",".menulevelthird",function(e){return false;}).on("mousedown",".menulevelthird", function addmenulevelfourth(event, a){
if(event.which == 3 || a == ‘right‘){
menuid=$(this).attr("id");
addboxposition();
}
}).on("click",".menulevelthird",function thirdtoggle(){
$(this).next().toggle();
})
// 真!添加
$(".addbox_add").on("click",function addmenu(){
dataadd();
showlist();
setmenucss();
})
// addbox_chg 修改功能
$(".addbox_chg").on("click",function chgmenu(){
$("#"+menuid).css("display","none");
$("#"+menuid).prev().css("display","inline-block");
str = $("#"+menuid).html();
$("#"+menuid).prev().val(str);
});
$(".menulevelzero_box").on("blur","input[type=text]",function(){
$("#"+menuid).css("display","inline-block");
$("#"+menuid).prev().css("display","none");
var str1 = $("#"+menuid).prev().val().trim();
if (str1 != "") {
inputval=str1;
} else{
inputval=str;
}
datachange();
showlist();
setmenucss();
})
$(".menulevelzero_input").on("blur",function(){
$("#menulevelzero_0").css("display","inline-block");
$(this).css("display","none");
menuid=menulevelzero_0;
var str1 = $(this).val().trim();
if (str1 != "") {
inputval=str1;
} else{
inputval=str;
}
datachange();
showlist();
setmenucss();
})
// addbox_del 删除功能
$(".addbox_del").on("click",function delmenu(){
datadel();
showlist();
setmenucss();
})
</script>
</html>
与上一个比起来在功能上并没有大的改变，仍然是增删改，菜单收起与展开，以及是否有子菜单的标记功能
不同的是这个树形菜单是通过对数据的处理来进行菜单的变化，与上一个树形菜单单纯的jq特效而没有实用功能不同
这份树形菜单完全可以作为插件来使用，数据结构为对象与数组的嵌套 以下
// var arr0 = [{CID:"menulevelzero_0",Istake:0,content:"总菜单",CClass:"menulevelzero_box",CList:[ ]}]; // [ {总菜单 [ {一级菜单 [ {二级菜单 [ {三级菜单 [ {四级菜单[] },{ 四级菜单 } ] }, {三级菜单 [ ] } ] } , { 二级菜单 [] } ] }, {一级菜单 [] } ] } ]
// var arr1 = arr0[0].CList; //内部对象为一级菜单 // [ {一级菜单 [ {二级菜单 [ {三级菜单 [ {四级菜单[] },{ 四级菜单 } ] }, {三级菜单 [ ] } ] } , { 二级菜单 [] } ] }, {一级菜单 [] } ]
// var arr2 = arr1[i].CList; //[ {二级菜单 [ {三级菜单 [ {四级菜单[] },{ 四级菜单 } ] }, {三级菜单 [ ] } ] } , { 二级菜单 [] } ]
// var arr3 = arr2[i].CList; //[ {三级菜单 [ {四级菜单[] },{ 四级菜单 } ] }, {三级菜单 [ ] } ]
// var arr4 = arr3[i].CList; //[ {四级菜单[] },{ 四级菜单 } ]
以上是关于上一个树形菜单的改进，增添了数据绑定功能而非仅仅的jq特效的主要内容，如果未能解决你的问题，请参考以下文章