Javascript 如何使用css打印Treeview
我使用下面的脚本来打印我的树视图，但是我面临的问题是打印方法打印时没有任何CSS 我想要两件事： 关于CSS，我希望树的每一层都有一个特定的颜色。 使用css样式打印treeview。 来自FireBug的示例：Javascript 如何使用css打印Treeview,javascript,asp.net,css,telerik,treeview,Javascript,Asp.net,Css,Telerik,Treeview,我使用下面的脚本来打印我的树视图，但是我面临的问题是打印方法打印时没有任何CSS 我想要两件事： 关于CSS，我希望树的每一层都有一个特定的颜色。 使用css样式打印treeview。 来自FireBug的示例： <ul class="rtUL rtLines"> <li class="rtLI rtFirst rtLast"><div class="rtTop"> <span class="rtSp">&l
<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>
您将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>
<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>
<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>