基于jQuery实现咖啡订单管理简单应用
这款应用主要实现以下几个功能:
1.在表格中输入客户姓名并选择咖啡,点击“Add”能够把数据传至table。
2.table的每生成一行新数据,其status列都会出现一个小咖啡图标,表示正在制作中。
3.点击这个小咖啡图标,可以变成一个绿色的勾勾,表示该订单已经完成。
4.点击Export可以把表格数据导出为CSV文件。
HTML:
<divclass="container-fluid"> <h1>CoffeeOrders</h1> <hr> <divclass="row"> <!--orderform--> <divclass="col-xs-4col-sm-4col-md-4col-lg-4order-form"> <formclass="form-inline"role="form"> <divclass="form-group"> <divclass="input-group"> <divclass="input-group-addon"><iclass="fafa-user"aria-hidden="true"></i></div> <inputtype="text"class="form-controlorder-name"id="name"required="required"placeholder="Name"> </div> <selectclass="selectpicker"id="drink"> <option>Latte</option> <option>Moccha</option> <option>Cappuchino</option> <option>FatWhite</option> </select> </div> <buttontype="button"class="btnbtn-primaryadd-order">Add</button> <buttontype="reset"class="btnbtn-primarypull-right">Reset</button> </form> </div> <!--orderlist--> <divclass="col-xs-8col-sm-8col-md-8col-lg-8order-list"> <tableclass="tabletable-hover"> <thead> <tr> <th>Name</th> <th>Order</th> <th>Status</th> </tr> </thead> <tbody></tbody> </table> <div> <aclass="pull-rightexport"data-export="export">ExporttoCSV</a> </div> </div> </div> <hr> <divclass="time"> OrderListof<spanclass="today"></span> </div> </div> <footer> DesignedBy<ahref="http://blog.csdn.net/alenhhy"rel="externalnofollow"target="_blank">AlenHu</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"); //addnewdatatotable functionaddToTable(){ if($name.val()){ $order.append('<tr><tdclass="customer-name">'+$name.val()+'</td><tdclass="customer-order">'+$drink.val()+'</td><tdclass="customer-status"><iclass="fafa-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(); } }); //clicktotick $order.delegate('.customer-status>i','click', function(){ $(this).parent().html('<iclass="fafa-check"aria-hidden="true"></i>'); }); //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); //exporttabledatatoCSV $(".export").click(function(){ $(".table").tableToCSV(); }); });
*导出为CSV的这个功能我使用到了一个叫tabletoCSV的插件,用法和源代码可以点击链接进去看看。但是这款插件功能比较单一,真的就是只能导出CSV,不能选择导出哪部分内容,也无法指定文件名称等等,如果你有什么更好的相关插件,欢迎来分享啦~
这里只是简单的做了一下这款应用的表面效果,没有做数据交换方面的事情。
创建JSON文件,使用AJAX(GET,POST,DELETE,POST...)可以储存相关数据。
DEMO在这里,欢迎FORK。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。