Как применить подключаемые модули Tree View (jstree) к динамическому элементу, извлекаемому из файла XML - PullRequest
Новая
       1

Как применить подключаемые модули Tree View (jstree) к динамическому элементу, извлекаемому из файла XML

0 голосов
/ 24 мая 2018

Это код, который я анализировал XML с помощью Jquery Ajax. Сначала я использую ajax для чтения XML-файла и печати в виде динамического неупорядоченного списка.Все хорошо и список представлен отлично, но пока я добавляю плагин в виде дерева, ничего не изменилось.Пока я добавляю 

$(document).on("click",function(){
   $("#menu_wrap).jstree();
})

Тогда это работает. Однако мне нужно каждый раз нажимать на кнопку загрузки страницы, тогда список превратится в древовидное представление.Мне бы хотелось, чтобы после загрузки страницы список отображался в виде дерева. 

    <html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Category Treeview</title>
    <script src="https://code.jquery.com/jquery-1.12.1.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="jstree/dist/jstree.min.js"></script>
    <link rel="stylesheet" href="jstree/dist/themes/default/style.min.css" />

    <style type="text/css">
        a{
            text-decoration: none;
            color:black;
        }
        ul{
            list-style-type: none;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {

            $('#menu_wrap').append( '<ul></ul>');

            $(function(){
                $( "#dialog" ).dialog({
                    autoOpen: false,
                    show: {
                        effect: "blind",
                        duration: 1000
                    },
                    hide: {
                        effect: "explode",
                        duration: 1000
                    }
                });
                $("#menu_wrap").on("click","#opener",function () {
                    $("#dialog").dialog("open");
                });
            });
            $("#menu_wrap").on("click",function () {
                $("#menu_wrap").jstree();
            });

            $.ajax({
                type: 'GET',
                url: 'categories.xml',
                dataType: 'xml',
                success: function (data) {
                    console.log('Fetching categories...');
                    $(data).find('Categories').each(function () {
                        if($(this).children().length)
                        {
                            var categoryID = $(this).find('CategoryID').text();
                            var categoryName = $(this).find('CategoryName').text();
                            var description = $(this).find('Description').text();

                            var html = '<a id="opener" href="#'+ categoryName +'" title="' + description + '">' + categoryName + '</a>';
                            $('<li id="' + categoryID + '" ></li>').html(html).appendTo('#menu_wrap ul');
                        }
                    });
                }/*,
                error: function () {
                    console.log('An error occurred while processing Categories XML file.');
                    //alert('An error occurred while processing Categories XML file.');
                }*/
            }).done(function(){
                /*console.log('... done.');
                console.log('Fetching products...');*/
                getProducts();
            });

            var getProducts = function(){
                $.ajax({
                    type: 'GET',
                    url: 'products.xml',
                    dataType: 'xml',
                    success: function (data) {
                        $(data).find('Products').each(function () {
                            if($(this).children().length)
                            {
                                var productID = $(this).find('ProductID').text();
                                var productName = $(this).find('ProductName').text();
                                var categoryID = $(this).find('CategoryID').text();
                                var qtyPerUnity = $(this).find('QuantityPerUnit').text();
                                var unitPrice = $(this).find('UnitPrice').text();

                                var html = '<a id="opener" href="#Product='+ productID +'" title="' + "Quantity:"+qtyPerUnity + "\n" + "Unit Price: $"+unitPrice + '">' + productName + '</a>';
                                var categoryElement =  document.getElementById(categoryID);
                                var subList = document.getElementById('Sub_' + categoryID );
                                if(subList == null)
                                {
                                    $('<ul id="Sub_' + categoryID + '"></ul>').appendTo(categoryElement);
                                    $('<li></li>').html(html).appendTo('#Sub_' + categoryID);
                                }
                                else
                                {
                                    $('<li></li>').html(html).appendTo(subList);
                                }
                            }
                        });
                    }
                    /*error: function () {
                        console.log('An error occurred while processing Products XML file.');
                        //alert('An error occurred while processing Products XML file.')
                    }*/
                })/**.done(function(){
                    console.log('... done loading content tree.');
                });*/
            }
        });
    </script>
</head>
<body>
<div id="menu_wrap"></div>
<div id="dialog" title="Detail"></div>
</body>
</html>

Это 2 файла XML: category.xml 

<CategoriesRoot>
<Categories>
    <CategoryID>1</CategoryID>
    <CategoryName>Beverages</CategoryName>
    <Description>Soft drinks, coffees, teas, beer, and ale</Description>
</Categories>
<Categories>
    <CategoryID>2</CategoryID>
    <CategoryName>Condiments</CategoryName>
    <Description>Sweet and savory sauces, relishes, spreads, and 
seasonings</Description>
</Categories>
<Categories>
    <CategoryID>3</CategoryID>
    <CategoryName>Confections</CategoryName>
    <Description>Desserts, candies, sweetbreads</Description>
</Categories>
<Categories>
    <CategoryID>4</CategoryID>
    <CategoryName>Dairy Products</CategoryName>
    <Description>Cheeses</Description>
</Categories>
<Categories>
    <CategoryID>5</CategoryID>
    <CategoryName>Grains/Cereals</CategoryName>
    <Description>Breads, crackers, pasta, and cereal</Description>
</Categories>
<Categories>
    <CategoryID>6</CategoryID>
    <CategoryName>Meat/Poultry</CategoryName>
    <Description>Prepared meats</Description>
</Categories>
<Categories>
    <CategoryID>7</CategoryID>
    <CategoryName>Produce</CategoryName>
    <Description>Dried fruit and bean curd</Description>
</Categories>
<Categories>
    <CategoryID>8</CategoryID>
    <CategoryName>Seafood</CategoryName>
    <Description>Seaweed and fish</Description>
</Categories>
</CategoriesRoot>

2.products.xml 

<ProductsRoot>
    <Products>
        <ProductID>1</ProductID>
        <ProductName>Chai</ProductName>
        <CategoryID>1</CategoryID>
        <QuantityPerUnit>10 boxes x 20 bags</QuantityPerUnit>
        <UnitPrice>18</UnitPrice>
    </Products>
    <Products>
        <ProductID>2</ProductID>
        <ProductName>Chang</ProductName>
        <CategoryID>1</CategoryID>
        <QuantityPerUnit>24 - 12 oz bottles</QuantityPerUnit>
        <UnitPrice>19</UnitPrice>
    </Products>
    <Products>
        <ProductID>3</ProductID>
        <ProductName>Aniseed Syrup</ProductName>
        <CategoryID>2</CategoryID>
        <QuantityPerUnit>12 - 550 ml bottles</QuantityPerUnit>
        <UnitPrice>10</UnitPrice>
    </Products>
    <Products>
        <ProductID>4</ProductID>
        <ProductName>Chef Anton's Cajun Seasoning</ProductName>
        <CategoryID>2</CategoryID>
        <QuantityPerUnit>48 - 6 oz jars</QuantityPerUnit>
        <UnitPrice>22</UnitPrice>
    </Products>
    <Products>
        <ProductID>5</ProductID>
        <ProductName>Chef Anton's Gumbo Mix</ProductName>
        <CategoryID>2</CategoryID>
        <QuantityPerUnit>36 boxes</QuantityPerUnit>
        <UnitPrice>21.35</UnitPrice>
    </Products>
    <Products>
        <ProductID>6</ProductID>
        <ProductName>Chef Anton's Gumbo</ProductName>
        <CategoryID>2</CategoryID>
        <QuantityPerUnit>36 boxes</QuantityPerUnit>
        <UnitPrice>21.35</UnitPrice>
    </Products>
    <Products>
        <ProductID>7</ProductID>
        <ProductName>hamburger bun</ProductName>
        <CategoryID>5</CategoryID>
        <QuantityPerUnit>36 boxes</QuantityPerUnit>
        <UnitPrice>25.5</UnitPrice>
    </Products> 
    <Products>
        <ProductID>8</ProductID>
        <ProductName>turkish bread</ProductName>
        <CategoryID>5</CategoryID>
        <QuantityPerUnit>36 boxes</QuantityPerUnit>
        <UnitPrice>21.5</UnitPrice>
    </Products>
  <Products>
        <ProductID>9</ProductID>
        <ProductName>bread roll</ProductName>
        <CategoryID>5</CategoryID>
        <QuantityPerUnit>50 boxes</QuantityPerUnit>
        <UnitPrice>25.5</UnitPrice>
    </Products> 
<Products>
        <ProductID>10</ProductID>
        <ProductName>beef burger</ProductName>
        <CategoryID>6</CategoryID>
        <QuantityPerUnit>12 boxes</QuantityPerUnit>
        <UnitPrice>50.5</UnitPrice>
    </Products> 
<Products>
        <ProductID>11</ProductID>
        <ProductName>chicken burger</ProductName>
        <CategoryID>6</CategoryID>
        <QuantityPerUnit>12 boxes</QuantityPerUnit>
        <UnitPrice>54.5</UnitPrice>
    </Products>    
<Products>
        <ProductID>12</ProductID>
        <ProductName>tiger prawns</ProductName>
        <CategoryID>8</CategoryID>
        <QuantityPerUnit>12 boxes</QuantityPerUnit>
        <UnitPrice>70.5</UnitPrice>
    </Products> 
<Products>
        <ProductID>13</ProductID>
        <ProductName>cooked prawns</ProductName>
        <CategoryID>8</CategoryID>
        <QuantityPerUnit>12 boxes</QuantityPerUnit>
        <UnitPrice>65.9</UnitPrice>
    </Products>     
 </ProductsRoot>

Я очень смущен.Как выбрать динамический элемент и применить к нему плагины древовидного представления?Пожалуйста, помогите мне, спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...