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

删除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

更新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
     
       updatelist;    List
      
        insertlist;    List
       
         delidslist;    public List
        
          getUpdatelist() {        return updatelist;    }    public void setUpdatelist(List
         
           updatelist) {        this.updatelist = updatelist;    }    public List
          
            getInsertlist() { return insertlist; } public void setInsertlist(List
           
             insertlist) { this.insertlist = insertlist; } public List
            
              getDelidslist() { return delidslist; } public void setDelidslist(List
             
               delidslist) { this.delidslist = delidslist; }}
             
            
           
          
         
        
       
      
     

 

Controller接收

/**     * 保存编辑后table数据     * @param AllData(删除,更新,插入)     * @return     */    @ResponseBody    @RequestMapping("/globalprocess")    public Page globalprocess(@RequestBody ExpressCountDataList AllData){        Page page = new Page();        List
     
       updatelist =AllData.getUpdatelist();        List
      
        insertlist =AllData.getInsertlist();        List
       
         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;    }