有没有json与多级菜单dom相互转换的插件?通过json生成二级菜单的html dom可编辑元素,编辑完后又可以生成json对象。
网友回复
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="robots" content="all"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.4.2.js"></script> <style> #book { background: white; padding: 10px; } #chapter .bookname { padding: 10px 10px 10px 0; font-size: 18px; font-weight: bold; } .tile__list p { padding-left: 20px; } .tile__name { background: #f6f5f5; border-left: 12px solid #2596cc; font-size: 16px; font-weight: bold; padding: 6px; } .addpbtn,.delppbtn ,.delpbtn { margin-left: 10px; } #coursesections{ width: 100%; margin-top: 20px; } </style> </head> <body> <div> <div id="book"> <div id="chapter"> <div class="bookname"> 点击右侧+号添加<i style="margin-left:30px;" class="fa fa-lg fa-plus-circle addbtn"></i> </div> </div> </div> <inputBfwOnclick="domtojson()" type="button" value="转成json" /> <inputBfwOnclick="jsontodom()" type="button" value="从json读取" /> <textarea id="coursesections" name="coursesections" rows="12" cols="10"></textarea> </div> <script type="text/javascript"> var globelj=0; $(function(){ Init(); }); function jsontodom(){ $("#chapter").children(".tile").remove(); let obj= JSON.parse( $("#coursesections").val()); // let j=0; for (let key in obj) { $("#chapter").append('<div class="layer tile" ><div class="tile__name"> <span>'+key+'</span><i class="fa fa-plus-square-o addpbtn"></i><i class="fa fa-trash-o delpbtn"></i></div><div class="tile__list" id="list'+j+'"></div></div>'); for (let i = 0; i < obj[key].length; i++) { $("#list"+j).append('<p><span>'+obj[key][i]+'</span><i class="fa fa-trash-o delppbtn"></i></p>'); } j++; } } function domtojson(){ var array={}; $("#chapter .tile").each(function(){ var ppp=$(this); var subarr=[]; //str+=ppp.children(".tile__name").find("span").html()+"#"; ppp.children(".tile__list").find("span").each(function(){ subarr.push($(this).html()); }); array[ppp.children(".tile__name").find("span").html()] = subarr; // array.push(subarr); }); $("#coursesections").val(JSON.stringify(array)); } var nowobj=null; function Init(){ $(".addpbtn").live("click",function() { nowobj=$(this).parent().siblings(".tile__list"); nowobj.append('<p><span>双击输入</span><i class="fa fa-trash-o delppbtn"></i></p>'); // $(this).parent().siblings(".tile__list").append('<p><span>未命名</span><i class="fa fa-trash-o delppbtn"></i></p>'); }); $(".addbtn").live("click",function() { $("#chapter").append('<div class="layer tile"><div class="tile__name"> <span>未命名'+globelj+'</span><i class="fa fa-plus-square-o addpbtn"></i><i class="fa fa-trash-o delpbtn"></i></div><div class="tile__list"></div></div>'); globelj++; }); $(".delppbtn").live("click", function() { $(this).parent().remove(); }); $(".delpbtn").live("click", function() { $(this).parent().parent().remove(); }); $(".tile__name span").live("dblclick", function() { $(this).attr("contenteditable", true); }); $(".tile__name span").live("blur", function() { $(this).attr("contenteditable", false); }); $(".tile__list span").live("dblclick", function() { $(this).attr("contenteditable", true); }); $(".tile__list span").live("blur", function() { $(this).attr("contenteditable", false); }); } </script> </body> </html>