Handsontable的基本使用（数据的绑定）
1.关于handsontable
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
2.引入Handsontable
1.与框架一起使用
React：npm install @handsontable/react handsontable
Angular：npm install @handsontable/angular handsontable
Vue:npm install @handsontable/vue handsontable
2.与纯JavaScript搭配使用
可从npm安装Handsontable 。它包括所有文件以及完整的源代码。
npm install handsontable
通过cdn方式引入：
https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js
https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css
3.数据绑定
1.JavaScript部分：
<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>
2.实体类
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;
}
}
3.Servlet部分
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{
//获取需要导出的数据
}
}
4.连接数据库的工具类
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());
}
}
5.需要的jar包
6.数据库
7.运行效果
刚开始学习，如有错误欢迎大家指正。