javascript - 从 jquery 插件打印选定的选项

Question

我正在尝试在我的 jsp 网站上使用 Jquery 电影座位选择插件。该插件运行良好，我可以选择座位。

我的问题是，因为我不知道 Jquery，所以我无法在我的 jsp 页面上打印用户选择的座位。

请帮我在jsp页面上打印用户选择的座位。这样我就可以使用它们存储在我的 derby 数据库中。

HTML

  <div class="demo">
    <div id="seat-map">
        <div class="front">SCREEN</div>                
    </div>

    <div class="booking-details">


        <p>Seat: </p>
        <ul id="selected-seats"></ul>
        <p>Tickets: <span id="counter">0</span></p>
        <p>Total: <b>Rs.<span id="total">0</span></b></p>

                    <a href="ticketValidation"><input type="button" value="BUY" class="checkout-button"/></a>

        <div id="legend"></div>
    </div>
    <div style="clear:both"></div>

J查询:

      </style>

    <script>
         var price = 120; //price
$(document).ready(function() {
var $cart = $('#selected-seats'), //Sitting Area

$counter = $('#counter'), //Votes
$total = $('#total'); //Total money

var sc = $('#seat-map').seatCharts({
    map: [  //Seating chart
        'aaaaaaaaaa',
        'aaaaaaaaaa',
        'aaaaaaaaaa',
        'aaaaaaaaaa',
        'aaaaaaaaaa',
        'aaaaaaaaaa',
        'aaaaaaaaaa',
        'aaaaaaaaaa',
        'aaaaaaaaaa',

    ],
    naming : {
        top : false,
        getLabel : function (character, row, column) {
            return column;
        }
    },
    legend : { //Definition legend
        node : $('#legend'),
        items : [
            [ 'a', 'available',   'Avail' ],
            [ 'a', 'unavailable', 'Sold']
        ]                  
    },
    click: function () { //Click event
        if (this.status() == 'available') { //optional seat
            $('<li>R'+(this.settings.row+1)+' S'+this.settings.label+'</li>')
                .attr('id', 'cart-item-'+this.settings.id)
                .data('seatId', this.settings.id)
                .appendTo($cart);

            $counter.text(sc.find('selected').length+1);
            $total.text(recalculateTotal(sc)+price);

            return 'selected';
        } else if (this.status() == 'selected') { //Checked
                //Update Number
                $counter.text(sc.find('selected').length-1);
                //update totalnum
                $total.text(recalculateTotal(sc)-price);

                //Delete reservation
                $('#cart-item-'+this.settings.id).remove();
                //optional
                return 'available';
        } else if (this.status() == 'unavailable') { //sold
            return 'unavailable';
        } else {
            return this.style();
        }
    }
});
//sold seat
sc.get(['1_2', '4_4','4_5','6_6','6_7','8_5','8_6','8_7','8_8', '10_1', '10_2']).status('unavailable');
});
//sum total money
function recalculateTotal(sc) {
var total = 0;
sc.find('selected').each(function () {
    total += price;
});

return total;
}
</script>

CSS:

<style> 
.front{width: 300px;margin: 5px 32px 45px 32px;background-color:           #f0f0f0; color: #666;text-align: center;padding: 3px;border-radius: 5px;} 
.booking-details {float: right;position: relative;width:200px;height: 450px; } 
.booking-details h3 {margin: 5px 5px 0 0;font-size: 16px;} 
.booking-details p{line-height:26px; font-size:16px; color:#999} 
.booking-details p span{color:#666} 
div.seatCharts-cell {color: #182C4E;height: 25px;width: 25px;line-height:     25px;margin: 3px;float: left;text-align: center;outline: none;font-size: 13px;} 
div.seatCharts-seat {color: #fff;cursor: pointer;-webkit-border-radius:5px;-   moz-border-radius:5px;border-radius: 5px;} 
div.seatCharts-row {height: 35px;} 
div.seatCharts-seat.available {background-color: #B9DEA0;} 
div.seatCharts-seat.focused {background-color: #76B474;border: none;} 
div.seatCharts-seat.selected {background-color: #E6CAC4;} 
div.seatCharts-seat.unavailable {background-color: #472B34;cursor: not-allowed;} 
div.seatCharts-container {border-right: 1px dotted #adadad;width:      400px;padding: 20px;float: left;} 
div.seatCharts-legend {padding-left: 0px;position: absolute;bottom: 16px;} 
ul.seatCharts-legendList {padding-left: 0px;} 
.seatCharts-legendItem{float:left; width:90px;margin-top: 10px;line-height: 2;} 
span.seatCharts-legendDescription {margin-left: 5px;line-height: 30px;} 
.checkout-button {display: block;width:80px; height:24px; line-    height:20px;margin: 10px auto;border:1px solid #999;font-size: 14px; cursor:pointer} 
#selected-seats {max-height: 150px;overflow-y: auto;overflow-x: none;width: 200px;} 
#selected-seats li{float:left; width:72px; height:26px; line-height:26px;    border:1px solid #d3d3d3; background:#f7f7f7; margin:6px; font-size:14px; font-   weight:bold; text-align:center}
</style>

请帮忙!

谢谢。

Answer 1

我可能会建议您使用 jQuery 对话框插件 ( dialog )，加上 jsPDF为了在打印按钮上生成一个对话框，其中包含与您选择的座位相关的 html 的 pdf 版本。

结果是这样的:

片段是:

var price = 120; //price
var sc;

//sum total money
function recalculateTotal(sc) {
  var total = 0;
  sc.find('selected').each(function () {
    total += price;
  });

  return total;
}

$(function () {
  var $cart = $('#selected-seats'), //Sitting Area

      $counter = $('#counter'), //Votes
      $total = $('#total'); //Total money

  sc = $('#seat-map').seatCharts({
    map: [  //Seating chart
      'aaaaaaaaaa',
      'aaaaaaaaaa',
      'aaaaaaaaaa',
      'aaaaaaaaaa',
      'aaaaaaaaaa',
      'aaaaaaaaaa',
      'aaaaaaaaaa',
      'aaaaaaaaaa',
      'aaaaaaaaaa',

    ],
      naming: {
      top: false,
      getLabel: function (character, row, column) {
      return column;
      }
      },
      legend: { //Definition legend
      node: $('#legend'),
      items: [
      ['a', 'available', 'Avail'],
    ['a', 'unavailable', 'Sold']
    ]
  },
                                 click: function () { //Click event
    if (this.status() == 'available') { //optional seat
      $('<li>R' + (this.settings.row + 1) + ' S' + this.settings.label + '</li>')
      .attr('id', 'cart-item-' + this.settings.id)
      .data('seatId', this.settings.id)
      .appendTo($cart);

      $counter.text(sc.find('selected').length + 1);
      $total.text(recalculateTotal(sc) + price);

      return 'selected';
    } else if (this.status() == 'selected') { //Checked
      //Update Number
      $counter.text(sc.find('selected').length - 1);
      //update totalnum
      $total.text(recalculateTotal(sc) - price);

      //Delete reservation
      $('#cart-item-' + this.settings.id).remove();
      //optional
      return 'available';
    } else if (this.status() == 'unavailable') { //sold
      return 'unavailable';
    } else {
      return this.style();
    }
  }
});
//sold seat
sc.get(['1_2', '4_4', '4_5', '6_6', '6_7', '8_5', '8_6', '8_7', '8_8', '10_1', '10_2']).status('unavailable');


$(':button[value="PRINT"]').on('click', function(e) {
  e.preventDefault();
  if ($('#selected-seats li').length > 0) {
    var doc = new jsPDF();

    var specialElementHandlers = {
      '#selected-seats': function(element, renderer){
        return true;
      }
    };
    doc.fromHTML($('#selected-seats').html(), 15, 15, {
      'width': 170,
      'elementHandlers': specialElementHandlers
    });
    var uriPdf =  doc.output('datauristring');

    $('<div>').prop('id', '_currentDialog').add('<iframe id="_myPdf" type="application/pdf" src="' + uriPdf + '"></iframe>').dialog({
      title: "Selected seat",
      width: 600,
      height: 800,
      close: function (event, ui) {
        $('#_currentDialog').remove();
      }
    });
  } else {
    alert('No selected seat to print!')
  }
});
});

.front {
  width: 300px;
  margin: 5px 32px 45px 32px;
  background-color: #f0f0f0;
  color: #666;
  text-align: center;
  padding: 3px;
  border-radius: 5px;
}

.booking-details {
  float: right;
  position: relative;
  width: 200px;
  height: 450px;
}

.booking-details h3 {
  margin: 5px 5px 0 0;
  font-size: 16px;
}

.booking-details p {
  line-height: 26px;
  font-size: 16px;
  color: #999
}

.booking-details p span {
  color: #666
}

div.seatCharts-cell {
  color: #182C4E;
  height: 25px;
  width: 25px;
  line-height: 25px;
  margin: 3px;
  float: left;
  text-align: center;
  outline: none;
  font-size: 13px;
}

div.seatCharts-seat {
  color: #fff;
  cursor: pointer;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

div.seatCharts-row {
  height: 35px;
}

div.seatCharts-seat.available {
  background-color: #B9DEA0;
}

div.seatCharts-seat.focused {
  background-color: #76B474;
  border: none;
}

div.seatCharts-seat.selected {
  background-color: #E6CAC4;
}

div.seatCharts-seat.unavailable {
  background-color: #472B34;
  cursor: not-allowed;
}

div.seatCharts-container {
  border-right: 1px dotted #adadad;
  width: 400px;
  padding: 20px;
  float: left;
}

div.seatCharts-legend {
  padding-left: 0px;
  position: absolute;
  bottom: 16px;
}

ul.seatCharts-legendList {
  padding-left: 0px;
}

.seatCharts-legendItem {
  float: left;
  width: 90px;
  margin-top: 10px;
  line-height: 2;
}

span.seatCharts-legendDescription {
  margin-left: 5px;
  line-height: 30px;
}

.checkout-button {
  display: inline;
  width: 80px;
  height: 24px;
  line-height: 20px;
  margin: 10px auto;
  border: 1px solid #999;
  font-size: 14px;
  cursor: pointer
}

#selected-seats {
  max-height: 150px;
  overflow-y: auto;
  overflow-x: none;
  width: 200px;
}

#selected-seats li {
  float: left;
  width: 72px;
  height: 26px;
  line-height: 26px;
  border: 1px solid #d3d3d3;
  background: #f7f7f7;
  margin: 6px;
  font-size: 14px;
  font- weight: bold;
  text-align: center
}
#_myPdf {
  width: 100% !important;
}

<link href="js/jquery.seat-chart/jquery.seat-charts.css" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="js/jquery.seat-chart/jquery.seat-charts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>


<div class="demo">
    <div id="seat-map">
        <div class="front">SCREEN</div>
    </div>

    <div class="booking-details">


        <p>Seat: </p>
        <ul id="selected-seats"></ul>
        <p>Tickets: <span id="counter">0</span></p>

        <p>Total: <b>Rs.<span id="total">0</span></b></p>

        <a href="ticketValidation"><input type="button" value="BUY" class="checkout-button"/></a>
        <a href="ticketPrint"><input type="button" value="PRINT" class="checkout-button"/></a>

        <div id="legend"></div>
    </div>
    <div style="clear:both"></div>
</div>