Создайте динамическую навигацию с заголовками списков (coldfusion & cfscript)

Question

Для проекта, который создает навигацию. Стол как этот

SELECT TOP 1000 
    [id] 
    ,[title] 
    ,[action] 
    ,[listOrder] 
    ,[fk_parentId] 
FROM [portfolio].[dbo].[menu] 

Где Fk_parentId относится к идентификатору ... для создания меню с уровнями. Listorder содержит ряд

Теперь я хочу, чтобы моя навигацию к выходу, как этот

<ul class="nav nav-list"> 
     <li class="nav-header active">List header</li> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Library</a></li> 
     <li><a href="#">Applications</a></li> 
     <li class="nav-header">Another list header</li> 
     <li><a href="#">Profile</a></li> 
     <li><a href="#">Settings</a></li> 
     <li class="divider"></li> 
     <li><a href="#">Help</a></li> 
</ul> 

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

public void function main(struct rc) { 

    queryService = new query(); 
    queryService.setDatasource("portfolio"); 
    result = queryService.execute(sql="SELECT * FROM menu ORDER by listOrder"); 


    // result 
    GetMenuData = result.getResult(); 


    // Loopen over result 
    writeOutput("<ul class='nav nav-list>'"); 
    for (i = 1; i LTE GetMenuData.RecordCount; i = (i + 1)) 
    { 

     // Output 
     WriteOutput(
     "<li><a href='"& GetMenuData[ "action" ][ i ] & "'>" & GetMenuData[ "title" ][ i ] & "</a></li>" 
     ); 

    } 
    writeOutput("</ul>'"); 

} 

этот результат:

<ul class='nav nav-list>' 
     <li><a href='alk.profile'>PROFILE</a></li> 
     <li><a href=''>List header</a></li> 
     <li><a href='main.'>home</a></li> 
     <li><a href=''>Another List header</a></li> 
     <li><a href='alh.settings'>settings</a></li> 
     <li><a href='main.library'>librarY</a></li> 
     <li><a href='help.main'>Help</a></li> 
     <li><a href='main.applications'>applications</a></li> 
    </ul>' 

Как я могу добавить заголовок класса в «заголовок» <li> как listheader, другой заголовок списка?

Как я могу динамически добавлять разделитель между настройками и помощью?

title     action    listOrder fk_parentId 
Another List header  NULL    20   NULL 
PROFILE     alk.profile   5   539BB1A4-5AB5-4059-93AD-17DD8EABAF60 
Help     help.main   40   NULL 
settings    alh.settings  20   539BB1A4-5AB5-4059-93AD-17DD8EABAF60 
applications   main.applications 50   C5EFAE69-FD2A-4B35-A613-B8D429091A8F 
List header    NULL    10   NULL 
home     main.    20   C5EFAE69-FD2A-4B35-A613-B8D429091A8F 
librarY     main.library  30   C5EFAE69-FD2A-4B35-A613-B8D429091A8F 

Answer 1

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

public string function main(struct rc) { 

    // Set up the return string 
    var strReturn = '<ul class="nav nav-list">'; 

    // Set up the query 
    var queryService = new Query(
     datasource='portfolio' 
    ); 

    // Execute and get result, specifying field names 
    var GetMenuData = queryService.execute(sql=' 
     SELECT 
      id, 
      action, 
      title, 
      fk_parentId 
     FROM menu 
     ORDER by listOrder ASC 
    ').getResult(); 

    // Loop over result 
    for (var i = 1; i <= GetMenuData.RecordCount; i++) { 

     // For this result, what classes are needed? 
     var strClasses = ''; 

     // Header class 
     if (
      Len(GetMenuData['fk_parentId'][ i ]) == 0 // Null/len 0 parent == header 
     ) { 
      strClasses = ListAppend(strClasses,'nav-header',' '); 
     } 

     // Add in some logic here for 'active' later on probably a good idea? 
     // strClasses = ListAppend(strClasses,'active',' ') if id == active id? May need adjustment to query for parent 

     if (
      Len(strClasses) > 0 
     ) { 
      strClasses = ' class="'&strClasses&'"'; 
     } 

     // Output list item 
     strReturn &= '<li'&strClasses&'>'; 

      // Add href if needed 
      if (
       Len(GetMenuData['action'][ i ]) > 0 
      ) { 
       strReturn &= '<a href="'&GetMenuData['action'][ i ]&'">'; 
      } 

      strReturn &= GetMenuData['title'][ i ]; 

      if (
       Len(GetMenuData['action'][ i ]) > 0 
      ) { 
       strReturn &= '</a>'; 
      } 

     // Close off the list item 
     strReturn &= '</li>'; 
    } 

    // End the return string 
    strReturn &= '</ul>'; 

    // And return it 
    return strReturn; 
} 

Несколько замечаний об изменениях

• Измененная функция иметь тип возвращаемого значения «строка» вместо «пустоты» и изменить его, чтобы он возвращает строку, вместо того, чтобы непосредственно писать. Это в общем позволяет больше контролировать, где именно будет выводиться список.
• Добавлен обзор для всех переменных, вызываемых внутри функции (с использованием ключевого слова «var»). Обратите внимание, что приведенный ниже пример будет работать только в CF9/railo. При использовании предыдущей версии, то определения вара должны быть в верхней части функции, если не уверены, просто спросите
• Левого пробела, чтобы указать, где вы бы добавить в логике пометки «активный»
• Используется i++ вместо i = (i + 1) (см What is the difference between ++i and i++? некоторую информацию для того, что, что делает)
• Используется strReturn &= ... добавить в строку, функционально equivilant к strReturn = strReturn & ....