how to assign a link to a branch in the xml so tha

2019-09-04 15:57发布

站内文章 / 后端开发
14 0 0

问题:

This code converts an xml file to an html expandable tree:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      $.ajax({
        url: "stations10.xml",
        success: function(tree) {
          traverse($('#treeView li'), tree.firstChild)
            // this – is an &mdash;
          $('#treeView li:has(li)').addClass("Max").click(function(e) {
            $(this).toggleClass("Max Min");
            $(this).children().toggle();
            e.stopPropagation();
          })
          $('#treeView li').click(function(g) {

            var mytree2 = $(this);
            mytree2.children('li').toggle();

            g.stopPropagation();
          })

          $('<b></b>').prependTo('#treeView li:has(li)').click(function() {
            var sign = $(this).text()
            if (sign == "–")
              $(this).text('').next().children().hide()
            else
              $(this).text('').next().children().show()
          })
        }
      })
    });

    function traverse(node, tree) {
      var children = $(tree).children()
      node.addClass(tree.nodeName).append(tree)
      if (children.length) {
        var ul = $("<ul>").appendTo(node)
        children.each(function() {
          var li=$('<li>').appendTo(ul)
          traverse(li, this)
        })
      } else {
        $('<ul><li>' + $(tree).text() + '<\/li><\/ul>')
      }
    }
  </script>
    <style type="text/css">
    #treeView li {
      list-style: none;
    }

    #treeView ul {
      padding-left: 1em;
    }

    #treeView b {
      padding-right: 1em;
    }

    .Min {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/plus_zps8o4adn0e.gif") no-repeat;
      padding-left: 15px;
    }

    .Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/minus_zpsk0jlvbaa.gif") no-repeat;
      padding-left: 15px;
    }

    li {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/bullet_zpsblghj3ip.gif") no-repeat;
      padding-left: 15px;
    }

    .MainStation.Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/station_zpswxz6gpqe.jpg") no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
      padding-left: 15px;
    }
    .Substation.Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/sub_zpsspl8dckt.jpg") no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
      padding-left: 15px;
    }
    .Control.Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/control_zpsrfvdzyzp.jpg") no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
      padding-left: 15px;
    }
    .PushButton.Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/pusbutton_zpsspjfsfsp.jpg") no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
      padding-left: 15px;
    }
    .ElectricStation.Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/electrical-safety-symbol_zpssdvscba0.gif") no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
      padding-left: 15px;
    }
  </style>
    <title>treeView</title>
  </head>

  <body>
    <ul id="treeView">
      <li></li>
    </ul>
  </body>

</html>

This is the XML file:

<?xml version="1.0" encoding="UTF-8"?>
<MAIN xmlns:xlink="http://www.w3.org/1999/xlink"> MAIN
<MainStation 
        xlink:type="extended" 
        xlink:href="http://google.com"
        xlink:show="new"> Mainstation1
    <Substation> Substation1
        <Control>Control1</Control>
        <Control>Control2<MiniControl>MiniControl1</MiniControl><MiniControl>MiniControl2</MiniControl></Control>
        <PushButton>PushButton1</PushButton>
    </Substation>
    <Substation> Substation2
        <Control>Control1<MiniControl>MiniControl1</MiniControl><MiniControl>MiniControl2</MiniControl></Control>
        <Control>Control2</Control>
        <PushButton>PushButton1</PushButton>
    </Substation>
    <Substation> Substation3
        <Control>Control1</Control>
        <Control>Control2</Control>
        <Control>Control3</Control>
        <Control>Control4</Control>
    </Substation>
    <Substation> Substation4
        <PushButton>PushButton1</PushButton>
        <PushButton>PushButton2</PushButton>
    </Substation>
</MainStation>  
<MainStation> Mainstation2
    <Substation> Substation1
        <Control>Control1</Control>
        <Control>Control2</Control>
        <PushButton>PushButton1</PushButton>
    </Substation>
    <Substation> Substation2
        <Control>Control1<MiniControl>MiniControl1</MiniControl><MiniControl>MiniControl2</MiniControl></Control>
        <Control>Control2</Control>
        <PushButton>PushButton1<MiniPushButton>MiniPushButton1</MiniPushButton><MiniPushButton>MiniPushButton2</MiniPushButton></PushButton>
    </Substation>
</MainStation>  
<ElectricStation> ElectricStation1
    <Substation> Substation1
        <Control>Control1</Control>
        <Control>Control2</Control>
        <PushButton>PushButton1</PushButton>
    </Substation>
    <Substation> Substation2
        <Control>Control1<MiniControl>MiniControl1</MiniControl><MiniControl>MiniControl2</MiniControl></Control>
        <Control>Control2</Control>
        <PushButton>PushButton1<MiniPushButton>MiniPushButton1</MiniPushButton><MiniPushButton>MiniPushButton2</MiniPushButton></PushButton>
    </Substation>
</ElectricStation>  
</MAIN>

As you can see, I tried linking the main station node to Google so that when I click on it in the output, it opens Google. However it's not working.

回答1:

You may have to change the script for expanding.

Here is one way you could do it. I have appended a span tag, this is to display the images. I have added the click handler to collapse and expand to this. So you will have to click exactly on the image to expand or collapse the list. The second handler is for the tags with href attribute. On click of the list with the href attribute it will redirect to the link location.

Note: I have changed the xlink:href attribute in the XML to just href.

[EDIT]

Full code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $.ajax({
                    url: "stations10.xml",
                    success: function(tree) {
                        traverse($('#treeView li'), tree.firstChild)
                        $('<span><\/span>').addClass("Max").prependTo('#treeView li:has(li)')
                        $('.Max,.Min').click(function (e) {
                            $(this).toggleClass("Max Min")
                            $(this).siblings().next().toggle()
                        });
                        $("[href]").click(function(){
                            window.location.href = $(this).attr("href")
                        });
                    }
                })
            });

            function traverse(node, tree) {
                var children = $(tree).children()
                node.addClass(tree.nodeName).append(tree)
                if (children.length) {
                    var ul = $("<ul>").appendTo(node)
                    children.each(function() {
                        var li=$('<li>').appendTo(ul)
                        traverse(li, this)
                    })
                } else {
                    $('<ul><li>' + $(tree).text() + '<\/li><\/ul>')
                }
            }
        </script>
        <style type="text/css">
        #treeView li {
            list-style: none;
        }

        #treeView ul {
        padding-left: 1em;
        }

        #treeView b {
            padding-right: 1em;
        }

        .Min {
            background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/plus_zps8o4adn0e.gif") no-repeat;
            padding-left: 30px;
        }

        .Max {
            background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/minus_zpsk0jlvbaa.gif") no-repeat;
            padding-left: 30px;
        }

        li {
            background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/bullet_zpsblghj3ip.gif") no-repeat;
            padding-left: 30px;
        }

        .MainStation.Max {
            background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/station_zpswxz6gpqe.jpg") no-repeat;
            background-size: 15px 15px;
            cursor: pointer;
            padding-left: 30px;
        }
        .Substation.Max {
          background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/sub_zpsspl8dckt.jpg") no-repeat;
          background-size: 15px 15px;
          cursor: pointer;
          padding-left: 30px;
        }
        .Control.Max {
          background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/control_zpsrfvdzyzp.jpg") no-repeat;
          background-size: 15px 15px;
          cursor: pointer;
          padding-left: 30px;
        }
        .PushButton.Max {
          background:     URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/pusbutton_zpsspjfsfsp.jpg") no-repeat;
          background-size: 15px 15px;
          cursor: pointer;
          padding-left: 30px;
        }
        .ElectricStation.Max {
          background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/electrical-safety-symbol_zpssdvscba0.gif") no-repeat;
          background-size: 15px 15px;
          cursor: pointer;
          padding-left: 30px;
        }
        </style>
        <title>treeView</title>
    </head>
    <body>
        <ul id="treeView">
          <li></li>
        </ul>
    </body>
    </html>

The change in XML code

<MainStation 
        xlink:type="extended" 
        href="http://google.com"
        xlink:show="new"> Mainstation1
        ....


标签： html xml hyperlink
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~