handsontable是一个拥有spreadsheet特性的数据格子组件。它基于最受欢迎的框架上工作，如angular,vue,react等，采用js脚本写的。
它可以基于其他常规插件来进行修改或扩展，他可以绑定json格式的数据，而且可以处理大数据量的数据。
它可以处理一些常规操作，比如过滤，排序，读，更新或修改等，还有一些高级操作，比如多列排序，创建单元格样式，或对数据进行求和。
handsontable很受欢迎，因为其很多特性都和我们在使用的excel类似，用户可以不用怎么学习就可以上手操作handsontable产品。
官网：https://handsontable.com/
官方API文档：https://handsontable.com/docs/7.4.2/tutorial-data-binding.html

<script>
    $(document).ready(function () {
        var hot;
        var container = document.getElementById('grade');
        var data = {};
        getDate();
        function getDate() {
            $.ajax({
                type: "post",
                url: "/GradeInfo?method=ScoreList",
                data: {},
                dataType: 'json',
                success: function (result) {
                    data = result;
                    initHot();
                },
                error: function () {
                    alert("成绩信息加载失败");
                }
            });
            return data;
        }
        var initHot = function () {
            hot = new Handsontable(container, {
                data: data,
                //表头信息
                colHeaders: ['学号', '姓名', '课程编号', '课程名称', '成绩'],
                columns: [
                    {
                        data: 'stuID',
                        type: 'text'
                    },
                    {
                        data: 'stuName',
                        type: 'text'
                    },
                    {
                        data: 'courseID',
                        type: 'text'
                    },
                    {
                        data: 'courseName',
                        type: 'text'
                    }, {
                        data: 'courseGrade',
                        type: 'text'
                    },
                ],
                rowHeaders: true,
                minSpareRows: 1,
                filters: true,
                //设置下拉菜单
                dropdownMenu: {
                    items: {
                        "filter_by_condition": {
                            name: '主要筛选',
                        },
                        "filter_operators": {
                            name: '动作筛选',
                        },
                        "filter_by_condition2": {
                            name: '次要筛选',
                        },
                        "filter_by_value": {
                            name: '值筛选'
                        },
                        "filter_action_bar": {
                            name: '栏筛选',
                        }
                    }
                },//自定义dropdownMenu
                contextMenu: {
                    items: {
                        "row_above": {
                            name: '向上插一行'
                        },
                        "row_below": {
                            name: '向下插一行'
                        },
                        "col_left": {
                            name: '向左插一列'
                        },
                        "col_right": {
                            name: '向右插一列'
                        },
                        "hsep1": "---------",//分割线
                        "remove_row": {
                            name: '删除当前行'
                        },
                        "remove_col": {
                            name: '删除当前列'
                        },
                        "clear_column": {
                            name: '清空当前列'
                        },
                        "hsep2": "---------", // 必须和上次的变量名不一样
                        "undo": {
                            name: '撤销',
                        },
                        "cut": {
                            name: '剪切',
                        },
                        "copy": {
                            name: '复制',
                        },
                        "alignment": {
                            name: '对齐',
                        },
                    }
                },//自定义右键菜单
                height: 400,
                width: '65%',
                columnSorting: true,
                //去掉水印
                licenseKey: 'non-commercial-and-evaluation',
                autoColumnSize: true,
                copyable: true,//允许键盘复制
            });
        }
    })

</script>

package com.sicnu.entity;

public class Grade {
    private int id;


    private int stuID;
    private String stuName;
    private String courseID;
    private String courseName;
    private int courseGrade;


    @Override
    public String toString() {
        return "Grade{" +
                "id=" + id +
                ", stuID=" + stuID +
                ", stuName='" + stuName + '\'' +
                ", courseID='" + courseID + '\'' +
                ", courseName='" + courseName + '\'' +
                ", courseGrade=" + courseGrade +
                '}';
    }

    public Grade() {
    }

    public Grade(int stuID, String stuName, String courseID, String courseName, int courseGrade){
        this.stuID = stuID;
        this.stuName = stuName;
        this.courseID = courseID;
        this.courseName = courseName;
        this.courseGrade = courseGrade;
    }

    public int getId() {
        return id;
    }

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


    public int getCourseGrade() {
        return courseGrade;
    }

    public int getStuID() {
        return stuID;
    }

    public String getCourseID() {
        return courseID;
    }

    public String getCourseName() {
        return courseName;
    }

    public String getStuName() {
        return stuName;
    }

    public void setStuID(int stuID) {
        this.stuID = stuID;
    }

    public void setStuName(String stuName) {
        this.stuName = stuName;
    }

    public void setCourseID(String courseID) {
        this.courseID = courseID;
    }

    public void setCourseName(String courseName) {
        this.courseName = courseName;
    }

    public void setCourseGrade(int courseGrade) {
        this.courseGrade = courseGrade;
    }


}

 package com.sicnu.controller;

import com.google.gson.Gson;
import com.sicnu.entity.Grade;
import com.sicnu.utils.JdbcUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.xml.transform.Result;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;


@WebServlet("/GradeInfo")
public class GradeInfo extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取请求的方法
        String method = request.getParameter("method");
        if("ScoreList".equalsIgnoreCase(method)){
            scoreList(request,response);
            //获取所有成绩的数据
        }else if ("AddScore".equalsIgnoreCase(method)){
            addScore(request,response);
            //登记成绩
        }else if ("DeleteScore".equalsIgnoreCase(method)){
            deleteScore(request,response);
        }

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取请求的方法
        String method = request.getParameter("method");
        //请求分发
        if("ExportScore".equalsIgnoreCase(method)){ //导出成绩

        }
    }

    public void scoreList(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        System.out.println("11111");

        Connection conn = JdbcUtils.getConnection();
        PreparedStatement pre = null;
        ResultSet res = null;
        String sql = "select * from grade";
        Gson gson = new Gson();
        try {
            pre = conn.prepareStatement(sql);
            res = pre.executeQuery();
            List<Map> mapList = new ArrayList<>();

            while (res.next()){
                //List集合中的对象是一个Map对象,而这个Map对象的键是String类型,值是Object类型
                Map<String,Object> map = new HashMap<>();
                map.put("stuID",res.getInt("stuID"));
                map.put("stuName",res.getString("stuName"));
                map.put("courseID",res.getString("courseID"));
                map.put("courseName",res.getString("courseName"));
                map.put("courseGrade",res.getString("courseGrade"));
                mapList.add(map);
            }
            JdbcUtils.close(conn, pre, res);
            response.getWriter().write(gson.toJson(mapList));
        } catch (SQLException e) {
            out.println("get data error!!");
            e.printStackTrace();
        }
    }

    private void addScore(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset:utf-8");

        String stuID1 = request.getParameter("stuID");
        Integer stuID = Integer.valueOf(stuID1).intValue();
        String stuName = new String(request.getParameter("stuName").getBytes("ISO-8859-1"),"utf-8");
        String courseID = request.getParameter("courseID");
        String courseName = new String(request.getParameter("courseName").getBytes("ISO-8859-1"),"utf-8");
        String Grade = request.getParameter("Grade");
        Integer courseGrade = Integer.valueOf(Grade).intValue();
        Grade grade = new Grade(stuID,stuName,courseID,courseName,courseGrade);
        if (stuID!=null&&stuName!=null&&courseID!=null&&courseName!=null&&courseGrade!=null){
            Connection conn = JdbcUtils.getConnection();
            PreparedStatement pre = null;
            ResultSet res = null;
            String sql = "INSERT INTO grade(stuID,stuName,courseID,courseName,courseGrade) VALUES(?,?,?,?,?)";
            try {
                pre = conn.prepareStatement(sql);
                pre.setInt(1,stuID);
                pre.setString(2,stuName);
                pre.setString(3,courseID);
                pre.setString(4,courseName);
                pre.setInt(5,courseGrade);
                pre.executeUpdate();
            }
            catch (SQLException e) {
                e.printStackTrace();
            }finally {
                JdbcUtils.close(conn,pre,res);
            }
            request.getRequestDispatcher("WEB-INF/main.jsp").forward(request,response);
        }
    }

    private void deleteScore(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{

    }
    /**
     * 导出成绩列表
     */
    private void exportScore(HttpServletResponse response,Grade grade) throws ServletException,IOException{

        //获取需要导出的数据

    }
}

package com.sicnu.utils;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class JdbcUtils {

    //加载数据库的驱动
    static{
        try {
            Class.forName("com.mysql.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

    }

    //获取数据库连接
    public static Connection getConnection(){
        try {
            return DriverManager.getConnection("jdbc:mysql://localhost:"
                    + "3306/handsontable?useUnicode=true"
                    + "&characterEncoding=utf8&useSSL=true", "root", "123456");
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return null;
    }

    //关闭数据库资源
    public static void close(Connection conn,PreparedStatement pre,ResultSet res){
        if(res!=null){
            try {
                res.close();
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
        if(pre!=null){
            try {
                pre.close();
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
        if(conn!=null){
            try {
                conn.close();
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
    }

    public static void main(String[] args){
        System.out.println(getConnection());
    }
}