javascript - 如何以递归方式将 XML 列表显示为以前的 ASP :MENU did?

标签 javascript html css recursion menu

我正在尝试将以前的 asp:menu 项转换为 javascript。这是我写的 javascript 代码:

    function GetMainMenu() {
        var html = '';
        var finalHTML = '';
        finalHTML += '<div class="dropdown" style="width:100%">';
        finalHTML += '<ul class="nav navbar-nav navbar-left">';
        finalHTML += '<li class="dropdown">';
        finalHTML += '<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" style="height:18px;color:#003366">';
        finalHTML += 'Main Menu<span class="caret"></span></a>';

        var MainMenu = null;
        MainMenu = new ActiveXObject("Microsoft.XMLDOM");
        MainMenu = readXml("/public/FHSMenu.xml");


        finalHTML += buildList(MainMenu.getElementsByTagName("Menu"));


        finalHTML += '</li>';
        finalHTML += '</ul>';
        finalHTML += '</div>';

        alert(finalHTML);
        document.getElementById("preMainMenu").innerHTML = finalHTML;

        var x = null;
        x = new ActiveXObject("Microsoft.XMLDOM");
        var item;


        function buildList(data) {
            html += '<ul class="dropdown-menu" role="menu">';

            x = data;

            for (item = 0; item < x.length ; item++) {

                var y = x[item].getElementsByTagName("Title")[0].childNodes[0].nodeValue;

                var u = null;
                try {
                    u = x[item].getElementsByTagName("URL")[0].childNodes[0].nodeValue;
                } catch (e) {
                    u = '';
                }

                if (u != '') {
                    html += '<li><a href="' + u + '" style="font-size:12px;color:#003366" >' + y + '</a></li>';
                } else {
                    html += '<li class="dropdown-submenu" role="menu" >';
                    html += '<a href="#" data-toggle="dropdown" style="font-size:12px;color:#003366" >' + y + '</a>';
                    html += '</li>';
                    //var SubMenu = x[item].getElementsByTagName("Menu");
                    //if (SubMenu != undefined && SubMenu.length > 0) {
                    //    html += buildList(SubMenu); // Submenu found. Calling recursively same method (and wrapping it in a div)
                    //}
                }

            }

            html += '</ul>';
            return html;
        }

    }

XML 文件是为与 ASP:MENU 一起使用而编写的，并且仍在与遗留 Web 应用程序一起使用，因此我需要一种方法以递归方式在下拉方法中显示菜单，以便用户仍然会看到与以下内容基本相同的下拉菜单子(monad)菜单。到目前为止，我无法显示初始根菜单，然后调用相同的例程从根菜单中获取任何子菜单(如果这有意义的话)。目前警报显示标签中具有“菜单”的所有元素而不仅仅是少数根元素。

<?xml version="1.0" standalone="yes"?> <LeftNavMenu>   <Menu>
    <MenuId>63</MenuId>
    <Title>Clinical Care</Title>
    <URL />
    <ZOrder>0</ZOrder>
    <Menu>
      <MenuId>1660</MenuId>
      <ParentId>63</ParentId>
      <Title>Ambulatory EHR</Title>
      <URL>some_link</URL>
      <ZOrder>0</ZOrder>
    </Menu>
    <Menu>
      <MenuId>3649</MenuId>
      <ParentId>63</ParentId>
      <Title>Angel Eye</Title>
      <URL>some_link</URL>
      <ZOrder>0</ZOrder>
    </Menu>
    <Menu>
      <MenuId>1610</MenuId>
      <ParentId>63</ParentId>
      <Title>Clarity</Title>
      <URL>some_link</URL>
      <ZOrder>0</ZOrder>
    </Menu>   </Menu>   <Menu>
    <MenuId>3</MenuId>
    <Title>Corporate</Title>
    <URL />
    <ZOrder>0</ZOrder>
    <Menu>
      <MenuId>1487</MenuId>
      <ParentId>3</ParentId>
      <Title>Become an Organ Donor</Title>
      <URL>some_link</URL>
      <ZOrder>0</ZOrder>
    </Menu>
    <Menu>
      <MenuId>1845</MenuId>
      <ParentId>3</ParentId>
      <Title>Brand Style Guide</Title>
      <URL>some_link</URL>
      <ZOrder>0</ZOrder>
    </Menu>
    <Menu>
      <MenuId>2153</MenuId>
      <ParentId>3</ParentId>
      <Title>Calendars</Title>
      <URL />
      <ZOrder>0</ZOrder>
      <Menu>
        <MenuId>2155</MenuId>
        <ParentId>2153</ParentId>
        <Title>Freemanhealth.com Events</Title>
        <URL>some_link</URL>
        <ZOrder>0</ZOrder>
      </Menu>
      <Menu>
        <MenuId>2391</MenuId>
        <ParentId>2153</ParentId>
        <Title>Kronos Calendar</Title>
        <URL>some_link</URL>
        <ZOrder>0</ZOrder>
      </Menu>
      <Menu>
        <MenuId>2158</MenuId>
        <ParentId>2153</ParentId>
        <Title>Payroll</Title>
        <URL>some_link</URL>
        <ZOrder>0</ZOrder>
      </Menu>
      <Menu>
        <MenuId>2156</MenuId>
        <ParentId>2153</ParentId>
        <Title>Professional Development</Title>
        <URL>some_link</URL>
        <ZOrder>0</ZOrder>
      </Menu>
      <Menu>
        <MenuId>2157</MenuId>
        <ParentId>2153</ParentId>
        <Title>Room Scheduling</Title>
        <URL>some_link</URL>
        <ZOrder>0</ZOrder>
      </Menu>
    </Menu>
    <Menu>
      <MenuId>8</MenuId>
      <ParentId>3</ParentId>
      <Title>Car Pool</Title>
      <URL>some_link</URL>
      <ZOrder>0</ZOrder>
    </Menu>
    <Menu>
      <MenuId>1280</MenuId>
      <ParentId>3</ParentId>
      <Title>CMN (Children's Miracle Network)</Title>
      <URL>some_link</URL>
      <ZOrder>0</ZOrder>
    </Menu>
    <Menu>
      <MenuId>181</MenuId>
      <ParentId>3</ParentId>
      <Title>Employee Handbook</Title>
      <URL>some_link</URL>
      <ZOrder>0</ZOrder>
    </Menu>   </Menu> </LeftNavMenu>

最佳答案

我终于拼凑了递归加载 XML 菜单文件的方法，虽然因为我没有得到响应，这可能对尝试将 asp:menu 转换为 javascript 的其他人有用，但我想展示它是如何实现的完成。这是代码:

<script type="text/javascript">

    function readXml(xmlFile) {
        var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = "false";
        xmlDoc.load(xmlFile);
        var tagObj = xmlDoc.getElementsByTagName("Menu");
        var menuidValue = tagObj[0].getElementsByTagName("MenuId")[0].childNodes[0].nodeValue;
        try {
            var parentidValue = tagObj[0].getElementsByTagName("Parentid")[0].childNodes[0].nodeValue;
        } catch (err) {
            var parentidValue = 0;
        }
        var titleValue = tagObj[0].getElementsByTagName("Title")[0].childNodes[0].nodeValue;

        try {
            var urlValue = tagObj[0].getElementsByTagName("URL")[0].childNodes[0].nodeValue;
        } catch (err) {
            var urlValue = '';
        }

        var zorderValue = tagObj[0].getElementsByTagName("ZOrder")[0].childNodes[0].nodeValue;

        return xmlDoc
    }


    $(document).ready(function () {
        GetMainMenu();
    });


    function buildList(data) {

        var item;
        var html = '';

        html += '<ul class="dropdown-menu" role="menu">';

        for (item = 0; item < data.length ; item++) {

            var Title = data[item].getElementsByTagName("Title")[0].childNodes[0].nodeValue;

            var URL = null;
            try {
                URL = data[item].getElementsByTagName("URL")[0].childNodes[0].nodeValue;
            } catch (e) {
                URL = '';
            }

            if (URL == '') {
                html += '<li class="dropdown-submenu" role="menu" >';
                html += '<a href="#" data-toggle="dropdown" style="font-size:12px;color:#003366" >' + Title + '</a>';
                html += buildList(data[item].getElementsByTagName("Menu")); // Submenu found. Calling recursively same method
                html += '</li>';
            } else {
                html += '<li><a href="' + URL + '" style="font-size:12px;color:#003366" >' + Title + '</a></li>';
            }
        }

        html += '</ul>';
        return html;
    }


    function GetMainMenu() {
        var html = '';
        var finalHTML = '';
        finalHTML += '<div class="dropdown" style="width:100%">';
        finalHTML += '<ul class="nav navbar-nav navbar-left">';
        finalHTML += '<li class="dropdown">';
        finalHTML += '<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" style="height:18px;color:#003366">';
        finalHTML += 'Main Menu<span class="caret"></span></a>';

        var MainMenu = null;
        MainMenu = new ActiveXObject("Microsoft.XMLDOM");
        MainMenu = readXml("/public/FHSMenu.xml");

        finalHTML += buildList(MainMenu.childNodes[1].childNodes,html);


        finalHTML += '</li>';
        finalHTML += '</ul>';
        finalHTML += '</div>';

        document.getElementById("preMainMenu").innerHTML = finalHTML;

    }

</script>

关于javascript - 如何以递归方式将 XML 列表显示为以前的 ASP :MENU did?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35039760/

上一篇：css - 如何仅使用 CSS 制作负边框半径？

下一篇：Html:调整页面大小时图像将换行

相关文章：

javascript - 谷歌折线图只有完整的步骤/刻度

html - css 下拉菜单::悬停后子菜单出现在主菜单中

html - 我可以将 src 属性放在 i 或 span 标记中吗？

JQuery 只允许使用此代码的一个按钮

html - Materialise Navbar 显示重复菜单

html - iFrame 上的 Overflow-y 不显示滚动条

javascript - 使用javascript以正确的格式解析字符串

javascript - 生成并存储电子(数字)签名

javascript - 在循环内用新对象填充数组

html - 边框在一侧的相对框中的绝对定位元素问题

©2024 IT工具网  联系我们