基于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中文本框中输入法切换的问题
Dec 10 Javascript
详解js前端代码异常监控
Jan 11 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
学习Vue组件实例
Apr 28 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 Javascript
JS中==、===你分清楚了吗
Mar 04 Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 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
通过对php一些服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP的分页功能
2007/03/21 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
Laravel 5 学习笔记
2015/03/06 PHP
PHP生成plist数据的方法
2015/06/16 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
python3图片转换二进制存入mysql
2013/12/06 Python
Python3实现连接SQLite数据库的方法
2014/08/23 Python
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
Python修改列表值问题解决方案
2020/03/06 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
联想C++笔试题
2012/06/13 面试题
软件测试工程师笔试题带答案
2015/03/27 面试题
物业管理毕业生个人的求职信
2013/11/30 职场文书
讲座主持词
2014/03/20 职场文书
个人授权委托书范文
2014/09/21 职场文书
出国留学英文自荐信
2015/03/25 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
工作经历证明范本
2015/06/15 职场文书