Question

对于构建导航的项目。表格就像这样

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

其中Fk_parentId引用id ...以构建具有级别的菜单。 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>'

如何将类标题添加到“header”<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;
}

关于变化的一些注释

将函数更改为返回类型“string”而不是“void”并修改它以使其返回字符串而不是直接写入。这通常可以更好地控制列表输出的精确位置。
为函数内调用的所有变量添加了作用域（使用'var'关键字）。请注意，以下示例仅适用于CF9 / railo。如果使用以前的版本，那么var定义需要位于函数的顶部，如果不确定则只需要询问
留出一个空格以指示您要添加逻辑以标记“活动”
使用i++代替i = (i + 1)（有关此内容的信息，请参阅What is the difference between ++i and i++?）
使用strReturn &= ...添加到字符串，功能上等同于strReturn = strReturn & ....

使用列表标题构建动态导航（coldfusion＆amp; cfscript）

1 个答案: