CSS를 사용하여 Treeview를 인쇄하는 방법

다음 스크립트를 사용하여 내 treeview를 인쇄하지만 인쇄 방법이 CSS없이 인쇄되는 문제에 직면합니다 !! 내가 나무 대단한 모든 수준의 특정 색상을 원하는 CSS와 관련된CSS를 사용하여 Treeview를 인쇄하는 방법

:
나는 두 가지를 원한다.
트 리뷰를 CSS 스타일로 인쇄하십시오. 방화 광 FROM

<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에 복사하고이 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>

출처

2014-03-25 14:35:28 rdmptn

CSS를 사용하여 Treeview를 인쇄하는 방법

답변

관련 문제