项目用到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 }