TreeView这样的样式能做吗?

jefferson8635 2017-04-17 03:27:54

TreeView这样的样式能做吗?
...全文
420 10 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
吉普赛的歌 2017-04-18
  • 打赏
  • 举报
回复
用 zTree 吧, 方便快捷。 http://www.treejs.cn/v3/demo.php#_506
  • 打赏
  • 举报
回复
你可以看到,css 可以去掉树状网格线,可以设置 title 背景颜色、圆角,设置静态的打开关闭图标。 而 html 则是表明了核心的数据结构。 最后的 js 则是处理折叠展开,动态设置提示文字,动态改变图标。 这里每一方面东西都不过就是那么3、4条知识,修改一下它易如反掌。
  • 打赏
  • 举报
回复
哦,上面的是网上的,它的class名字写错了,应该改为
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        .tree {
            min-height: 20px;
            padding: 19px;
            margin-bottom: 20px;
            background-color: #fbfbfb;
            border: 1px solid #999;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
        }

            .tree li {
                list-style-type: none;
                margin: 0;
                padding: 10px 5px 0 5px;
                position: relative;
            }

                .tree li::before, .tree li::after {
                    content: '';
                    left: -20px;
                    position: absolute;
                    right: auto;
                }

                .tree li::before {
                    border-left: 1px solid #999;
                    bottom: 50px;
                    height: 100%;
                    top: 0;
                    width: 1px;
                }

                .tree li::after {
                    border-top: 1px solid #999;
                    height: 20px;
                    top: 25px;
                    width: 25px;
                }

                .tree li span {
                    -moz-border-radius: 5px;
                    -webkit-border-radius: 5px;
                    border: 1px solid #999;
                    border-radius: 5px;
                    display: inline-block;
                    padding: 3px 8px;
                    text-decoration: none;
                }

                .tree li.parent_li > span {
                    cursor: pointer;
                }

            .tree > ul > li::before, .tree > ul > li::after {
                border: 0;
            }

            .tree li:last-child::before {
                height: 30px;
            }

            .tree li.parent_li > span:hover, .tree li.parent_li > span:hover + ul li span {
                background: #eee;
                border: 1px solid #94a0b4;
                color: #000;
            }
    </style>
</head>
<body>
    <div class="tree well">
        <ul>
            <li>
                <span><i class="glyphicon glyphicon-folder-open"></i>Parent</span> <a href="">Goes somewhere</a>
                <ul>
                    <li>
                        <span><i class="glyphicon glyphicon-minus-sign"></i>Child</span> <a href="">Goes somewhere</a>
                        <ul>
                            <li>
                                <span><i class="glyphicon glyphicon-leaf"></i>Grand Child</span> <a href="">Goes somewhere</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span><i class="glyphicon glyphicon-minus-sign"></i>Child</span> <a href="">Goes somewhere</a>
                        <ul>
                            <li>
                                <span><i class="glyphicon glyphicon-leaf"></i>Grand Child</span> <a href="">Goes somewhere</a>
                            </li>
                            <li>
                                <span><i class="glyphicon glyphicon-minus-sign"></i>Grand Child</span> <a href="">Goes somewhere</a>
                                <ul>
                                    <li>
                                        <span><i class="glyphicon glyphicon-minus-sign"></i>Great Grand Child</span> <a href="">Goes somewhere</a>
                                        <ul>
                                            <li>
                                                <span><i class="glyphicon glyphicon-leaf"></i>Great great Grand Child</span> <a href="">Goes somewhere</a>
                                            </li>
                                            <li>
                                                <span><i class="glyphicon glyphicon-leaf"></i>Great great Grand Child</span> <a href="">Goes somewhere</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <span><i class="glyphicon glyphicon-leaf"></i>Great Grand Child</span> <a href="">Goes somewhere</a>
                                    </li>
                                    <li>
                                        <span><i class="glyphicon glyphicon-leaf"></i>Great Grand Child</span> <a href="">Goes somewhere</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <span><i class="glyphicon glyphicon-leaf"></i>Grand Child</span> <a href="">Goes somewhere</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <span><i class="glyphicon glyphicon-folder-open"></i>Parent2</span> <a href="">Goes somewhere</a>
                <ul>
                    <li>
                        <span><i class="glyphicon glyphicon-leaf"></i>Child</span> <a href="">Goes somewhere</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <br />
    <input type="button" value="打印" onclick="window.print()" />

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>


    <script type="text/javascript">
        $(function () {
            $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
            $('.tree li.parent_li > span').on('click', function (e) {
                var children = $(this).parent('li.parent_li').find(' > ul > li');
                if (children.is(":visible")) {
                    children.hide('fast');
                    $(this).attr('title', 'Expand this branch').find(' > i').addClass('glyphicon-plus-sign').removeClass('glyphicon-minus-sign');
                } else {
                    children.show('fast');
                    $(this).attr('title', 'Collapse this branch').find(' > i').addClass('glyphicon-minus-sign').removeClass('glyphicon-plus-sign');
                }
                e.stopPropagation();
            });
        });
    </script>
</body>
</html>
你可以看到,css、html、js 三者的能力,有很好的体现。你的所有的前端代码设计都可以按照这个知识分布的模式来准备知识。
  • 打赏
  • 举报
回复
以下这个 html (网上很多的)你可以自己修改一下,例如在 js 中把 glyphicon glyphicon-minus-sign 改为动态设置的。
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        .tree {
            min-height: 20px;
            padding: 19px;
            margin-bottom: 20px;
            background-color: #fbfbfb;
            border: 1px solid #999;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
        }

            .tree li {
                list-style-type: none;
                margin: 0;
                padding: 10px 5px 0 5px;
                position: relative;
            }

                .tree li::before, .tree li::after {
                    content: '';
                    left: -20px;
                    position: absolute;
                    right: auto;
                }

                .tree li::before {
                    border-left: 1px solid #999;
                    bottom: 50px;
                    height: 100%;
                    top: 0;
                    width: 1px;
                }

                .tree li::after {
                    border-top: 1px solid #999;
                    height: 20px;
                    top: 25px;
                    width: 25px;
                }

                .tree li span {
                    -moz-border-radius: 5px;
                    -webkit-border-radius: 5px;
                    border: 1px solid #999;
                    border-radius: 5px;
                    display: inline-block;
                    padding: 3px 8px;
                    text-decoration: none;
                }

                .tree li.parent_li > span {
                    cursor: pointer;
                }

            .tree > ul > li::before, .tree > ul > li::after {
                border: 0;
            }

            .tree li:last-child::before {
                height: 30px;
            }

            .tree li.parent_li > span:hover, .tree li.parent_li > span:hover + ul li span {
                background: #eee;
                border: 1px solid #94a0b4;
                color: #000;
            }
    </style>
</head>
<body>
    <div class="tree well">
        <ul>
            <li>
                <span><i class="glyphicon glyphicon-folder-open"></i>Parent</span> <a href="">Goes somewhere</a>
                <ul>
                    <li>
                        <span><i class="glyphicon glyphicon-minus-sign"></i>Child</span> <a href="">Goes somewhere</a>
                        <ul>
                            <li>
                                <span><i class="glyphicon glyphicon-leaf"></i>Grand Child</span> <a href="">Goes somewhere</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span><i class="glyphicon glyphicon-minus-sign"></i>Child</span> <a href="">Goes somewhere</a>
                        <ul>
                            <li>
                                <span><i class="glyphicon glyphicon-leaf"></i>Grand Child</span> <a href="">Goes somewhere</a>
                            </li>
                            <li>
                                <span><i class="glyphicon glyphicon-minus-sign"></i>Grand Child</span> <a href="">Goes somewhere</a>
                                <ul>
                                    <li>
                                        <span><i class="glyphicon glyphicon-minus-sign"></i>Great Grand Child</span> <a href="">Goes somewhere</a>
                                        <ul>
                                            <li>
                                                <span><i class="glyphicon glyphicon-leaf"></i>Great great Grand Child</span> <a href="">Goes somewhere</a>
                                            </li>
                                            <li>
                                                <span><i class="glyphicon glyphicon-leaf"></i>Great great Grand Child</span> <a href="">Goes somewhere</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <span><i class="glyphicon glyphicon-leaf"></i>Great Grand Child</span> <a href="">Goes somewhere</a>
                                    </li>
                                    <li>
                                        <span><i class="glyphicon glyphicon-leaf"></i>Great Grand Child</span> <a href="">Goes somewhere</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <span><i class="glyphicon glyphicon-leaf"></i>Grand Child</span> <a href="">Goes somewhere</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <span><i class="glyphicon glyphicon-folder-open"></i>Parent2</span> <a href="">Goes somewhere</a>
                <ul>
                    <li>
                        <span><i class="glyphicon glyphicon-leaf"></i>Child</span> <a href="">Goes somewhere</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <br />
    <input type="button" value="打印" onclick="window.print()" />

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>


    <script type="text/javascript">
        $(function () {
            $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
            $('.tree li.parent_li > span').on('click', function (e) {
                var children = $(this).parent('li.parent_li').find(' > ul > li');
                if (children.is(":visible")) {
                    children.hide('fast');
                    $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
                } else {
                    children.show('fast');
                    $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
                }
                e.stopPropagation();
            });
        });
    </script>
</body>
</html>
yws871218 2017-04-18
  • 打赏
  • 举报
回复
写个控件吧 建议
Mooyi_水 2017-04-17
  • 打赏
  • 举报
回复
能做,修改Template的样式就好了
wang_peng_yl 2017-04-17
  • 打赏
  • 举报
回复
如果是asp.net, 那实质就是html + js + css,想怎么改就怎么改
by_封爱 版主 2017-04-17
  • 打赏
  • 举报
回复
你这个 不是accordion吗? 不是treeview啊...
jefferson8635 2017-04-17
  • 打赏
  • 举报
回复
就是ASP.NET的
  • 打赏
  • 举报
回复
如果是WPF,通过修改TreeView以及TreeViewItem的Template 是可以实现的。

111,098

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术 C#
社区管理员
  • C#
  • AIGC Browser
  • by_封爱
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

让您成为最强悍的C#开发者

试试用AI创作助手写篇文章吧