Построение динамической навигационной системы с использованием данных json, возвращаемых из записей - PullRequest
Новая
       23

Построение динамической навигационной системы с использованием данных json, возвращаемых из записей

0 голосов
/ 06 декабря 2018

Я решил использовать slicknav для создания динамической навигационной системы для серии записей для системы оповещения о пожаре.У меня есть эта система, встроенная в базу данных Lotus domino, и в этой базе данных у меня есть динамическая система расширяемых разделов по годам, месяцам и дням.Предположим, это повторяет эту навигацию в моем приложении.Посмотрев на разные плагины, я решил использовать slicknav.Вот тут-то и встает моя задача. Я должен построить эту систему на основе записей документов.Вот основа моей системы.Во-первых, вот пример возвращаемых данных json: 

   {"firedrills":
     [
     {"alarmyear":2018,
    "alarmyearmonth":"2018-9",
"alarmyearmonthday":"2018-9-18",
"monthname":"September",
"alarmday":"18",
"alarmdatetime":"2018-09-18 00:15:00.000",
"inciNumber":"2018-599",
"incidentlocation":"FR2W"},
{"alarmyear":2018,
"alarmyearmonth":"2018-8",
"alarmyearmonthday":"2018-8-7",
"monthname":"August",
"alarmday":"7",
"alarmdatetime":"2018-08-07 19:08:00.000",
"inciNumber":"2018-537",
"incidentlocation":"Laundry"},
{"alarmyear":2018,
"alarmyearmonth":"2018-7",
"alarmyearmonthday":"2018-7-3",
"monthname":"July",
"alarmday":"3",
"alarmdatetime":"2018-07-03 08:15:00.000",
"inciNumber":"2018-464",
"incidentlocation":"FA5E"}
]}

Вот код HTML и jquery, который я построил для статического тестирования: 

  <div id="firedrillmainnavdiv">
        <ul id="firedrillmainul"></ul>
    </div>

  <script type="text/javascript">
        $(function(){
            $.ajax({
                url:'../json/getfiredrills.php',
                dataType: 'json'
            }).done(function(data){
                var $firedrillmainul=$("#firedrillmainul");
                $firedrillmainul.empty();
                $firedrillmainul.append(
                    $('<li>').prop({id:"2018"}).text("2018").append(
                        $('<ul>').prop({id:"2018-ul"}).append(
                            $('<li>').prop({id:"2018-9"}).text("September").append(
                                $('<ul>').prop({id:"2018-9-ul"}).append(
                                    $('<li>').prop({id:"2018-9-18"}).text("18").append(
                                        $('<ul>').prop({id:"2018-9-18-ul"}).append(
                                            $('<li>').prop({id:"2018-599"}).append($('<a>').prop({href:"#"}).text("FR2W"))
                                        )   
                                    )   
                                )
                            )
                        ).append(
                            $('<li>').prop({id:"2018-8"}).text("August").append(
                                $('<ul>').prop({id:"2018-8-ul"}).append(
                                    $('<li>').prop({id:"2018-8-7"}).text("7").append(
                                        $('<ul>').prop({id:"2018-8-7-ul"}).append(
                                            $('<li>').prop({id:"2018-537"}).append($('<a>').prop({href:"#"}).text("Laundry"))
                                        )   
                                    )        
                                )
                            )    
                        ).append(
                            $('<li>').prop({id:"2018-7"}).text("July").append(
                                $('<ul>').prop({id:"2018-7-ul"}).append(
                                    $('<li>').prop({id:"2018-7-3"}).text("3").append(
                                        $('<ul>').prop({id:"2018-7-3-ul"}).append(
                                            $('<li>').prop({id:"2018-464"}).append($('<a>').prop({href:"#"}).text("FA5E"))
                                        )   
                                    )    
                                )
                            )    
                        )
                    )
                )

                $firedrillmainul.slicknav({
                    label: 'Fire Drills',
                    prependTo:'#firedrillmainnavdiv',
                    duplicate: false
                });   
            })
        })   
    </script>

Все это работало без проблем.Вот код, который я построил, чтобы построить это динамически.Я использую идентификаторы, чтобы добавить данные на правильном уровне меню.Первая итерация в коде работает нормально, но затем я не могу найти идентификаторы для добавления кода в следующие итерации.Вот этот код.Я только показываю логику построения неупорядоченного списка.

  $(function(){
            $.ajax({
                url:'../json/getfiredrills.php',
                dataType: 'json'
            }).done(function(data){
                var $firedrillmainul=$("#firedrillmainul"),
                    alarmyear="";
                $firedrillmainul.empty();
                $.each(data.firedrills,function(key,value){
                    if (alarmyear==""){
                      $firedrillmainul.append(
                        $('<li>').prop({id:value.alarmyear}).text(value.alarmyear).append(
                            $('<ul>').prop({id:value.alarmyear+'-ul'}).append(
                                $('<li>').prop({id:value.alarmyearmonth}).text(value.monthname).append(
                                    $('<ul>').prop({id:value.alarmyearmonth+'-ul'}).append(
                                        $('<li>').prop({id:value.alarmyearmonthday}).text(value.alarmday).append(
                                            $('<ul>').prop({id:value.alarmyearmonthday+'-ul'}).append(
                                                $('<li>').append($('<a>').prop({href:""}).text(value.incidentlocation))
                                            )    
                                        )   
                                    )
                                )
                            )    
                        )
                      )
                    }else if($firedrillmainul.find("#"+value.alarmyearmonthday)){
                        $("#"+value.alarmyearmonthday+"-ul").append(
                            $('<li>').append($('<a>').prop({href:""}).text(value.incidentlocation))    
                        )
                    }else if($firedrillmainul.find("#"+value.alarmyearmonth)){
                        $('<ul>').prop({id:value.alarmyearmonth+"-ul"}).append(
                            $('<li>').prop({id:value.alarmyearmonthday}).text(value.alarmday).append(
                                $('<ul>').prop({id:value.alarmyearmonthday+"-ul"}).append(
                                    $('<li>').append($('<a>').prop({href:""}).text(value.incidentlocation))    
                                )   
                            )    
                        )     
                    }else if($firedrillmainul.find("#"+value.alarmyear)){
                        $("#"+value.alarmyear+"-ul").append(
                            $('<li>').prop({id:value.alarmyearmonth}).text(value.monthname).append(
                                $('<ul>').prop({id:value.alarmyearmonth+"-ul"}).append(
                                    $('<li>').prop({id:value.alarmyearmonthday}).text(value.alarmday).append(
                                        $('<ul>').prop({id:value.alarmyearmonthday+"-ul"}).append(
                                            $('<li>').append($('<a>').prop({href:""}).text(value.incidentlocation))    
                                        )   
                                    )    
                                )    
                            )   
                        )
                    }
                    alarmyear=value.alarmyear;

                })


            })
        })

1 Ответ

0 голосов
/ 07 декабря 2018

Я понял это.Когда я перебираю записи, я сравниваю сначала год, затем месяц и день и строю их оттуда.Вот код для циклического прохождения данных. 

  $(function(){
            $.ajax({
                url:'../json/getfiredrills.php',
                dataType: 'json'
            }).done(function(data){
                var $firedrillmainul=$("#firedrillmainul"),
                    alarmyear="",
                    alarmyearmonth="",
                    alarmyearmonthday="";
                $firedrillmainul.empty();
                if(data.hasOwnProperty("firedrills")){
                    $.each(data.firedrills,function(key,value){
                        if(alarmyear!=value.alarmyear){
                            $firedrillmainul.append(
                                $('<li>').prop({id:value.alarmyear}).text(value.alarmyear).append(
                                    $('<ul>').prop({id:value.alarmyear+"-ul"}).append(
                                        $('<li>').prop({id:value.alarmyearmonth}).text(value.monthname).append(
                                            $('<ul>').prop({id:value.alarmyearmonth+"-ul"}).append(
                                                $('<li>').prop({id:value.alarmyearmonthday}).text(value.alarmday).append(
                                                    $('<ul>').prop({id:value.alarmyearmonthday+"-ul"}).append(
                                                        $('<li>').prop({id:value.inciNumber}).append($('<a>').prop({href:"#"}).text(value.incidentlocation))
                                                    )   
                                                )   
                                            )
                                        )
                                    )
                                )
                            )    
                        }else if(alarmyearmonth!=value.alarmyearmonth){
                            $("#"+alarmyear+"-ul").append(
                                $('<li>').prop({id:value.alarmyearmonth}).text(value.monthname).append(
                                    $('<ul>').prop({id:value.alarmyearmonth+"-ul"}).append(
                                        $('<li>').prop({id:value.alarmyearmonthday}).text(value.alarmday).append(
                                            $('<ul>').prop({id:value.alarmyearmonthday+"-ul"}).append(
                                                $('<li>').prop({id:value.inciNumber}).append($('<a>').prop({href:"#"}).text(value.incidentlocation))
                                            )   
                                        )   
                                    )
                                )
                            )  
                        }else if(alarmyearmonthday!==value.alarmyearmonthday){
                            $("#"+value.alarmyearmonth+"-ul").append(
                                $('<li>').prop({id:value.alarmyearmonthday}).text(value.alarmday).append(
                                    $('<ul>').prop({id:value.alarmyearmonthday+"-ul"}).append(
                                        $('<li>').prop({id:value.inciNumber}).append($('<a>').prop({href:"#"}).text(value.incidentlocation))
                                    )   
                                )   
                            )    
                        }else if(alarmyearmonthday==value.alarmyearmonthday){
                            $("#"+value.alarmyearmonthday+"-ul").append(
                                $('<li>').prop({id:value.inciNumber}).append($('<a>').prop({href:"#"}).text(value.incidentlocation))
                            )    
                        } 
                        alarmyear=value.alarmyear;
                        alarmyearmonth=value.alarmyearmonth; 
                        alarmyearmonthday=value.alarmyearmonthday;   
                    })    
                }



                $firedrillmainul.slicknav({
                    label: 'Fire Drills',
                    prependTo:'#firedrillmainnavdiv',
                    duplicate: false
                });   
            })
        })

Как вы можете видеть на каждом шаге «если и еще», если я подниму уровень неупорядоченного списка и добавлю данные на основе ответа.

...