如何用css打印树视图
How to print Treeview with css
我使用下面的脚本打印我的树视图，但我面临的问题是，打印方法打印没有任何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 += " ";
}
}
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 += " ";
}
}
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>
示例FROM 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>
将HTML复制到新文档中，因此预计会丢失样式。尝试打印当前文档。将生成的HTML复制到具有特殊类的div中，并使用只显示该div的print 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>
相关文章：
- 有没有一种方法可以将媒体打印css启用为普通视图
- 如何判断页面是否处于打印视图中
- 如何在 BackboneJS *木偶* 集合视图中打印行行
- 如何在我的视图中打印JavaScript代码
- 跨浏览器打印视图
- 如何在javascript中打印网格视图和文本框
- 我可以在控制台中打印值，但不能在 html 视图中打印值
- 为什么这些变量不在 html 视图中打印
- 使用Rails在视图中打印有效的、未转义的JSON
- JavaScript实现的打印二进制树的左视图返回错误的结果
- Backbone-简单集合视图-can't打印项目
- 基于jQuery模糊的检查，并在codeigniter中将结果打印到视图
- 通过Web lotus domino打印视图中的多个选定文档
- 在asp.net中使用css打印列表视图，使用javascript
- 我如何可以打印相同的页眉和页脚在所有页面的打印视图的文件
- 如何在新窗口中打开部分视图并调用打印方法
- 如何在来自服务器的视图页面上打印json数据
- 如何通过自定义打印窗口打印完整的网格视图区域
- 如何用css打印树视图
- 确保JSON在简单的视图模型对象上漂亮地打印，而不会触及javascript (ASP. js).Net MVC 4)
