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


Posted in Javascript onFebruary 10, 2017

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

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

HTML:

<div class="container-fluid"> 
    <h1>Coffee Orders</h1> 
    <hr> 
    <div class="row"> 
      <!-- order form --> 
      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 order-form"> 
        <form class="form-inline" role="form"> 
          <div class="form-group"> 
            <div class="input-group"> 
              <div class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></div> 
              <input type="text" class="form-control order-name" id="name" required="required" placeholder="Name"> 
            </div> 
            <select class="selectpicker" id="drink"> 
              <option>Latte</option> 
              <option>Moccha</option> 
              <option>Cappuchino</option> 
              <option>Fat White</option> 
            </select> 
          </div> 
          <button type="button" class="btn btn-primary add-order">Add</button> 
          <button type="reset" class="btn btn-primary pull-right">Reset</button> 
        </form> 
      </div> 
      <!-- order list --> 
      <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 order-list"> 
        <table class="table table-hover"> 
          <thead> 
            <tr> 
              <th>Name</th> 
              <th>Order</th> 
              <th>Status</th> 
            </tr> 
          </thead> 
          <tbody></tbody> 
        </table> 
        <div> 
          <a class="pull-right export" data-export="export">Export to CSV</a> 
        </div> 
      </div> 
    </div> 
    <hr> 
    <div class="time"> 
      Order List of <span class="today"></span> 
    </div> 
  </div> 
  <footer> 
    Designed By <a href="http://blog.csdn.net/alenhhy" rel="external nofollow" target="_blank">Alen Hu</a> 
  </footer>

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

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(); 
 }); 
 
});

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

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

DEMO在这里,欢迎FORK。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
JavaScript中AOP的实现与应用
May 06 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
基于jQuery实现弹幕APP
Feb 10 #Javascript
BOM之navigator对象和用户代理检测
Feb 10 #Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 #Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 #Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 #Javascript
javascript自执行函数
Feb 10 #Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 #Javascript
You might like
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
Python程序设计入门(5)类的使用简介
2014/06/16 Python
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
Python常用小技巧总结
2015/06/01 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
python导入pandas具体步骤方法
2019/06/23 Python
pytorch的batch normalize使用详解
2020/01/15 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
高中生毕业自我鉴定
2013/10/10 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
党员志愿者活动方案
2014/08/28 职场文书
见习报告怎么写
2014/10/31 职场文书
工作经历证明书范文
2014/11/02 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
单位未婚证明范本
2014/11/25 职场文书
办公用品质量保证书
2015/05/11 职场文书
春节随笔
2015/08/15 职场文书
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js
JavaScript实现两个数组的交集
2022/03/25 Javascript