2023年5月17日 17:26:16go评论72阅读模式

英文:

hierarchical-checkboxes: not showing correctly

问题

我正在使用以下链接创建一个分层树状视图。

https://www.htmlelements.com/demos/tree/hierarchical-checkboxes/

它应该显示如下：

但是，当我使用它时，它显示如下（缺少复选标记、箭头等）：

我的代码如下（ui.html）：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="static/smart.default.css" type="text/css" />
    <script type="text/javascript" src="static/smart.tree.js"></script>
</head>
<body class="viewport">

    <smart-tree id="tree" has-three-states selection-mode="checkBox">
        <smart-tree-item>IPV4</smart-tree-item>
        <smart-tree-items-group>
            IPSEC
            <smart-tree-item>IMIX</smart-tree-item>
            <smart-tree-item>1400</smart-tree-item>
        </smart-tree-items-group>

        <!-- 其他代码省略 -->
        
    </smart-tree>

</body>
</html>

我的代码结构如下：

我已经将两个文件复制到static目录下：

smart.default.css
smart.tree.js

我是新手，任何帮助以获得相同的UI都将受到鼓励。

英文:

I am using the below link to create a hierarchical treeview.

https://www.htmlelements.com/demos/tree/hierarchical-checkboxes/

It should be displayed like the below:

However, when I am using it, it displays like this (checkmarks, arrow etc missing):

My code is below(ui.html):

&lt;!DOCTYPE html&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;static/smart.default.css&quot; type=&quot;text/css&quot; /&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;static/smart.tree.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body class=&quot;viewport&quot;&gt;

    &lt;smart-tree id=&quot;tree&quot;  has-three-states selection-mode=&quot;checkBox&quot;&gt;
        &lt;smart-tree-item&gt;IPV4&lt;/smart-tree-item&gt;
        &lt;smart-tree-items-group&gt;
            IPSEC
            &lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
            &lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
        &lt;/smart-tree-items-group&gt;

        &lt;smart-tree-items-group&gt;
            IPSEC_QOS
            &lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
            &lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
        &lt;/smart-tree-items-group&gt;

        &lt;smart-tree-items-group&gt;
            IPSEC_QOS_DPI_FNF
            &lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
            &lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
        &lt;/smart-tree-items-group&gt;

        &lt;smart-tree-items-group&gt;
            IPSEC_QOS_DPI_FNF_TNAT
            &lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
            &lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
        &lt;/smart-tree-items-group&gt;

        &lt;smart-tree-items-group&gt;
            IPSEC_QOS_DPI_FNF_SNAT_ZBFW
            &lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
            &lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
        &lt;/smart-tree-items-group&gt;


        &lt;smart-tree-item&gt;MCAST&lt;/smart-tree-item&gt;
        &lt;smart-tree-items-group&gt;
            IPSEC_MCAST
            &lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
            &lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
        &lt;/smart-tree-items-group&gt;

        &lt;smart-tree-items-group&gt;
            IPSEC_QOS_DPI_FNF_MCAST
            &lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
            &lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
        &lt;/smart-tree-items-group&gt;

        &lt;smart-tree-item&gt;IPV6&lt;/smart-tree-item&gt;
        &lt;smart-tree-items-group&gt;
            IPSECV6
            &lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
            &lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
        &lt;/smart-tree-items-group&gt;

        &lt;smart-tree-items-group&gt;
            IPSECV6_QOSV6_DPI_FNF
            &lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
            &lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
        &lt;/smart-tree-items-group&gt;
    &lt;/smart-tree&gt;

&lt;/body&gt;
&lt;/html&gt;

My code structure is:

I have copied the 2 files under static:

smart.default.css
smart.tree.js

I am new to this and any help to get the same UI would be encouraging.

答案1

得分: 0

你可能忘记添加所需的样式。以下是已翻译的部分：

    <link href="https://www.htmlelements.com/demos/styles/demos.css" rel="stylesheet"/>
    <link href="https://www.htmlelements.com/demos/styles/codepen.css" rel="stylesheet"/>
    <link href="https://www.htmlelements.com/demos/source/styles/smart.default.css" rel="stylesheet"/>
    <script src="https://www.htmlelements.com/demos/source/smart.elements.js"></script>
    <script src="https://www.htmlelements.com/demos/scripts/data.js"></script>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="static/smart.default.css" type="text/css" />
        <script type="text/javascript" src="static/smart.tree.js"></script>
    </head>
    <body class="viewport">

        <smart-tree id="tree" has-three-states selection-mode="checkBox">
            <smart-tree-item>IPV4</smart-tree-item>
            <smart-tree-items-group>
                IPSEC
                <smart-tree-item>IMIX</smart-tree-item>
                <smart-tree-item>1400</smart-tree-item>
            </smart-tree-items-group>

            <smart-tree-items-group>
                IPSEC_QOS
                <smart-tree-item>IMIX</smart-tree-item>
                <smart-tree-item>1400</smart-tree-item>
            </smart-tree-items-group>

            <smart-tree-items-group>
                IPSEC_QOS_DPI_FNF
                <smart-tree-item>IMIX</smart-tree-item>
                <smart-tree-item>1400</smart-tree-item>
            </smart-tree-items-group>

            <smart-tree-items-group>
                IPSEC_QOS_DPI_FNF_TNAT
                <smart-tree-item>IMIX</smart-tree-item>
                <smart-tree-item>1400</smart-tree-item>
            </smart-tree-items-group>

            <smart-tree-items-group>
                IPSEC_QOS_DPI_FNF_SNAT_ZBFW
                <smart-tree-item>IMIX</smart-tree-item>
                <smart-tree-item>1400</smart-tree-item>
            </smart-tree-items-group>


            <smart-tree-item>MCAST</smart-tree-item>
            <smart-tree-items-group>
                IPSEC_MCAST
                <smart-tree-item>IMIX</smart-tree-item>
                <smart-tree-item>1400</smart-tree-item>
            </smart-tree-items-group>

            <smart-tree-items-group>
                IPSEC_QOS_DPI_FNF_MCAST
                <smart-tree-item>IMIX</smart-tree-item>
                <smart-tree-item>1400</smart-tree-item>
            </smart-tree-items-group>

            <smart-tree-item>IPV6</smart-tree-item>
            <smart-tree-items-group>
                IPSECV6
                <smart-tree-item>IMIX</smart-tree-item>
                <smart-tree-item>1400</smart-tree-item>
            </smart-tree-items-group>

            <smart-tree-items-group>
                IPSECV6_QOSV6_DPI_FNF
                <smart-tree-item>IMIX</smart-tree-item>
                <smart-tree-item>1400</smart-tree-item>
            </smart-tree-items-group>
        </smart-tree>

    </body>
    </html>

如果还需要其他翻译，请提供具体内容。

英文:

You might have missed adding the required styles.

&lt;link href=&quot;https://www.htmlelements.com/demos/styles/demos.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;link href=&quot;https://www.htmlelements.com/demos/styles/codepen.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;link href=&quot;https://www.htmlelements.com/demos/source/styles/smart.default.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;script src=&quot;https://www.htmlelements.com/demos/source/smart.elements.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://www.htmlelements.com/demos/scripts/data.js&quot;&gt;&lt;/script&gt;
&lt;!DOCTYPE html&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;static/smart.default.css&quot; type=&quot;text/css&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;static/smart.tree.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body class=&quot;viewport&quot;&gt;
&lt;smart-tree id=&quot;tree&quot;  has-three-states selection-mode=&quot;checkBox&quot;&gt;
&lt;smart-tree-item&gt;IPV4&lt;/smart-tree-item&gt;
&lt;smart-tree-items-group&gt;
IPSEC
&lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
&lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
&lt;/smart-tree-items-group&gt;
&lt;smart-tree-items-group&gt;
IPSEC_QOS
&lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
&lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
&lt;/smart-tree-items-group&gt;
&lt;smart-tree-items-group&gt;
IPSEC_QOS_DPI_FNF
&lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
&lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
&lt;/smart-tree-items-group&gt;
&lt;smart-tree-items-group&gt;
IPSEC_QOS_DPI_FNF_TNAT
&lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
&lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
&lt;/smart-tree-items-group&gt;
&lt;smart-tree-items-group&gt;
IPSEC_QOS_DPI_FNF_SNAT_ZBFW
&lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
&lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
&lt;/smart-tree-items-group&gt;
&lt;smart-tree-item&gt;MCAST&lt;/smart-tree-item&gt;
&lt;smart-tree-items-group&gt;
IPSEC_MCAST
&lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
&lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
&lt;/smart-tree-items-group&gt;
&lt;smart-tree-items-group&gt;
IPSEC_QOS_DPI_FNF_MCAST
&lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
&lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
&lt;/smart-tree-items-group&gt;
&lt;smart-tree-item&gt;IPV6&lt;/smart-tree-item&gt;
&lt;smart-tree-items-group&gt;
IPSECV6
&lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
&lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
&lt;/smart-tree-items-group&gt;
&lt;smart-tree-items-group&gt;
IPSECV6_QOSV6_DPI_FNF
&lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
&lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
&lt;/smart-tree-items-group&gt;
&lt;/smart-tree&gt;
&lt;/body&gt;
&lt;/html&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

Hierarchical-checkboxes: 显示不正确

问题

答案1

使用 `Object.create` 创建函数

AES-CFB from Go to JS forge

发送/接收新消息会将我带到聊天应用程序的顶部。

无法使用Highchart API构建多级钻取图表。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论