应用场景：用于记录扫码枪获取的编码数据，并存储在本地、计数。可修改，可导出excel。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Scanning</title>
6 <style>
7 input{width:600px;height:38px;line-height: 38px;font-size: 32px;border:1px solid #ccc;outline: none;}
8 table{font-size: 14px;margin:20px 0;}
9 table,table tr,table tr td{border-collapse: collapse;border-spacing: 0;border:1px solid #ccc;}
10 td{padding:5px;}
11 .operation{ text-align: center;}
12 .operation button{ margin: 0 5px;}
13 #export{ width: 604px; display: block; line-height: 30px; margin-bottom: 30px;}
14 </style>
15 </head>
16 <body>
17
18 <input type="textbox" id="coding" maxlength="24" />
19 <table id="table-main">
20 <tr id="num-data">
21 <td width="220">编号</td>
22 <td width="100">尺码</td>
23 <td width="100">数量</td>
24 <td width="139">操作</td>
25 </tr>
26 </table>
27 <button id="export">导出数据</button>
28 <button id="clear">清除</button>
29 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
30 <script>
31
32 document.onkeydown=function(event){
33 var e = event || window.event || arguments.callee.caller.arguments[0];
34 if(e && e.keyCode==13){
35 var _code=$("#coding").val();
36 if(_code){
37 var _size=_code.substr(-3);
38 var _index=$.inArray(_code,local.code);
39 if(_index==‘-1‘){
40 var _num=1;
41 local.data(_code,_num);
42 local.addtd(_code,_size,_num);
43 }else{
44 var _num=Number(local.num[_index])+1;
45 local.data(_index,_num,‘modify‘);
46 $(‘.code‘).each(function(){
47 if($(this).text()==_code){
48 $(this).siblings(‘.num‘).text(_num);
49 return;
50 }
51 });
52 }
53 }else{
54 alert(‘编码错误！‘);
55 }
56 $(‘#coding‘).val(‘‘).focus();
57 }else{
58 $(‘#coding‘).focus();
59 }
60 };
61
62 var local={
63 //存储的数组
64 code:[],
65 num:[],
66 //存储方法
67 data:function(code,num,modify){
68 if(localStorage.code&&localStorage.num){
69 local.code=local.read(‘code‘);
70 local.num=local.read(‘num‘);
71 }
72 if(modify==‘modify‘){
73 local.num[code]=num;
74 localStorage.num=local.num;
75 }else{
76 local.code.push(code);
77 local.num.push(num);
78 localStorage.code=local.code;
79 localStorage.num=local.num;
80 }
81 },
82 //读取数组方法
83 read:function(type){
84 if(localStorage.code&&localStorage.num){
85 if(type==‘code‘){
86 var str=localStorage.code;
87 return str.split(",");
88 }else{
89 var str=localStorage.num;
90 return str.split(",");
91 }
92 }else{
93 return false;
94 }
95 },
96 //清除方法
97 remove:function(){
98 localStorage.clear();
99 local.code=[];
100 local.num=[];
101 history.go(0);
102 },
103 //添加数据元素
104 addtd:function(code,size,num){
105 $(‘#num-data‘).after(
106 "<tr>"+
107 "<td class=‘code‘>"+code+"</td>"+
108 "<td class=‘size‘>"+size+"</td>"+
109 "<td class=‘num‘>"+num+"</td>"+
110 "<td class=‘operation‘><button class=‘mod‘>修改</button><button class=‘del‘>删除</button></td>"+
111 "</tr>"
112 );
113 },
114 //初始化
115 innt:function(){
116 $("#coding").focus();
117 var code=local.read(‘code‘);
118 var num=local.read(‘num‘);
119 if(code){
120 local.code=local.read(‘code‘);
121 local.num=local.read(‘num‘);
122 for(var i=0;i<code.length;i++){
123 var size=code[i].substr(-3);
124 local.addtd(code[i],size,num[i]);
125 }
126 }
127 }
128 };
129
130 var exp={
131 idTmr:null,
132 getExplorer:function(){
133 var explorer = window.navigator.userAgent ;
134 if (explorer.indexOf("MSIE") >= 0) {
135 return ‘ie‘;
136 }
137 else if (explorer.indexOf("Firefox") >= 0) {
138 return ‘Firefox‘;
139 }
140 else if(explorer.indexOf("Chrome") >= 0){
141 return ‘Chrome‘;
142 }
143 else if(explorer.indexOf("Opera") >= 0){
144 return ‘Opera‘;
145 }
146 else if(explorer.indexOf("Safari") >= 0){
147 return ‘Safari‘;
148 }
149 },
150 method:function(tableid){
151 if(exp.getExplorer()==‘ie‘){
152 var curTbl = document.getElementById(tableid);
153 var oXL = new ActiveXObject("Excel.Application");
154 var oWB = oXL.Workbooks.Add();
155 var xlsheet = oWB.Worksheets(1);
156 var sel = document.body.createTextRange();
157 sel.moveToElementText(curTbl);
158 sel.select();
159 sel.execCommand("Copy");
160 xlsheet.Paste();
161 oXL.Visible = true;
162 try{
163 var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
164 }catch(e){
165 print("Nested catch caught " + e);
166 }finally{
167 oWB.SaveAs(fname);
168 oWB.Close(savechanges = false);
169 oXL.Quit();
170 oXL = null;
171 exp.idTmr = window.setInterval("exp.Cleanup();", 1);
172 }
173 }else{
174 exp.tableToExcel(tableid)
175 }
176 },
177 Cleanup:function(){
178 window.clearInterval(exp.idTmr);
179 CollectGarbage();
180 },
181 tableToExcel:(function(){
182 var uri = ‘data:application/vnd.ms-excel;base64,‘,
183 template = ‘<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>‘,
184 base64 = function(s){ return window.btoa(unescape(encodeURIComponent(s))) },
185 format = function(s, c){
186 return s.replace(/{(\w+)}/g,
187 function(m, p) { return c[p]; }) }
188 return function(table, name) {
189 if(!table.nodeType) table = document.getElementById(table)
190 var ctx = {worksheet: name || ‘Worksheet‘, table: table.innerHTML}
191 window.location.href = uri + base64(format(template, ctx))
192 }
193 })()
194 }
195
196 //初始化
197 local.innt();
198
199 //导出excel
200 $(‘#export‘).click(function(){
201 exp.method(‘table-main‘);
202 });
203
204 //删除/修改
205 $(document).on(‘click‘,‘.operation button‘,function(){
206 var pet=$(this).parents(‘tr‘);
207 var code=pet.find(‘.code‘).text();
208 var index=$.inArray(code,local.code);
209 if($(this).hasClass(‘del‘)){
210 if(confirm("确定要删除这条数据？")){
211 local.code.splice(index,1);
212 local.num.splice(index,1);
213 pet.remove();
214 localStorage.code=local.code;
215 localStorage.num=local.num;
216 }
217 }else{
218 var pro=prompt(‘修改数量‘,local.num[index]);
219 local.num[index]=pro;
220 localStorage.num=local.num;
221 pet.find(‘.num‘).text(pro);
222 }
223 });
224
225 //清除，测试用，可去掉
226 $(‘#clear‘).click(function(){
227 local.remove();
228 });
229 </script>
230 </body>
231 </html>
时间： 2024-11-07 11:44:44