基于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(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
详解Vue组件之作用域插槽
Nov 22 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 Javascript
js实现倒计时秒杀效果
Mar 25 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 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
第七节 类的静态成员 [7]
2006/10/09 PHP
PHP 危险函数解释 分析
2009/04/22 PHP
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
实现vuex原理的示例
2020/10/21 Javascript
用js实现放大镜效果
2020/10/28 Javascript
python之import机制详解
2014/07/03 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
Python3 翻转二叉树的实现
2019/09/30 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
介绍一下Make? 为什么使用make
2016/07/31 面试题
高中三年学习生活的自我评价
2013/10/10 职场文书
厨师岗位职责
2013/11/12 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
2015初中团委工作总结
2015/07/28 职场文书