上一个树形菜单的改进，增添了数据绑定功能而非仅仅的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; //[ {四级菜单[] },{ 四级菜单 } ]

时间： 2024-11-05 20:35:37

上一个树形菜单的改进，增添了数据绑定功能而非仅仅的jq特效的相关文章

回顾树形菜单的一些思考

什么都不说,先上代码. <!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=&q

EasyUI 树形菜单的显示（SpringMVC+Hibernate）

项目中要能够根据系统不同角色分配不同的权限,权限包括菜单和页面上的按钮,我都放到一个类里面,用一个menuOrFunction字段标明是菜单还是按钮.在EasyUI树中,要有它自己的ID,父Id,Url等属性.我把他们都放在一个Operation实体里面: package com.yang.bishe.entity; import java.util.HashSet; import java.util.Set; import javax.persistence.Column; import ja

Android学习笔记之树形菜单的应用...

PS:终于考完试了,总算是解脱了...可以正式上手项目开发了.... 学习内容: 1.掌握如何使用树形菜单...   对知识点进行一下补充...居然忘记了去学习树形菜单...不过在这里补上... ExpandableListView树形菜单...   树形菜单其实就是一个列表,只不过是在列表中再次嵌套一个或者是多个子菜单项,子菜单项中可以包括很多的内容...其实就拿QQ来说,就是使用了一个树形菜单...QQ中的分组管理其实就是树形菜单的一个应用...树形菜单继承与ListView...这里我们使

树形菜单

简单的一个树形菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>树形菜单</title> <style> body { font: 12px/20px 宋体; } img { vertical-align: center; border: none; } a { text-decorati

一个基于jQuery的简单树形菜单

在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才能够展开或关闭节点.另外,它还必需要求浏览器在兼容模式下才能正常使用(这个项目中使用的 easyUI 是 1.2.2 版本,新版的 Tree 不存在该问题),很是不方便. 想修改又无从下手,所以有单独写一个简单的树形菜单的想法,趁下班的时间,抽空写了一个简单的J

一个修改版的PHP ajax Tree树形菜单

国外的一个版本,发现有些错误,这两天修正了一下.PHP ajax Tree树形菜单,在PHP中快速实现一个目录列表类型的树形菜单,十分简洁漂亮,在PHP中应用广泛,本菜单基于Javascript和 XML技术实现.欢迎二次开发完善. 演示地址:http://www.codesc.net/other/php-tree-static/folder-tree-static.html相关网址:源码素材网 下载地址:http://www.codesc.net/other/php-tree-static.r

用dtree实现树形菜单 dtree使用说明

http://www.jb51.net/article/28566.htm 准备工作: 请从脚本之家http://www.jb51.net/jiaoben/31974.html下载dtree.zip文件 dtree.zip压缩包介绍: dtree是一个由JavaScript编写成的简单的树形菜单组件,目前免费并且开源. 目前有很多的树形菜单组件(比如ext),dtree是一种简单易懂的js组件, 不需要复杂的操作即可生产,同时支持动态从数据库引入数据 解压后有以下几部分: img文件夹: 包含树

JS树形菜单

超全的JS树形菜单源代码共享(有实例图) 树形菜单是很常用的效果,常用在管理软件当中,但是一套树形菜单已经不能满足需求,所以如果能有一套比较全面的树形菜单JS特效代码,将会非常方便,下面懒人萱将超全的JS树形菜单共享出来,相信你一定用得上. 一共包括八种,下面就一一介绍: 1.不同表现方式的JS树形菜单(如图所示) 2.复选框式的JS树形菜单(如图所示)左图为只可以选择单节点,右图为在选择子节点的同时选择父节点 3.可以重新排列节点并且具有拖放功能的js树形菜单(如图所示) 4.带有提示框的js

实用的树形菜单控件tree

 jQuery plugin: Treeview 这个插件能够把无序列表转换成可展开与收缩的Tree. jQuery plugin: Treeview  jQuery  jstree jsTree是一个基于jQuery的Tree控件.支持XML,JSON,Html三种数据源.提供创建,重命名,移动,删除,拖\放节点操作.可以自己自定义创建,删除,嵌套,重命名,选择节点的规则.在这些操作上可以添加多种监听事件.  jstree  jQuery UI Widgets  FileTreePanel F