一聚教程网:一个值得你收藏的教程网站

热门教程

基于jQuery实现咖啡订单管理简单应用

时间:2022-06-25 17:16:08 编辑:袖梨 来源:一聚教程网

这款应用主要实现以下几个功能:

1.在表格中输入客户姓名并选择咖啡,点击“Add”能够把数据传至table。
2.table的每生成一行新数据,其status列都会出现一个小咖啡图标,表示正在制作中。
3.点击这个小咖啡图标,可以变成一个绿色的勾勾,表示该订单已经完成。
4.点击Export可以把表格数据导出为CSV文件。

HTML:

            

              

              

              

            

          

          

        

 代码如下 复制代码

    

Coffee Orders

    


    

      

      

        

          

            

              

              

            

            

              

              

              

              

            

          

          Add

          Reset

        

      

      

      

        

          

NameOrderStatus

        

          Export to CSV

        

      

    

    


    

      Order List of

    

  

  

*使用了bootstrap3框架
*选择咖啡的部分,我使用了一款叫bootstrap-select的插件,可以完美兼容bootstrap的UI,但是写CSS的时候要注意一下,得通过浏览器F12查看DOM后,方可根据DOM来写,否则直接写select和option是没用的。

JQuery:

');

   $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('');

 });

  

 //date

 varmyDate =newDate();

 varday = myDate.getDate();

 varmonth = myDate.getMonth() + 1;

 varyear = myDate.getFullYear();

  

 functionplusZero(x) {

  if(x < 10) {

   x ="0"+ x;

  }else{

   x = x;

  }

  returnx;

 }

  

 vartoday = plusZero(day) +"."+ plusZero(month) +"."+ year;

 $(".today").text(today);

  

 //export table data to CSV

 $(".export").click(function() {

  $(".table").tableToCSV();

 });

  

});

 代码如下 复制代码

$(document).ready(function() {

  

 var$order = $("tbody");

 var$add = $(".add-order");

 var$name = $("#name");

 var$drink = $("#drink");

  

 //add new data to table

 functionaddToTable() {

  if($name.val()) {

   $order.append('

'+ $name.val() +''+ $drink.val() +'

*导出为CSV的这个功能我使用到了一个叫tabletoCSV的插件,用法和源代码可以点击链接进去看看。但是这款插件功能比较单一,真的就是只能导出CSV,不能选择导出哪部分内容,也无法指定文件名称等等,如果你有什么更好的相关插件,欢迎来分享啦~

这里只是简单的做了一下这款应用的表面效果,没有做数据交换方面的事情。
创建JSON文件,使用AJAX(GET,POST,DELETE,POST...)可以储存相关数据。

DEMO在这里,欢迎FORK。

相关文章

热门栏目