如何使用 css 打印 Treeview答案

【问题标题】：How to print Treeview with css如何使用 css 打印 Treeview
【发布时间】：2014-05-02 23:55:04
【问题描述】：

我使用下面的脚本来打印我的树视图，但是我遇到了打印方法打印没有任何 CSS 的问题！

我想要两件事：

关于 CSS，我希望树的每一层都有特定的颜色。
以 css 样式打印树视图。

<script type="text/javascript">
            function addSubNodes(nodes) {
                for (var i = 0; i < nodes.get_count(); i++) {

                    if (nodes.getNode(i).get_level() > 0) {
                        for (var j = 0; j < nodes.getNode(i).get_level(); j++) {
                            content += "&nbsp;&nbsp;&nbsp;";
                        }
                    }
                    if (nodes.getNode(i).get_nodes().get_count() > 0) {
                        content += "-"
                    }

                    content += nodes.getNode(i).get_text() + "<br>";
                    if (nodes.getNode(i).get_expanded()) {
                        addSubNodes(nodes.getNode(i).get_nodes());
                    }
                }
            }
            var content = "";
            function PrintMe(node) {
                var treeView = $find("<%= RadTreeView1.ClientID %>");
                var nodes = treeView.get_nodes();

                addSubNodes(nodes);

                var pwin = window.open('', 'print_content', 'width=800,height=700,scroll=no');
                pwin.document.open();
                pwin.document.write(

                '<html><body onload="window.print()">' + content + '</body></html>');

                pwin.document.close();

                setTimeout(

    function() { pwin.close(); }, 1000);

                for (var j = 0; j < nodes.length; j++) {

                    if (nodes[j].get_nodes() != null) {

                        if (nodes[j].get_nodes().get_count() != 0) {

                            nodes[j].collapse();
                        }
                    }
                }
            }

            function printSelection(node) {
                var treeView = $find("<%= RadTreeView1.ClientID %>");
                var nodes = treeView.get_allNodes();
                for (var i = 0; i < nodes.length; i++) {
                    if (nodes[i].get_nodes() != null) {
                        if (nodes[i].get_nodes().get_count() != 0) {
                            nodes[i].expand();
                        }
                    }
                }
                var content = "";
                for (var i = 0; i < nodes.length; i++) {

                    if (nodes[i].get_level() > 0) {
                        for (var j = 0; j < nodes[i].get_level(); j++) {
                            content += "&nbsp;&nbsp;&nbsp;";
                        }
                    }
                    if (nodes[i].get_nodes().get_count() > 0) {
                        content += "-"
                    }

                    content += nodes[i].get_text() + "<br>";
                }

                var pwin = window.open('', 'print_content', 'width=800,height=700,scroll=no');
                pwin.document.open();
                pwin.document.write(

                '<html><body onload="window.print()">' + content + '</body></html>');

                pwin.document.close();

                setTimeout(

    function() { pwin.close(); }, 1000);

                for (var j = 0; j < nodes.length; j++) {

                    if (nodes[j].get_nodes() != null) {

                        if (nodes[j].get_nodes().get_count() != 0) {

                            nodes[j].collapse();
                        }
                    }
                }
            } 
        </script>

 <telerik:RadTreeView runat="server" ID="RadTreeView1" DataSourceID="ObjectDataSource1"
            DataFieldID="main_code" DataFieldParentID="father_code" DataTextField="name"
            Skin="MetroTouch">
            <DataBindings>
                <telerik:RadTreeNodeBinding Expanded="true"></telerik:RadTreeNodeBinding>
            </DataBindings>
        </telerik:RadTreeView>

来自 FireBug 的示例：

<ul class="rtUL rtLines">
        <li class="rtLI rtFirst rtLast"><div class="rtTop">
            <span class="rtSp"></span><span class="rtMinus"></span><span class="rtIn">0</span>
        </div><ul class="rtUL">
            <li class="rtLI rtLast"><div class="rtBot">
                <span class="rtSp"></span><span class="rtMinus"></span><span class="rtIn">10000</span>
            </div><ul class="rtUL">
                <li class="rtLI rtLast"><div class="rtBot">
                    <span class="rtSp"></span><span class="rtMinus"></span><span class="rtIn">10001</span>
                </div><ul class="rtUL">
                    <li class="rtLI"><div class="rtTop">
                        <span class="rtSp"></span><span class="rtMinus"></span><span class="rtIn">10002</span>
                    </div><ul class="rtUL">
                        <li class="rtLI"><div class="rtTop">
                            <span class="rtSp"></span><span class="rtIn">1</span>
                        </div></li><li class="rtLI"><div class="rtMid">
                            <span class="rtSp"></span><span class="rtMinus"></span><span class="rtIn">10003</span>
                        </div><ul class="rtUL">
                            <li class="rtLI"><div class="rtTop">
                                <span class="rtSp"></span><span class="rtIn">5</span>
                            </div></li><li class="rtLI"><div class="rtMid">
                                <span class="rtSp"></span><span class="rtIn">6</span>
                            </div></li><li class="rtLI"><div class="rtMid">
                                <span class="rtSp"></span><span class="rtIn">7</span>
                            </div></li><li class="rtLI"><div class="rtMid">
                                <span class="rtSp"></span><span class="rtIn">8</span>
                            </div></li><li class="rtLI"><div class="rtMid">
                                <span class="rtSp"></span><span class="rtIn">9</span>
                            </div></li><li class="rtLI"><div class="rtMid">
                                <span class="rtSp"></span><span class="rtIn">10</span>
                            </div></li><li class="rtLI"><div class="rtMid">
                                <span class="rtSp"></span><span class="rtIn">11</span>
                            </div></li><li class="rtLI rtLast"><div class="rtBot">
                                <span class="rtSp"></span><span class="rtIn">12</span>
                            </div></li>
                        </ul></li><li class="rtLI"><div class="rtMid">
                            <span class="rtSp"></span><span class="rtIn">20</span>
                        </div></li><li class="rtLI"><div class="rtMid">
                            <span class="rtSp"></span><span class="rtIn">21</span>
                        </div></li><li class="rtLI"><div class="rtMid">
                            <span class="rtSp"></span><span class="rtIn">22</span>
                        </div></li><li class="rtLI rtLast"><div class="rtBot">
                            <span class="rtSp"></span><span class="rtIn">23</span>
                        </div></li>
                    </ul></li><li class="rtLI"><div class="rtMid">
                        <span class="rtSp"></span><span class="rtMinus"></span><span class="rtIn">10004</span>
                    </div><ul class="rtUL">
                        <li class="rtLI"><div class="rtTop">
                            <span class="rtSp"></span><span class="rtIn">25</span>
                        </div></li><li class="rtLI rtLast"><div class="rtBot">
                            <span class="rtSp"></span><span class="rtMinus"></span><span class="rtIn">10005</span>
                        </div><ul class="rtUL">
                            <li class="rtLI"><div class="rtTop">
                                <span class="rtSp"></span><span class="rtIn">30</span>
                            </div></li><li class="rtLI rtLast"><div class="rtBot">
                                <span class="rtSp"></span><span class="rtIn">31</span>
                            </div></li>
                        </ul></li>
                    </ul></li><li class="rtLI"><div class="rtMid">
                        <span class="rtSp"></span><span class="rtIn">35</span>
                    </div></li><li class="rtLI rtLast"><div class="rtBot">
                        <span class="rtSp"></span><span class="rtIn">40</span>
                    </div></li>
                </ul></li>
            </ul></li>
        </ul></li>
    </ul>

【问题讨论】：

标签： javascript asp.net css telerik treeview

【解决方案1】：

您将 HTML 复制到新文档中，因此预计您会丢失样式。尝试打印当前文档。将您生成的 HTML 复制到具有特殊类的 div 中，并使用仅显示此 div 的打印 CSS 规则。这是一个示例，它只打印页面的一部分，同时仍然具有页面的 CSS：

<html>
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        div 
        {
            color: Red;
        }
        .myPrintDiv 
        {
            display: none;
        }
        @media print
        {
            .mainContent
            {
                display: none;
            }
            .myPrintDiv
            {
                display: block;
            }
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="Scriptmanager1" runat="server" />
    <div class="mainContent">
        all the contents on the page
    </div>
    <div class="myPrintDiv">
        put the HTML you generate here so it still inherits the page styles
    </div>
    <script type="text/javascript">
        window.onload = function () { window.print(); };
    </script>
    </form>
</body>
</html>

【讨论】：