Handsontable 的数据保存(增删改查+导出excel)
Posted 于文静0727
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Handsontable 的数据保存(增删改查+导出excel)相关的知识，希望对你有一定的参考价值。
项目用到handsontable 插件
根据官网 API写的handsontable初始化,
数据展示,
ajax请求,
参数封装,
Controller参数接受
全局容器
1 var AllData = {}; 2 var updatelist = []; 3 var delidslist =[]; 4 var insertlist=[];
handsontable 的初始化
1 function onIniHandsonTable(data) { 2 $(\'#hot\').empty(); 3 var hotElement = document.querySelector(\'#hot\'); 4 var hotSettings = { 5 data :data, 6 hiddenColumns: { 7 columns: [0], 8 indicators: true 9 }, 10 columns : [ 11 { 12 data:\'id\', 13 readOnly: true 14 },{ 15 data:\'ersystem\', 16 type:\'text\' 17 },{ 18 data:\'concursystem\', 19 type:\'text\' 20 },{ 21 data:\'apisystem\', 22 type:\'text\' 23 },{ 24 data:\'myeven\', 25 type:\'text\' 26 },{ 27 data:\'expresssum\', 28 type:\'text\' 29 },{ 30 data: \'todaydate\', 31 type: \'date\', 32 dateFormat: \'YYYY-MM-DD\' 33 },{ 34 data:\'enddate\', 35 type: \'date\', 36 dateFormat: \'YYYY-MM-DD\' 37 },{ 38 data:\'delayday\', 39 type: \'text\', 40 validator:/^[0-9]*$/ 41 } 42 ], 43 stretchH: \'all\', 44 autoWrapRow: true, 45 rowHeaders: true, 46 colHeaders : [ \'ID\', \' ERSystem \', \' ConcurSystem \',\'APISystem\',\'MyEven\',\'ExpressSum\',\'TodayDate\',\'EndDate\',\'DelayDay\' ], 47 columnSorting: true, 48 contextMenu:true, 49 sortIndicator: true, 50 dropdownMenu: [\'filter_by_condition\', \'filter_by_value\',\'filter_action_bar\'], 51 //dropdownMenu:true, 52 filters: true, 53 renderAllRows: true, 54 search: true, 55 56 afterDestroy (){ 57 // 移除事件 58 Handsontable.Dom.removeEvent(save, \'click\', saveData); 59 loadDataTable(); 60 }, 61 beforeRemoveRow:function(index,amount){ 62 var ids = []; 63 //封装id成array传入后台 64 if(amount!=0){ 65 for(var i = index;i<amount+index;i++){ 66 var rowdata = hot.getDataAtRow(i); 67 ids.push(rowdata[0]); 68 } 69 delExpressCount(ids); 70 screening(); 71 } 72 }, 73 74 afterChange:function(changes, source){ 75 //params 参数 1.column num , 2,id, 3,oldvalue , 4.newvalue 76 var params =[]; 77 if(changes!=null){ 78 var index = changes[0][0];//行号码 79 var rowdata = hot.getDataAtRow(index); 80 params.push(rowdata[0]); 81 params.push(changes[0][1]); 82 params.push(changes[0][2]); 83 params.push(changes[0][3]); 84 85 //仅当单元格发生改变的时候,id!=null,说明是更新 86 if(params[2]!=params[3]&¶ms[0]!=null){ 87 var data={ 88 id:rowdata[0], 89 ersystem:rowdata[1], 90 concursystem:rowdata[2], 91 apisystem:rowdata[3], 92 myeven:rowdata[4], 93 expresssum:rowdata[5], 94 todaydate:rowdata[6], 95 enddate:rowdata[7], 96 delayday:rowdata[8] 97 } 98 updateExpressCount(data); 99 } 100 } 101 } 102 } 103 104 hot = new Handsontable(hotElement,hotSettings); 105 //数据导入 106 var button = {excel: document.getElementById(\'excelexport\')}; 107 var exportPlugin = hot.getPlugin(\'exportFile\'); 108 var rows = hot.countRows(); 109 var cols = hot.countCols(); 110 button.excel.addEventListener(\'click\', function() { 111 exportPlugin.downloadFile(\'csv\', { 112 filename: \'Expresscount\'+\'-\'+getNowFormatDate(), 113 rowHeaders:false, 114 columnHeaders:true, 115 }); 116 }); 117 //数据导入 118 //插入的数据的获取 119 function insertExpressCount(){ 120 var idsdata = hot.getDataAtCol(0);//所有的id 121 for(var i=0;i<idsdata.length;i++){ 122 //id=null时,是插入数据,此时的i正好是行号 123 if(idsdata[i]==null){ 124 //获得id=null时的所有数据封装进data 125 var rowdata = hot.getDataAtRow(i); 126 //var collength = hot.countCols(); 127 if(rowdata!=null){ 128 var data={ 129 ersystem:rowdata[1], 130 concursystem:rowdata[2], 131 apisystem:rowdata[3], 132 myeven:rowdata[4], 133 expresssum:rowdata[5], 134 todaydate:rowdata[6], 135 enddate:rowdata[7], 136 delayday:rowdata[8] 137 } 138 insertlist.push(data); 139 } 140 } 141 } 142 if(insertlist.length!=0){ 143 AllData.insertlist = insertlist; 144 } 145 146 } 147 148 saveData =function (){ 149 //插入的数据的获取 150 insertExpressCount(); 151 if(JSON.stringify(AllData) != "{}"&&validresult){ 152 $.ajax({ 153 url:\'globalprocess\', 154 type:\'post\', 155 dataType:\'json\', 156 contentType:\'application/json\', 157 data:JSON.stringify(AllData), 158 success:function(rdata){ 159 if(rdata.success){ 160 $.alert({ 161 title: \'消息提示\', 162 type: \'blue\', 163 content: \'保存成功.\', 164 }); 165 //保存以后重置全局容器 166 clearContainer(); 167 //销毁 168 hot.destroy(); 169 } 170 else { 171 $.alert({ 172 title: \'错误提示\', 173 type: \'red\', 174 content: \'保存数据失败.\', 175 }); 176 177 } 178 }, 179 error:function () { 180 $.alert({ 181 title: \'错误提示\', 182 type: \'red\', 183 content: \'请求失败.\', 184 }); 185 clearContainer(); 186 } 187 }) 188 }else{ 189 if(!validresult){ 190 $.alert({ 191 title: \'错误提示\', 192 type: \'red\', 193 content: \'数据类型错误.\', 194 }); 195 }else{ 196 $.alert({ 197 title: \'错误提示\', 198 type: \'red\', 199 content: \'没有添加或修改数据.\', 200 }); 201 } 202 } 203 } 204 //绑定事件保存数据 205 Handsontable.Dom.addEvent(save, \'click\', saveData); 206 }
删除list封装([ id1,id2,…])
1 //删除的优先级最高 2 function delExpressCount (ids){ 3 //传入的ids.length不可能为0 4 $.each(ids,function(index,id){ 5 if(id!=null){ 6 delidslist.push(id); 7 } 8 }); 9 AllData.delidslist=delidslist; 10 }
删除的优先级别大于更新,如果一条数据被更新了又被删除了,事实上不需要执行更新操作的
1 //updatelist数据更新 2 function screening(){ 3 if(updatelist.length!=0&&delidslist.lentgh!=0){ 4 for(var i=0;i<delidslist.length;i++){ 5 for(var j=0;j<updatelist.length;j++){ 6 if(updatelist[j].id == delidslist[i]){ 7 //更新updatelist 8 updatelist.splice(j,1); 9 } 10 } 11 } 12 //把updatelist封装进AllData 13 AllData.updatelist=updatelist; 14 } 15 }
更新list封装([{expresscount1},…])
1 //更新数据 2 function updateExpressCount(data){ 3 if(JSON.stringify(data) != "{}"){ 4 var flag = true; 5 //判断记录是否存在,更新数据 6 $.each(updatelist,function(index,node){ 7 if(node.id==data.id){ 8 //此记录已经有了 9 flag = false; 10 //用新得到的记录替换原来的,不用新增 11 updatelist[index] = data; 12 } 13 }); 14 flag&&updatelist.push(data); 15 //封装 16 AllData.updatelist=updatelist; 17 } 18 }
清空全局容器
clearContainer =function (){ AllData = {}; updatelist = []; delidslist =[]; insertlist=[]; }
1 //获得当前时间 2 function getNowFormatDate() { 3 var date = new Date(); 4 var seperator1 = "-"; 5 var seperator2 = ":"; 6 var month = date.getMonth() + 1; 7 var strDate = date.getDate(); 8 if (month >= 1 && month <= 9) { 9 month = "0" + month; 10 } 11 if (strDate >= 0 && strDate <= 9) { 12 strDate = "0" + strDate; 13 } 14 var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate 15 + " " + date.getHours() + seperator2 + date.getMinutes() 16 + seperator2 + date.getSeconds(); 17 return currentdate; 18 }
加载用户数据，并绑定到handsontable
1 function loadDataTable(){ 2 showWait(); 3 $.ajax({ 4 url:\'fillList\', 5 type:\'post\', 6 dataType:\'json\', 7 success:function(rdata){ 8 closeWait(); 9 var convertData = []; 10 if (rdata && typeof rdata === "object") { 11 //重新封装数据,因为时间类型不符合要求 12 $.each(rdata,function(index,node){ 13 convertData.push({ 14 id:node.id, 15 myeven:node.myeven, 16 expresssum:node.expresssum, 17 ersystem:node.ersystem, 18 concursystem:node.concursystem, 19 apisystem :node.apisystem, 20 todaydate :common.timestampToDate(node.todaydate), 21 enddate:common.timestampToDate(node.enddate), 22 delayday:node.delayday 23 }); 24 }); 25 onIniHandsonTable(convertData); 26 } 27 else{ 28 $.alert({ 29 title: \'消息提示\', 30 type: \'red\', 31 content: \'加载数据失败.\', 32 }); 33 } 34 }, 35 error:function(e,j,t){ 36 closeWait(); 37 $.alert({ 38 title: \'错误提示\', 39 type: \'red\', 40 content: \'加载数据错误.\', 41 }); 42 console.log(\'express count/fill error:\'+j+\',\'+t); 43 } 44 }); 45 }
对应的pojo类
1 public class ExpressCount { 2 private Integer id; 3 4 private Integer ersystem; 5 6 private Integer concursystem; 7 8 private Integer apisystem; 9 10 private Integer myeven; 11 12 private Integer expresssum; 13 14 private Date todaydate; 15 16 private Date enddate; 17 18 private Integer delayday; 19 20 private Date createdate; 21 22 private Integer createuserid; 23 24 private String createusername; 25 26 public Integer getId() { 27 return id; 28 } 29 30 public void setId(Integer id) { 31 this.id = id; 32 } 33 34 public Integer getErsystem() { 35 return ersystem; 36 } 37 38 public void setErsystem(Integer ersystem) { 39 this.ersystem = ersystem; 40 } 41 42 public Integer getConcursystem() { 43 return concursystem; 44 } 45 46 public void setConcursystem(Integer concursystem) { 47 this.concursystem = concursystem; 48 } 49 50 public Integer getApisystem() { 51 return apisystem; 52 } 53 54 public void setApisystem(Integer apisystem) { 55 this.apisystem = apisystem; 56 } 57 58 public Integer getMyeven() { 59 return myeven; 60 } 61 62 public void setMyeven(Integer myeven) { 63 this.myeven = myeven; 64 } 65 66 public Integer getExpresssum() { 67 return expresssum; 68 } 69 70 public void setExpresssum(Integer expresssum) { 71 this.expresssum = expresssum; 72 } 73 74 public Date getTodaydate() { 75 return todaydate; 76 } 77 78 public void setTodaydate(Date todaydate) { 79 this.todaydate = todaydate; 80 } 81 82 public Date getEnddate() { 83 return enddate; 84 } 85 86 public void setEnddate(Date enddate) { 87 this.enddate = enddate; 88 } 89 90 public Integer getDelayday() { 91 return delayday; 92 } 93 94 public void setDelayday(Integer delayday) { 95 this.delayday = delayday; 96 } 97 98 public Date getCreatedate() { 99 return createdate; 100 } 101 102 public void setCreatedate(Date createdate) { 103 this.createdate = createdate; 104 } 105 106 public Integer getCreateuserid() { 107 return createuserid; 108 } 109 110 public void setCreateuserid(Integer createuserid) { 111 this.createuserid = createuserid; 112 } 113 114 public String getCreateusername() { 115 return createusername; 116 } 117 118 public void setCreateusername(String createusername) { 119 this.createusername = createusername == null ? null : createusername.trim(); 120 iOS CoreData 增删改查