如何使用css打印Treeview

我使用以下腳本來打印我的樹視圖，但是我面臨的問題是打印方法無法打印任何CSS！如何使用css打印Treeview

我想兩件事情：

關於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>

品嚐來自螢火：

<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>

來源

2014-03-25 Anyname Donotcare

您複製HTML在新文檔中，因此預期，你將失去造型。嘗試打印當前文檔。將您生成的HTML複製到一個帶有特殊類的div，並使用打印CSS規則只顯示該div。這裏是一個只打印頁面的一部分，同時還有頁面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>

來源

2014-03-25 14:35:28 rdmptn

如何使用css打印Treeview

回答

相關問題