用PHP实现Jquery Seat Chart实现

Question

PHP Page

    <!-- Booking JavaScript -->
    <script type="text/javascript" src="js/seat-charts.min.js"></script> 
    <script type="text/javascript" src="js/booking.js"></script>
    <script type="text/javascript">
    <?php 
    //Fetch all rows for each booking   
    echo " $(document).ready(function(){";
    while ($row = mysqli_fetch_array ($result, MYSQLI_ASSOC)) {
        extract ($row);
        echo "sc.get(['".$BOOKING_SEAT."']).status('unavailable'); 
";
    }
    echo "});";
    ?>
    </script>

js/booking.js this is a variant by Adrian Vazquez of jq seat chart (github) It works.

var price = 10; //price
var $cart = $('#selected-seats'); //Sitting Area
var $counter = $('#counter'); //Votes
var $total = $('#total'); //Total money

var sc = $('#seat-map').seatCharts({
    map: [  //Seating chart
        'aaaaaaaaaa',
    'aaaaaaaaaa',
    'aaaaaaaaaa',
    'aaaaaaaaaa',
        'aaaaaaaaaa'
    ],
    naming : {
        top : false,
        getLabel : function (character, row, column) {
            return column;
        }
    },
    legend : { //Definition legend
        node : $('#legend'),
        items : [
            [ 'a', 'available',   'Option' ],
            [ 'a', 'unavailable', 'Sold']
        ]
    },
    click: function () { //Click event
        if (this.status() == 'available') { //optional seat
            var maxSeats = 3;
            var ms = sc.find('selected').length;
            //alert(ms);
            if (ms < maxSeats) {
                $('<option selected>R'+(this.settings.row+1)+' S'+this.settings.label+'</option>')
                    .attr('id', 'cart-item-'+this.settings.id)
                    .attr('value', (this.settings.row+1)+'_'+this.settings.label)
                    .data('seatId', this.settings.id)
                    .appendTo($cart);

                $counter.text(sc.find('selected').length+1);
                $counter.attr('value', sc.find('selected').length+1);

                $total.text(recalculateTotal(sc)+price);
                $total.attr('value', recalculateTotal(sc)+price);

                return 'selected';
            }
                alert('You can only choose '+ maxSeats + ' seats.');
                return 'available';

        } else if (this.status() == 'selected') { //Checked

                //Update Number
                $counter.text(sc.find('selected').length-1);
                $counter.attr('value', sc.find('selected').length-1);
                //update totalnum
                $total.text(recalculateTotal(sc)-price);
                $total.attr('value', 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();
        }
    }
});


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

    return total;
}

But if I try to customize it by inserting some functions of JqSeatChart, the script does not work anymore. for example:

naming : {
    top : false,
            rows: ['A', 'B', 'C', 'C', 'D'],
    getLabel : function (character, row, column) {
        return column;
    }

The letters are printed to the left of the map but the reservation is not recorded. That is, the reservation is registered in the DB (eg 1_10) but not return to the map to the next reservation. I think the problem is in these lines:

    click: function () { //Click event
    if (this.status() == 'available') { //optional seat
    /*  queste righe limitano il numero di posti prenotabili
            *   var maxSeats = 3;
        *   var ms = sc.find('selected').length;
        *   //alert(ms);
        *   if (ms < maxSeats) {  */
                $('<option selected>R'+(this.settings.row+1)+' S'+this.settings.label+'</option>')
                    .attr('id', 'cart-item-'+this.settings.id)
                    .attr('value', (this.settings.row+1)+'_'+this.settings.label)
                    .data('seatId', this.settings.id)
                    .appendTo($cart);

            $counter.text(sc.find('selected').length+1);
            $counter.attr('value', sc.find('selected').length+1);

            $total.text(recalculateTotal(sc)+price);
            $total.attr('value', recalculateTotal(sc)+price);

            return 'selected';

That are different from the original

click: function () {
                    if (this.status() == 'available') {
                        //let's create a new <li> which we'll add to the cart items
                        $('<li>'+this.data().category+' Seat # '+this.settings.label+': <b>$'+this.data().price+'</b> <a href="#" class="cancel-cart-item">[cancel]</a></li>')
                            .attr('id', 'cart-item-'+this.settings.id)
                            .data('seatId', this.settings.id)
                            .appendTo($cart);

                        /*
                         * Lets update the counter and total
                         *
                         * .find function will not find the current seat, because it will change its stauts only after return
                         * 'selected'. This is why we have to add 1 to the length and the current seat price to the total.
                         */
                        $counter.text(sc.find('selected').length+1);
                        $total.text(recalculateTotal(sc)+this.data().price);

                        return 'selected';

I've tried to test some changes but without results So I ask suggestions to someone more experienced than me.

Answer 1

Here it is the correct file (booking.js)!

var price = 0; //price
var $cart = $('#selected-seats'); //Sitting Area
var $counter = $('#counter'); //Votes
var $total = $('#total'); //Total money

var sc = $('#seat-map').seatCharts({
    map: [  //Seating chart
        'aaaaaaaaaa',
                'aaaaaaa__a',
                'aaaaaaaaaa',
                'aaaaaaaaaa',
        'aaaaaaabbb'
    ],
    naming : {
        top : true,
        rows: ['A','B','C','D','E'],
        getLabel : function (character, row, column) {
            return column;
        }
    },
    seats:{
        a:{
            price: 99.9
        },
        b:{
            price: 200
        }
    },
    legend : { //Definition legend
        node : $('#legend'),
        items : [
            [ 'a', 'available',   'Option' ],
            [ 'a', 'unavailable', 'Sold']
        ]
    },
    click: function () { //Click event
        if (this.status() == 'available') { //optional seat
            var maxSeats = 3;
            var ms = sc.find('selected').length;
            //alert(ms);
            if (ms < maxSeats) {

                price = this.settings.data.price;



        $('<option selected>R'+(this.settings.row+1)+' S'+this.settings.label+' P'+this.settings.data.price+'</option>')
                    .attr('id', 'cart-item-'+this.settings.id)
                    .attr('value', this.settings.id)
                    .attr('alt', price)
                    .data('seatId', this.settings.id)
                    .appendTo($cart);

                $counter.text(sc.find('selected').length+1);
                $counter.attr('value', sc.find('selected').length+1);

                $total.text(recalculateTotal(sc));
                $total.attr('value', recalculateTotal(sc));

                return 'selected';
            }
                alert('You can only choose '+ maxSeats + ' seats.');
                return 'available';

        } else if (this.status() == 'selected') { //Checked

                //Update Number
                $counter.text(sc.find('selected').length-1);
                $counter.attr('value', sc.find('selected').length-1);

                //Delete reservation
                $('#cart-item-'+this.settings.id).remove();

                //update totalnum
                $total.text(recalculateTotal(sc));
                $total.attr('value', recalculateTotal(sc));

                //Delete reservation
                  //$('#cart-item-'+this.settings.id).remove();
                //optional
                return 'available';

        } else if (this.status() == 'unavailable') { //sold
            return 'unavailable';

        } else {
            return this.style();
        }
    }
});
function number_format (number, decimals, decPoint, thousandsSep) { // eslint-disable-line camelcase

  number = (number + '').replace(/[^0-9+\-Ee.]/g, '')
  var n = !isFinite(+number) ? 0 : +number
  var prec = !isFinite(+decimals) ? 0 : Math.abs(decimals)
  var sep = (typeof thousandsSep === 'undefined') ? ',' : thousandsSep
  var dec = (typeof decPoint === 'undefined') ? '.' : decPoint
  var s = ''
  var toFixedFix = function (n, prec) {
    var k = Math.pow(10, prec)
    return '' + (Math.round(n * k) / k)
      .toFixed(prec)
  }
  // @todo: for IE parseFloat(0.55).toFixed(0) = 0;
  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.')
  if (s[0].length > 3) {
    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep)
  }
  if ((s[1] || '').length < prec) {
    s[1] = s[1] || ''
    s[1] += new Array(prec - s[1].length + 1).join('0')
  }
  return s.join(dec)
}

// Add total money
function recalculateTotal(sc) {
    var total = 0;
    $('#selected-seats').find('option:selected').each(function () {
        total += Number($(this).attr('alt'));
    });

    return number_format(total,2,'.','');
}