Simple Application of coffee order management based on jQuery and jquery coffee order management

Source: Internet
Author: User
Tags button type

Simple Application of coffee order management based on jQuery and jquery coffee order management

This application mainly implements the following functions:

1. Enter the customer name in the table and select coffee. Click "Add" to upload the data to the table.
2. For each row of new data generated for the table, a small coffee icon will appear in the status column, indicating that the table is being created.
3. Click the coffee icon to turn it into a green check mark, indicating that the order has been completed.
4. Click Export to Export table data as a CSV file.

HTML:

<div class="container-fluid">     

* The bootstrap3 framework is used.
* For the coffee part, I used a plug-in named bootstrap-select, which is perfectly compatible with the bootstrap UI. But pay attention to it when writing CSS, you must view the DOM in the F12 browser before writing it based on the DOM. Otherwise, it is useless to directly write the select and option statements.

JQuery:

$(document).ready(function() {   var $order = $("tbody");  var $add = $(".add-order");  var $name = $("#name");  var $drink = $("#drink");   //add new data to table  function addToTable() {   if ($name.val()) {    $order.append('<tr><td class="customer-name">' + $name.val() + '</td><td class="customer-order">' + $drink.val() + '</td><td class="customer-status"><i class="fa fa-coffee" aria-hidden="true"></i></td></tr>');    $name.val("");   } else {}  }   $add.on("click", addToTable);  $("form").keypress(function(event) {   if (event.keyCode === 13) {    event.preventDefault();    addToTable();   }  });   //click to tick  $order.delegate('.customer-status > i', 'click',  function() {   $(this).parent().html('<i class="fa fa-check" aria-hidden="true"></i>');  });   //date  var myDate = new Date();  var day = myDate.getDate();  var month = myDate.getMonth() + 1;  var year = myDate.getFullYear();   function plusZero(x) {   if (x < 10) {    x = "0" + x;   } else {    x = x;   }   return x;  }   var today = plusZero(day) + "." + plusZero(month) + "." + year;  $(".today").text(today);   //export table data to CSV  $(".export").click(function() {   $(".table").tableToCSV();  });  }); 

* For the CSV export function, I used a plug-in named tabletoCSV. You can click the link to view its usage and source code. However, this plug-in provides a single function. You can only export CSV files, but you cannot select which part of the content to export or specify the file name. If you have any better plug-ins, welcome to share ~

Here is just a simple look at the surface effect of this application, there is no data exchange thing.
Create a JSON file and use AJAX (GET, POST, DELETE, POST...) to store relevant data.

The DEMO is here. Welcome to FORK.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.