Javascript打印功能

Question

I need help trying to print certain fields from the table using javascript. Mainly each ticket number that is generated with the name and phone number of the person and another function to just print the address of the person that purchased the tickets. I have been racking my brain for a couple of days and think I just need some fresh eyes to help me out. Here s the code I have been working with, I will admit that I am somewhat of a newb! i just a little help. Thanks.

    <div class="span16">
    <div style="float:right;">
        <a href="/admin/orders/multiprint/" class="btn btn-large btn-multiprint" id="multiprint1">Printer 3 Checked</a>
        <!--<a href="/admin/orders/multiprint/" class="btn btn-large btn-multiprint" id="multiprint2">Printer 2 Checked</a>-->
    </div>
<h1>Orders</h1>
    <hr/>
        <?php echo $this->element('pager'); ?>
            <table class="table table-striped table-bordered table-condensed">
                <thead>
                    <tr>
                        <th>Order</th>
                        <th>Raffle</th>
                        <!--<th>Transaction</th>-->
                        <th style="white-space:nowrap;">Tickets</th>
                        <th>Total</th>
                        <th>Date</th>
                        <th>Status</th>
                        <th>Name</th>
                        <th style="white-space:nowrap;width:200px;">Address</th>
                        <th style="white-space:nowrap;width:100px;">Print</th>
                        <th style="white-space:wrap;width:100px;">Address Label</th>
                    </tr>
                </thead>
                <tbody>
            <?php
                $i = 0;
                $t = 0;
                    foreach ($orders as $order):

                        $rowclass = 'orders';
                        if ($i++ % 2 == 0) {
                            $rowclass .= ' orders-even';
                        } else {
                            $rowclass .= ' orders-odd';
                        }

                        $id = $order['Order']['id'];
                        //$transaction_number = $order['Order']['transaction_number'];
                        $quantity = $order['Order']['quantity'];
                        $total = '$'.number_format($order['Order']['total'], 2, '.', ',');
                        $date = '<div class="date">'.date('m/d/y', strtotime($order['Order']['modified'])).'&nbsp;</div>';
                        $date .= '<div class="time">'.date('h:i a', strtotime($order['Order']['modified'])).'&nbsp;</div>';
                        $status = '<div class="status status-'.strtolower($order['Order']['status']).'">'.$order['Order']['status'].'&nbsp;</div>';
                        $name = '<div class="name">'.$order['Order']['first_name'].' '.$order['Order']['last_name'].'&nbsp;</div>';
                        $name .= '<div class="email">'.$order['Order']['email'].'&nbsp;</div>';
                        $phone = '<div class="phone">'.$order['Order']['phone'].'&nbsp;</div>';
                        if (!empty($phone)) {
                            $name .= '<span class="phone">'.$phone.'</span>';
                        }

                        $address  = '<div class="address">'.$order['Order']['address'].'</div>';
                        if (!empty($order['Order']['address2'])) {
                            $address .= '<div class="address">'.$order['Order']['address2'].'</div>';
                        }
                        $csz = $order['Order']['city'];
                        if (!empty($order['Order']['state'])) {
                            $csz .= ' '.$order['Order']['state'];
                        }
                        if (!empty($order['Order']['zip'])) {
                            $csz .= ', '.$order['Order']['zip'];
                        }
                        $address .= '<div class="csz">'.$csz.'</div>';
                        if (empty($order['Order']['address2'])) {
                            $address .= '<div class=""></div>';
                        }

                        $raffle = $order['Raffle']['name'];

                        if (!empty($order['Order']['printed'])) {
                            $printed  = '<a href="/orders/view/'.$order['Order']['id'].'/printer1" class="btn btn-printed">';
                            $printed .= 'Tickets';
                            $printed .= '</a>';
                        } else {
                            $printed  = '<a href="/orders/view/'.$order['Order']['id'].'/printer1" class="btn">';
                            $printed .= 'Tickets';
                            $printed .= '</a>';
                        }
                        /* settings for address labels */

                        if (!empty($order['Order']['printed2'])) {
                            $printed2  = '<a href="/orders/address/'.$order['Order']['id'].'" class="btn btn-printed">';
                            $printed2 .= 'Address';
                            $printed2 .= '</a>';

                        } else {
                            $printed2  = '<a href="/orders/address/'.$order['Order']['id'].'/" class="btn">';
                            $printed2 .= 'Address';
                            $printed2 .= '</a>';
                        }

                        ?>
                    <tr class="<?php echo $rowclass; ?>" rel="tickets-<?php echo $order['Order']['id']; ?>">
                        <?php echo '<td align="center"><input type="checkbox" name="data[Order][][id]" id="OrderId'.$order['Order']['id'].'" value="'.$order['Order']['id'].'"></td>'; ?>
                        <?php echo '<td>'.$raffle.'</td>'; ?>
                        <?php //echo '<td>'.$transaction_number.'</td>'; ?>
                        <?php echo '<td nowrap>'; ?>
                        <?php foreach ($order['Ticket'] as $ticket): ?>
                        <?php echo $ticket['reference_number']; ?>
                        <script>
                                function printTickets()
                                {
                                    window.print()
                                }
                            </script>
                                <input type="button" value="Print" onclick="printMe()"><br />
                        <?php endforeach; ?>
                        <?php echo '</td>'; ?>
                        <?php echo '<td>'.$total.'</td>'; ?>
                        <?php echo '<td>'.$date.'</td>'; ?>
                        <?php echo '<td>'.$status.'</td>'; ?>
                        <?php echo '<td>'.$name.'</td>'; ?>
                        <?php echo '<td>'.$address.'</td>'; ?>
                        <?php echo '<td>'.$printed.'</td>'; ?>
                        <?php echo '<td>'.$printed2.'   

                     </td>';?>
                    </tr>
                    <?php endforeach; ?>

                </tbody>
            </table>
        <?php echo $this->element('pager'); ?>
    <?php $this->start('sidebox.orders');?>
    <div class="well">
        <?php echo $this->Html->link(__('New Order', true), array('action' => 'add'), array('class' => 'btn primary')); ?>
        <?php echo $this->Html->link(__('List Orders', true), array('controller' => 'orders', 'action' => 'index'), array('class' => 'btn')); ?>
        <?php echo $this->Html->link(__('New Order', true), array('controller' => 'orders', 'action' => 'add'), array('class' => 'btn')); ?>
        <?php echo $this->Html->link(__('List Tickets', true), array('controller' => 'tickets', 'action' => 'index'), array('class' => 'btn')); ?>
        <?php echo $this->Html->link(__('New Ticket', true), array('controller' => 'tickets', 'action' => 'add'), array('class' => 'btn')); ?>
    </div>
    <?php $this->end(); ?>
    <?php $this->append('sidebox', $this->fetch('sidebox.orders')); ?>
</div>
<script>
$('.tickets').hide();
$(function(){

    $('.tickets-link').click(function(e){
        e.preventDefault();
        $('.'+$(this).attr('rel')).slideToggle();
    });

    $('.btn-printed, .btn-multiprint').addClass('disabled');

    $(':checkbox').change(function(){
        if ($(':checked').length) {
            $('.btn-multiprint').removeClass('disabled');
        } else {
            $('.btn-multiprint').addClass('disabled');
        }
    });

    $('.btn-multiprint').click(function(e){
        e.preventDefault();

        var ids = [];
        $(':checked').each(function(){
            ids.push($(this).attr('value'));
        });

        window.location = $(this).attr('href')+ids.join(',')+'/'+$(this).attr('id').replace('multiprint','printer');

    });
});
</script>

Answer 1

I may be missing something and maybe you have thought of this, but i feel I had to do something similar years back... why not use a print stylesheet to hide that which you don't want printed and show what you do? You could try dynamically loading a different print stylesheet if different clicks have different actions. How to load up CSS files using Javascript?