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]&&params[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     }
121 }

参数封装pojo类

 1 public class ExpressCountDataList {
 2     List<ExpressCount> updatelist;
 3     List<ExpressCount> insertlist;
 4     List<Integer> delidslist;
 5
 6     public List<ExpressCount> getUpdatelist() {
 7         return updatelist;
 8     }
 9     public void setUpdatelist(List<ExpressCount> updatelist) {
10         this.updatelist = updatelist;
11     }
12     public List<ExpressCount> getInsertlist() {
13         return insertlist;
14     }
15     public void setInsertlist(List<ExpressCount> insertlist) {
16         this.insertlist = insertlist;
17     }
18     public List<Integer> getDelidslist() {
19         return delidslist;
20     }
21     public void setDelidslist(List<Integer> delidslist) {
22         this.delidslist = delidslist;
23     }
24
25 }

Controller接收

 1 /**
 2      * 保存编辑后table数据
 3      * @param AllData(删除,更新,插入)
 4      * @return
 5      */
 6     @ResponseBody
 7     @RequestMapping("/globalprocess")
 8     public Page globalprocess(@RequestBody ExpressCountDataList AllData){
 9         Page page = new Page();
10
11         List<ExpressCount> updatelist =AllData.getUpdatelist();
12         List<ExpressCount> insertlist =AllData.getInsertlist();
13         List<Integer> delidslist=AllData.getDelidslist();
14         //更新
15         boolean result = expressCountService.globalprocess(updatelist,insertlist,delidslist);
16         if(result == true){
17             page.setErrorCode(0);
18             page.setSuccess(true);
19             page.setMessage("操作成功");
20         }else{
21             page.setErrorCode(0);
22             page.setSuccess(true);
23             page.setMessage("操作失败");
24         }
25         return page;
26     }

原文地址：https://www.cnblogs.com/yuwenjing0727/p/8259722.html

时间： 2024-10-02 05:58:16

Handsontable 的数据保存(增删改查+导出excel)的相关文章

yii中数据的"增删改查"相关工作!（此文比较乱，需细看）

使用findByPk()根据数据表主键查询的是对象,不需要使用foreach()循环出来 但是使用findall()和find()查询的是对象类型的数组需要使用foreach()循环出来 ======================================= public function getMinLimit () { $sql = "..."; $result = yii::app()->db->createCommand($sql); $query = $r

Mybatis学习总结（二）—使用接口实现数据的增删改查

在这一篇中,让我们使用接口来实现一个用户数据的增删改查. 完成后的项目结构如下图所示: 在这里,person代表了一个用户的实体类.在该类中,描述了相关的信息,包括id.name.age.id_num信息.而personMapper则是该实体类的一个配置文件.需要注意的是,在上一篇博文中,namespace属性的值是其本身,而在这一篇中,使用的是接口.那么两者有什么区别呢?使用接口,那么相关的操作方法不用自己去实现,只需要调用该接口的相关的方法就能够实现相应的功能. 那么,在这里就有一个问题,接

ios CoreData框架的使用，对上下文数据的增删改查，表与表之间的关联，1对多，1对1，谓词查询，多表连接

这里是只是代码,因为博客插入图片效果不是很好,我自己写的总结比较详细,有兴趣的朋友可以在评论里留下邮箱,我收到后会发给大家. 转载注明出处,重视原创者的劳动成果,谢谢! - (void)viewDidLoad { [super viewDidLoad]; [self _creatTable];//插入数据 //    [self _query];// 查询数据 // KVC很霸道,即使readonly通过kvc也可赋值,kvo精华 //    Book * book = [[Book alloc

Node.js + MySQL 实现数据的增删改查

通过完成一个 todo 应用展示 Node.js + MySQL 增删改查的功能.这里后台使用 Koa 及其相应的一些中间件作为 server 提供服务. 初始化项目 $ mkdir node-crud && cd $_ $ yarn init -y && npx gitignore node 上面的命令创建了一个空文件夹 node-crud,进入之后初始化一个 package.json 以及创建 .gitignore 文件. 安装 Koa 并创建 app.js 以启动一个

数据的增删改查（三层）

进行数据操作必然少了对数据的增删改查,用代码生成器生成的代码不是那么满意!方便在今后使用,这里就主要写“数据访问层(Dal)” 注:这里由于是用于用于测试时,临时建的数据库用于测试使用,在实际使用过程中些许改点参数就可以使用了 /// <summary> /// 是否存在该记录 /// </summary> public bool Exists(long Id) { string sql = "select count(*) Name from t_temp where

linq的创建 和 数据的增删改查

1.linq创建之前,一定要在sql做好数据表的主外键关系. 2.linq文件是以.dbml结尾,一般一个数据库的名字就是一个linq的名字 3,以实例来演示增删改查 数据库的名字为linq,里面有两个表Users(UserName,Password,Sex,NickName,Birthday,Nation)和Nation(NationCode,NationName) (1)创建名为linq的linq. 创建完之后啥也不用改,如果需要在重新封装类和数据扩展,那就想以前重新建立Users和User

SpringMVC框架下数据的增删改查，数据类型转换，数据格式化，数据校验，错误输入的消息回显

在eclipse中javaEE环境下: 这儿并没有连接数据库,而是将数据存放在map集合中: 将各种架包导入lib下... web.xml文件配置为 <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/

Mysql学习笔记（三）对表数据的增删改查。

写在前面:(一些牢骚,可以直接跳到分割线后) 太过敏感的人不会快乐,不幸的是我正是这种性格的人. 从培训机构毕业后,迫于经济方面的压力,和当时的班里的一个同学住在了一起,我们在一个公司上班.谁知道这都是不开心生活的源头,从每天早晨开始心情就很糟糕.他是个脾气很慢的人,我是个急脾气,特别是在早上上班的时候.由此种种吧,实在是不胜枚举.算了,还是不说了,太痛苦了,我不太喜欢说别人的坏话.我是学心理学的,已经用各种方法去安慰自己,但是都不太奏效. 回想以往和朋友的交往中,我虽然不算十分合群的人,但绝对

Mybatis学习（3）实现数据的增删改查

前面已经讲到用接口的方式编程.这种方式,要注意的一个地方就是.在User.xml  的配置文件中,mapper namespace="com.yihaomen.mybatis.inter.IUserOperation" ,命名空间非常重要,不能有错,必须与我们定义的package 和 接口一致.如果不一致就会出错,这一章主要在上一讲基于接口编程的基础上完成如下事情: 1. 用 mybatis 查询数据,包括列表 2. 用 mybatis 增加数据 3. 用 mybatis 更新数据.