最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
基于jQuery实现咖啡订单管理简单应用
时间:2022-06-25 17:16:08 编辑:袖梨 来源:一聚教程网
这款应用主要实现以下几个功能:
1.在表格中输入客户姓名并选择咖啡,点击“Add”能够把数据传至table。
2.table的每生成一行新数据,其status列都会出现一个小咖啡图标,表示正在制作中。
3.点击这个小咖啡图标,可以变成一个绿色的勾勾,表示该订单已经完成。
4.点击Export可以把表格数据导出为CSV文件。
HTML:
代码如下 | 复制代码 | |||
Coffee Orders
|
Order List of
Designed By
*使用了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 functionaddToTable() { if($name.val()) { $order.append(' | ||
'+ $name.val() +' | '+ $drink.val() +' |
*导出为CSV的这个功能我使用到了一个叫tabletoCSV的插件,用法和源代码可以点击链接进去看看。但是这款插件功能比较单一,真的就是只能导出CSV,不能选择导出哪部分内容,也无法指定文件名称等等,如果你有什么更好的相关插件,欢迎来分享啦~
这里只是简单的做了一下这款应用的表面效果,没有做数据交换方面的事情。
创建JSON文件,使用AJAX(GET,POST,DELETE,POST...)可以储存相关数据。
DEMO在这里,欢迎FORK。
相关文章
- 暗区突围道具小店怎么开 暗区道具购买方法 07-03
- Jsp servlet验证码工具类分享 07-03
- Dreamweaver怎么设置经典风格视图? 07-03
- 资讯:如何精准识别高回报的加密货币空投项目? 07-03
- 银与绯眷属强度排行一览 07-03
- mysql存储过程游标之loop循环解读 07-03