jquery实现json与dom元素多级菜单编辑相互转换效果代码-html代码-BFW代码库

jquery实现json与dom元素多级菜单编辑相互转换效果代码

代码语言：html

所属分类：其他

代码描述：jquery实现json与dom元素多级菜单编辑相互转换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!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>
        <input onclick="domtojson()" type="button" value="转成json" /> <input onclick="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++;

  
        .........完整代码请登录后点击上方下载按钮下载查看