zoukankan      html  css  js  c++  java
  • 上一个树形菜单的改进,增添了数据绑定功能而非仅仅的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;200px;height:30px;border: 1px solid black;text-align: center;line-height: 30px;font-size: 16px;}
    .menulevelzero_input{198px;height:26px;display: none;}
    .addbox{100px;height:69px;background-color: grey;display:none}
    .addbox_list{color:black;border:1px solid black;}
    .addbox_last,.addbox_first{height:46px;100px;background-color: grey;display:none}
    button{display:inline-block;top:20px;left:200px; 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('+');
    }
    $("#menulevelzero_0").html(arr0[0].content);
    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");
    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; //[ {四级菜单[] },{ 四级菜单 } ]

  • 相关阅读:
    通用权限管理设计 之 数据库结构设计
    jQuery LigerUI 插件介绍及使用之ligerDateEditor
    jQuery LigerUI 插件介绍及使用之ligerTree
    jQuery LigerUI V1.01(包括API和全部源码) 发布
    jQuery liger ui ligerGrid 打造通用的分页排序查询表格(提供下载)
    jQuery LigerUI V1.1.5 (包括API和全部源码) 发布
    jQuery LigerUI 使用教程表格篇(1)
    jQuery LigerUI V1.0(包括API和全部源码) 发布
    jQuery LigerUI V1.1.0 (包括API和全部源码) 发布
    nginx keepalived
  • 原文地址:https://www.cnblogs.com/wangtong111/p/7466887.html
Copyright © 2011-2022 走看看