项目用到handsontable 插件
根据官网 API写的handsontable初始化,
数据展示,
ajax请求,
参数封装,
Controller参数接受

全局容器

    var AllData = {};
    var updatelist = [];
    var delidslist =[];
    var insertlist=[];

handsontable 的初始化

function onIniHandsonTable(data) {
        $('#hot').empty();
        var hotElement = document.querySelector('#hot');
        var hotSettings =  {
                data :data,
                hiddenColumns: {
                      columns: [0],
                      indicators: true
                    },
                columns : [
                    {
                        data:'id',
                        readOnly: true
                    },{
                        data:'ersystem',
                        type:'text'
                    },{
                        data:'concursystem',
                        type:'text'
                    },{
                        data:'apisystem',
                        type:'text'
                    },{
                        data:'myeven',
                        type:'text'
                    },{
                        data:'expresssum',
                        type:'text'
                    },{
                        data: 'todaydate',
                        type: 'date',
                        dateFormat: 'YYYY-MM-DD'
                    },{
                        data:'enddate',
                        type: 'date',
                        dateFormat: 'YYYY-MM-DD'
                    },{
                        data:'delayday',
                        type: 'text',
                        validator:/^[0-9]*$/
                    }
                ],
                 stretchH: 'all',
                 autoWrapRow: true,
                 rowHeaders: true,
                 colHeaders : [ 'ID', ' ERSystem ', ' ConcurSystem ','APISystem','MyEven','ExpressSum','TodayDate','EndDate','DelayDay' ],
                 columnSorting: true,
                 contextMenu:true,
                 sortIndicator: true,
                 dropdownMenu:  ['filter_by_condition', 'filter_by_value','filter_action_bar'],
                 //dropdownMenu:true,
                 filters: true,
                 renderAllRows: true,
                 search: true,

                 afterDestroy (){
                    // 移除事件
                     Handsontable.Dom.removeEvent(save, 'click', saveData);
                     loadDataTable();
                 },
                 beforeRemoveRow:function(index,amount){
                     var ids = [];
                    //封装id成array传入后台
                     if(amount!=0){
                         for(var i = index;i<amount+index;i++){
                         var rowdata = hot.getDataAtRow(i);
                          ids.push(rowdata[0]);
                     }
                         delExpressCount(ids);
                          screening();
                     }
                 },

                 afterChange:function(changes, source){
                        //params 参数 1.column num , 2,id, 3,oldvalue , 4.newvalue
                        var params =[];
                        if(changes!=null){  
                        var index = changes[0][0];//行号码
                        var rowdata = hot.getDataAtRow(index);
                        params.push(rowdata[0]);
                        params.push(changes[0][1]);
                        params.push(changes[0][2]);
                        params.push(changes[0][3]);

                        //仅当单元格发生改变的时候,id!=null,说明是更新
                        if(params[2]!=params[3]&&params[0]!=null){
                            var data={
                                    id:rowdata[0],
                                    ersystem:rowdata[1],
                                    concursystem:rowdata[2],
                                    apisystem:rowdata[3],
                                    myeven:rowdata[4],
                                    expresssum:rowdata[5],
                                    todaydate:rowdata[6],
                                    enddate:rowdata[7],
                                    delayday:rowdata[8]
                            }
                            updateExpressCount(data);
                        }
                    }
                 }
            }

            hot = new Handsontable(hotElement,hotSettings);
             //数据导入
             var button = {excel: document.getElementById('excelexport')};
             var exportPlugin = hot.getPlugin('exportFile'); 
             var rows = hot.countRows();
             var cols = hot.countCols();
             button.excel.addEventListener('click', function() {
                    exportPlugin.downloadFile('csv', {
                        filename: 'Expresscount'+'-'+getNowFormatDate(),
                        rowHeaders:false,
                        columnHeaders:true,
                    });
                  });
             //数据导入
            //插入的数据的获取
            function insertExpressCount(){
                var idsdata = hot.getDataAtCol(0);//所有的id
                for(var i=0;i<idsdata.length;i++){
                    //id=null时,是插入数据,此时的i正好是行号
                    if(idsdata[i]==null){
                        //获得id=null时的所有数据封装进data
                        var rowdata = hot.getDataAtRow(i);
                        //var collength = hot.countCols();
                        if(rowdata!=null){
                            var data={
                                    ersystem:rowdata[1],
                                    concursystem:rowdata[2],
                                    apisystem:rowdata[3],
                                    myeven:rowdata[4],
                                    expresssum:rowdata[5],
                                    todaydate:rowdata[6],
                                    enddate:rowdata[7],
                                    delayday:rowdata[8]
                                }
                            insertlist.push(data);
                        }
                    }
                }
                if(insertlist.length!=0){
                      AllData.insertlist = insertlist;
                }

            }

            saveData =function (){
                //插入的数据的获取
                insertExpressCount();
                if(JSON.stringify(AllData) != "{}"&&validresult){
                    $.ajax({
                        url:'globalprocess', 
                        type:'post',
                        dataType:'json',
                        contentType:'application/json',
                        data:JSON.stringify(AllData),
                        success:function(rdata){
                            if(rdata.success){
                                $.alert({
                                    title: '消息提示',
                                    type: 'blue',
                                    content: '保存成功.',
                                });
                                //保存以后重置全局容器
                                clearContainer();
                                //销毁
                                hot.destroy();
                            }
                            else {
                                $.alert({
                                    title: '错误提示',
                                    type: 'red',
                                    content: '保存数据失败.',
                                });

                            }
                        },
                        error:function () {
                            $.alert({
                                    title: '错误提示',
                                    type: 'red',
                                    content: '请求失败.',
                                });
                            clearContainer();
                        }
                    })
                }else{
                    if(!validresult){
                         $.alert({
                                title: '错误提示',
                                type: 'red',
                                content: '数据类型错误.',
                            });
                    }else{
                      $.alert({
                            title: '错误提示',
                            type: 'red',
                            content: '没有添加或修改数据.',
                        });
                    }
                }
            }
          //绑定事件保存数据
          Handsontable.Dom.addEvent(save, 'click', saveData);
    }

删除list封装([ id1,id2,…])

//删除的优先级最高
    function  delExpressCount (ids){
        //传入的ids.length不可能为0
            $.each(ids,function(index,id){
                if(id!=null){
                    delidslist.push(id);
                }
            });
            AllData.delidslist=delidslist;
    }

删除的优先级别大于更新,如果一条数据被更新了又被删除了,事实上不需要执行更新操作的

    //updatelist数据更新
    function screening(){
        if(updatelist.length!=0&&delidslist.lentgh!=0){
            for(var i=0;i<delidslist.length;i++){
                for(var j=0;j<updatelist.length;j++){
                    if(updatelist[j].id == delidslist[i]){
                    //更新updatelist
                    updatelist.splice(j,1);
                    }
                }
            }
            //把updatelist封装进AllData
            AllData.updatelist=updatelist;
        }
    }

更新list封装([{expresscount1},…])

//更新数据
    function updateExpressCount(data){
        if(JSON.stringify(data) != "{}"){
            var flag = true;
            //判断记录是否存在,更新数据     
            $.each(updatelist,function(index,node){
                    if(node.id==data.id){
                        //此记录已经有了
                        flag = false;
                        //用新得到的记录替换原来的,不用新增
                        updatelist[index] = data;
                    }
                });
            flag&&updatelist.push(data);
            //封装
            AllData.updatelist=updatelist;
        }
    }

清空全局容器

clearContainer =function (){
        AllData = {};
        updatelist = [];
        delidslist =[];
        insertlist=[];
    }

//获得当前时间
    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                + " " + date.getHours() + seperator2 + date.getMinutes()
                + seperator2 + date.getSeconds();
        return currentdate;
    }

加载用户数据，并绑定到handsontable

    function loadDataTable(){
        showWait(); 
        $.ajax({
            url:'fillList',
            type:'post',
            dataType:'json',
            success:function(rdata){
                closeWait();
                var convertData = [];
                if (rdata && typeof rdata === "object") {
                    //重新封装数据,因为时间类型不符合要求
                    $.each(rdata,function(index,node){
                        convertData.push({
                            id:node.id,
                            myeven:node.myeven,
                            expresssum:node.expresssum,
                            ersystem:node.ersystem,
                            concursystem:node.concursystem,
                            apisystem :node.apisystem,
                            todaydate :common.timestampToDate(node.todaydate),
                            enddate:common.timestampToDate(node.enddate),
                            delayday:node.delayday
                            });
                    });
                    onIniHandsonTable(convertData);
                }
                else{
                    $.alert({
                        title: '消息提示',
                        type: 'red',
                        content: '加载数据失败.',
                    });
                }   
            },
            error:function(e,j,t){
                closeWait();
                $.alert({
                    title: '错误提示',
                    type: 'red',
                    content: '加载数据错误.',
                });
                console.log('express count/fill error:'+j+','+t);
            }
        });
    }

对应的pojo类

public class ExpressCount {
    private Integer id;

    private Integer ersystem;

    private Integer concursystem;

    private Integer apisystem;

    private Integer myeven;

    private Integer expresssum;

    private Date todaydate;

    private Date enddate;

    private Integer delayday;

    private Date createdate;

    private Integer createuserid;

    private String createusername;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public Integer getErsystem() {
        return ersystem;
    }

    public void setErsystem(Integer ersystem) {
        this.ersystem = ersystem;
    }

    public Integer getConcursystem() {
        return concursystem;
    }

    public void setConcursystem(Integer concursystem) {
        this.concursystem = concursystem;
    }

    public Integer getApisystem() {
        return apisystem;
    }

    public void setApisystem(Integer apisystem) {
        this.apisystem = apisystem;
    }

    public Integer getMyeven() {
        return myeven;
    }

    public void setMyeven(Integer myeven) {
        this.myeven = myeven;
    }

    public Integer getExpresssum() {
        return expresssum;
    }

    public void setExpresssum(Integer expresssum) {
        this.expresssum = expresssum;
    }

    public Date getTodaydate() {
        return todaydate;
    }

    public void setTodaydate(Date todaydate) {
        this.todaydate = todaydate;
    }

    public Date getEnddate() {
        return enddate;
    }

    public void setEnddate(Date enddate) {
        this.enddate = enddate;
    }

    public Integer getDelayday() {
        return delayday;
    }

    public void setDelayday(Integer delayday) {
        this.delayday = delayday;
    }

    public Date getCreatedate() {
        return createdate;
    }

    public void setCreatedate(Date createdate) {
        this.createdate = createdate;
    }

    public Integer getCreateuserid() {
        return createuserid;
    }

    public void setCreateuserid(Integer createuserid) {
        this.createuserid = createuserid;
    }

    public String getCreateusername() {
        return createusername;
    }

    public void setCreateusername(String createusername) {
        this.createusername = createusername == null ? null : createusername.trim();
    }
}

参数封装pojo类

public class ExpressCountDataList {
    List<ExpressCount> updatelist;
    List<ExpressCount> insertlist;
    List<Integer> delidslist;

    public List<ExpressCount> getUpdatelist() {
        return updatelist;
    }
    public void setUpdatelist(List<ExpressCount> updatelist) {
        this.updatelist = updatelist;
    }
    public List<ExpressCount> getInsertlist() {
        return insertlist;
    }
    public void setInsertlist(List<ExpressCount> insertlist) {
        this.insertlist = insertlist;
    }
    public List<Integer> getDelidslist() {
        return delidslist;
    }
    public void setDelidslist(List<Integer> delidslist) {
        this.delidslist = delidslist;
    }

}

Controller接收

/**
     * 保存编辑后table数据
     * @param AllData(删除,更新,插入)
     * @return
     */
    @ResponseBody
    @RequestMapping("/globalprocess")
    public Page globalprocess(@RequestBody ExpressCountDataList AllData){
        Page page = new Page();

        List<ExpressCount> updatelist =AllData.getUpdatelist();
        List<ExpressCount> insertlist =AllData.getInsertlist();
        List<Integer> delidslist=AllData.getDelidslist();
        //更新
        boolean result = expressCountService.globalprocess(updatelist,insertlist,delidslist);
        if(result == true){
            page.setErrorCode(0);
            page.setSuccess(true);
            page.setMessage("操作成功");
        }else{
            page.setErrorCode(0);
            page.setSuccess(true);
            page.setMessage("操作失败");
        }
        return page;
    }