如何实现Handsontable的增删改

最新推荐文章于 2023-03-27 17:25:10 发布
最新推荐文章于 2023-03-27 17:25:10 发布
阅读量1k 收藏 2
点赞数
分类专栏： Handsontable 文章标签： ajax html java javascript jsp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43816711/article/details/106996136
版权 
上一篇讲的handsontable获取后台的数据并显示在excel表中，那么接下来就要实现基本的增删改操做

1.新增数据

HTML部分：

<div class="col-md-10 col-sm-10 col-xs-3" style="display: block" id="grade_div">
            <input type="button" id="gradeadd" value="新增" style="margin-bottom: 5px;margin-right: 5px" class="btn btn-success btn-sm" data-toggle="modal" data-target="#addGrade">
            <div id="grade"></div>
            <%--添加成绩的模态框--%>
            <div class="modal fade" id="addGrade" tabindex="-1" role="dialog" aria-labelledby="addGradeLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">添加成绩信息</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" action="/GradeInfo?method=AddScore" method="post" id="addgradeform">
                                <div class="form-group has-feedback">
                                    <label class="control-label col-sm-2" for="inputStuID">学号</label>
                                    <div class="col-sm-9">
                                        <input name="stuID" type="number" class="form-control" id="inputStuID" placeholder="学号" aria-describedby="inputStuIDStatus">
                                    </div>
                                </div>
                                <div class="form-group has-feedback">
                                    <label class="control-label col-sm-2" for="inputStuName">姓名</label>
                                    <div class="col-sm-9">
                                        <input name="stuName" type="text" class="form-control" id="inputStuName" placeholder="姓名" aria-describedby="inputStuNameStatus">
                                    </div>
                                </div>
                                <div class="form-group has-feedback">
                                    <label class="control-label col-sm-2" for="inputcourseID">课程编号</label>
                                    <div class="col-sm-9">
                                        <input name="courseID" type="text" class="form-control" id="inputcourseID" placeholder="课程编号" aria-describedby="inputcourseIDStatus">
                                    </div>
                                </div>
                                <div class="form-group has-feedback">
                                    <label class="control-label col-sm-2" for="inputcourseName">课程名称</label>
                                    <div class="col-sm-9">
                                        <input name="courseName" type="text" class="form-control" id="inputcourseName" placeholder="课程名称" aria-describedby="inputcourseNameStatus">
                                    </div>
                                </div>
                                <div class="form-group has-feedback">
                                    <label class="control-label col-sm-2" for="inputGrade">成绩</label>
                                    <div class="col-sm-9">
                                        <input name="Grade" type="number" class="form-control" id="inputGrade" placeholder="成绩" aria-describedby="inputGradeStatus">
                                    </div>
                                </div>
                                <div class="for-group">
                                    <input type="submit" value="保存" class="btn btn-primary" style="margin-left: 50px">
                                    <input type="button" value="关闭" class="btn btn-default" style="margin-left: 50px" data-dismiss="modal">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

运行效果：
在这里插入图片描述
controller:

 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);
        }else if ("UpdateScore".equalsIgnoreCase(method)){
            updateScore(request,response);
        }

    }
    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);
        }
    }

2.删除某一行:

//当要删除一或多个行时触发。
                beforeRemoveRow:function(index, amount){
                    if (confirm("确定删除该行吗")){
                        var rid = index,
                            dtArr = hot.getDataAtRow(rid),
                            dtId = dtArr[0],
                            st = {"stuID":dtId};
                        $.ajax({
                            type:"post",
                            url:"GradeInfo?method=DeleteScore",
                            data:st,
                            dataType:"text",
                            success:function (data) {
                                alert("删除成功！");
                            },
                            error:function () {
                                alert("删除失败！")
                            }
                        })
                    }
                    else {
                        return;
                    }
                }

controller

private void deleteScore(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        String stuID = request.getParameter("stuID");
        Connection connection = JdbcUtils.getConnection();
        PreparedStatement ps = null;
        ResultSet rs = null;
        String sql = "DELETE FROM grade WHERE stuID= '"+stuID+"'";
        System.out.println(sql);
        try {
            ps = connection.prepareStatement(sql);
            ps.executeUpdate(sql);
            JdbcUtils.close(connection,ps,rs);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

3.修改数据

afterChange:function (changes,source) {
                    if (changes!=null){
                        var row = changes[0][0];
                        var updata = {
                            "colName":changes[0][1],
                            "oValue":changes[0][2],
                            "nValue":changes[0][3],
                        };
                        if (changes[0][2] === changes[0][3]){
                            return;
                        }else {
                            // 修改后自动异步提交数据
                            $.ajax({
                                type:'post',
                                url:"GradeInfo?method=UpdateScore",
                                data:updata,
                                dataType:'text',
                                success:function (data) {
                                    alert("更新成功");
                                },
                                error:function () {
                                    alert("更新失败");
                                }
                            })
                        }
                    }
                },

controller

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

        String ovalue = request.getParameter("oValue");
        String nvalue = request.getParameter("nValue");
        String colname = request.getParameter("colName");

        Connection conn = JdbcUtils.getConnection();
        PreparedStatement pre = null;
        String sql = "UPDATE grade SET "+colname+" = '"+nvalue+"' WHERE "+colname+" = '"+ovalue+"'";
        System.out.println(sql);
        try {
            pre = conn.prepareStatement(sql);
            int res = pre.executeUpdate(sql);
            out.println(res);
            pre.close();
            conn.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        request.getRequestDispatcher("WEB-INF/main.jsp").forward(request,response);
    }
98seven
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
handsontable 汉化
10-17
handsontable汉化主js文件！！！！！！！！！！！！！！！！！！！！！！！
Handsontable 的数据保存(增删改查+导出excel)
sunscheung的博客
04-09 1360
项目用到handsontable 插件  根据官网 API写的handsontable初始化,  数据展示,  ajax请求,  参数封装,  Controller参数接受 全局容器 var AllData = {}; var updatelist = []; var delidslist =[]; var insertlist=[]; handsontable 的初始化 function onIniHandsonTable(data) { KaTeX p
handsontable下拉数字递增效果vue
tingtingya_的博客
08-16 707
vue中使用handsontable实现下拉表格数据数字递增效果
handsontable右键新增、删除改为按钮新增删除
程序员一枚，仅记录工作中的难点
03-27 706
handsontable自带右键新增表格行和删除行功能（afterchange钩子中），但是实际使用中，右键功能并不容易被发现，用户的使用体验不好，所以需要把新增行和删除行的功能拿出来，在表格外使用按钮实现表格行的新增和删除。
handsontable 例子
07-14
hangdsontable的一个简单的汉化后的例子
ThinkPHP框架实现数据增删改
10-19
总结起来，ThinkPHP框架通过其MVC架构和数据操作接口，使得开发者可以轻松地实现数据库的增删改查操作。通过`D()`函数获取数据模型，`create()`处理数据验证，`add()`, `delete()`, `save()`分别对应插入、删除和...
javascript实现表格增删改操作实例详解
10-24
主要介绍了javascript实现表格增删改操作的实现方法,以实例形式较为详细的分析了javascript操作表格的相关技巧,非常具有实用价值,需要的朋友可以参考下
MyBatis实现增删改插完善
05-07
本教程将详细介绍如何使用MyBatis实现数据库的增删改插功能，并确保其完善性。 首先，我们需要理解MyBatis的核心概念，包括SqlSessionFactory、SqlSession和Mapper。SqlSessionFactory是创建SqlSession的工厂，...
element-ui tree结构实现增删改自定义功能代码
10-14
在本文中，我们将深入探讨如何使用Element-UI的Tree组件实现增删改的自定义功能。Element-UI是一个基于Vue.js的开源UI组件库，它提供了丰富的组件供开发者使用，其中包括Tree组件，用于展示层级关系的数据。在描述的...
vue实现节点增删改功能
10-16
主要为大家详细介绍了vue实现节点增删改功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js 表格编辑 插入行 删除行 编辑数据
07-18
js 表格编辑 插入行 删除行 编辑数据 将表格内容生产json格式
handsontable台账实例(.net+oracle数据库)
07-26
基于多表头的在线EXCEL前端设计 1、与.net交互 2、基于oracle数据库 3、多行表头 4、动态加载数据 5、单元格合并 6、编辑后自动预留空行及空行初始值 7、基于handsontable 详细介绍请点击http://blog.csdn.net/wynan830/article/details/9058173
handsontabledemo
03-24
handsontable是一个简约的Excel HTML和JavaScript等数据网格编辑，网上中文资料不多 ，自己做了一个demo与大家分享，使用maven构建，并且自定义了两个右键操作
handsontable中文API 常规配置 web excel表格
11-10
handsontable中文API 常规配置，第三方web 表格处理属性设计文档，包括单元格的合并等操作
html table 批量 修改,原生js实现框选表格内容并批量更改（vue）
weixin_39744316的博客
06-04 985
原生js实现框选表格内容并批量更改(vue)前言平常开发中，有这样的需求，须要在表格中进行框选，并对框选中的内容进行批量更改。源码于文章结尾javascriptdemo 下面连接供在线调试：html讲解主要思路经过监听鼠标事件，进行框选框绘制。获取框选 的dom，并计算其是否在框选区域，来进行批量更改。其中主要的方式 getClientRects。java业务代码：一、初始化表格数据结构node由...
Handsontable常用方法
热门推荐
风火一回，一生不毁
05-29 1万+
1.clear():清空数据 2.createCol(index,amount,createAutomatically)：添加列 index：列索引，amount：添加的列总数，createAutomatically：为一个数字 removeCol(index,amount):删除列 createRow(index):添加行 removeRo
handsontable mysql_handsontable - 刷新数据并维护过滤器和排序条件
weixin_36466165的博客
02-11 433
我设法解决了这个问题。每个方面的解决方案如下：过滤器强>在更新数据设置时，将Handsontable的版本更新为版本v1.11.0会自行维护过滤器。分拣强>按如下方式更新上述方法：$http({method: "POST",url: "my-data-url",data: "my-post-data"}).then(function(response){// response cont...
handsontable的单元格操作方法
qq_38958822的博客
09-09 1410
handsontable的单元格操作方法
handsontable教程_通过Handsontable在kintone上实现像Excel一样编辑数据 之系列1
weixin_34079140的博客
12-23 495
概要kintone虽然可以通过浏览器直接查看记录列表以及编辑记录等操作，但还是有不少客户反映希望可以像Excel那样查看、编辑数据。这次就向大家介绍一下如何使用Cybozu CDN中公布的Handsontable来实现类似Excel的编辑方式。感兴趣的务必请尝试一下哦。Handsontable是指什么？Handsontable是一个JavaScript库，可以帮助您轻松实现类似Excel电子表格一...
python实现mysql增删改
最新发布
09-07
要实现Python对MySQL数据库的增删改操作，可以使用pymysql库。下面是具体的实现方法： 增加操作： 使用pymysql库连接到MySQL数据库，并执行插入操作。可以使用占位符的方式来防止SQL注入的问题。具体代码如下所示： ``` import pymysql def get_conn(): conn = pymysql.connect(host='localhost', port=3306, user='root', passwd='root', db='test1') return conn def insert(sql, args): conn = get_conn() cur = conn.cursor() result = cur.execute(sql, args) print(result) conn.commit() cur.close() conn.close() if __name__ == '__main__': sql = 'INSERT INTO test_student_table VALUES(%s, %s, %s);' args = (2, 'wang', 13) insert(sql, args) ``` 删除操作： 同样使用pymysql库连接到MySQL数据库，并执行删除操作。可以使用占位符的方式传递参数，以避免SQL注入的问题。具体代码如下所示： ``` import pymysql def get_conn(): conn = pymysql.connect(host='localhost', port=3306, user='root', passwd='root', db='test1') return conn def delete(sql, args): conn = get_conn() cur = conn.cursor() result = cur.execute(sql, args) print(result) conn.commit() cur.close() conn.close() if __name__ == '__main__': sql = 'DELETE FROM test_student_table WHERE id = %s;' args = (1,) delete(sql, args) ``` 更新操作： 同样使用pymysql库连接到MySQL数据库，并执行更新操作。可以使用占位符的方式传递参数，以避免SQL注入的问题。具体代码如下所示： ``` import pymysql def get_conn(): conn = pymysql.connect(host='localhost', port=3306, user='root', passwd='root', db='test1') return conn def update(sql, args): conn = get_conn() cur = conn.cursor() result = cur.execute(sql, args) print(result) conn.commit() cur.close() conn.close() if __name__ == '__main__': sql = 'UPDATE test_student_table SET NAME=%s WHERE id = %s;' args = ('zhangsan', 1) update(sql, args) ``` 以上是使用Python实现MySQL的增删改操作的方法。通过pymysql库连接到数据库，然后执行相应的SQL语句即可实现对数据库的操作。同时，使用占位符的方式传递参数可以防止SQL注入的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值