bootstrap学习(六):跟着宝哥学java：bootstrap实现表格的编辑：学生修改

跟着宝哥学java

于 2023-05-04 17:04:36 发布

阅读量1.5k

点赞数

文章标签： bootstrap java 学习

本文链接：https://blog.csdn.net/mtb278750/article/details/130490827

版权

3.8 修改学生

引入依赖的css和js文件

<!-- 3.1 bootstarp-editable基本使用：1引入bootstrap-editable.css -->
<link type="text/css" rel="stylesheet" href="<c:url value='/bootstrap-3.3.7-dist/css/bootstrap-editable.css'/>" />
<!--3.2 引入jquery.serializejson.min.js-->
<script type="text/javascript" src="<c:url value='/js/jquery.serializejson.min.js'/>"></script>
<!--3.3 bootstarp-editable基本使用：2引入bootstrap-editable.min.js -->
<script type="text/javascript"
        src="<c:url value='/bootstrap-3.3.7-dist/js/bootstrap-editable.min.js'/>"></script>

action

//@RequestMapping(value="/student.action",method = {RequestMethod.PUT})
@PutMapping("/student.action")
//@ResponseBody
public ResponseVO<String> updateOneMethod(@RequestBody Student student){
    System.out.println("student==="+student);
    return new ResponseVO<>(200,null,"修改成功行数："+service.updateOneMethod(student));
}

修改columns

//设置列名和列值：field指定responseVo.data的元素的属性 title指定列名
columns:[
    //添加多选框 用于删除
    {checkbox:true},
    {field:"sid",title:"学号"},
    {field:"sname",title:"名字",editable:
     {
         title:"请输入新的名字：",
         type:"text",
         validate:function(v){
             v=v.trim();
             if(v.length>6){ return "长度不能大于6";}
             if(!v){ return "名字不能为空"; }
         }
     }
    },
    {field:"sex",title:"性别",editable:
     {
         title:"请选择性别：",
         type:"select",
         source:[{value:"男",text:"男"},{value:"女",text:"女"}]
     }
    },
    {field:"score",title:"分数",editable:
     {
         title:"请输入新的分数：",
         type:"text",
         validate:function(v){
             v=v.trim();
             v=parseFloat(v);
             if(v>100||v<0){ return "分数必须在[0,100]内！";}
             if(isNaN(v)){ return "分数格式错误"; }
         }
     }
    },
    {field:"sbirth",title:"生日",formatter:function(value,row,index){
        var myDate=new Date(row.sbirth);
        return myDate.getFullYear()+"年"+(myDate.getMonth()+1)+"月"+myDate.getDate()+"号";
    }
    },
    {field:"sage",title:"年龄",editable:
     {
         title:"请输入新的年龄：",
         type:"text",
         validate:function(v){
             v=v.trim();
             v=parseInt(v);
             if(v>120||v<=0){ return "年龄必须在(0,120]内！";}
             if(isNaN(v)){ return "年龄格式错误"; }
         }
     }
    },
    {field:"sdy",title:"政治面貌",editable:
     {
         title:"请选择政治面貌：",
         type:"select",
         source:[{value:"true",text:"党员"},{value:"false",text:"群众"}]
     }
    },
    {field: "sclass", title: "班级", editable:
     {
         title: "请选择班级：",
         type: "select",
         source: [
             {value: "java第1期", text: "java第1期"},
             {value: "java第2期", text: "java第2期"},
             {value: "java第3期", text: "java第3期"},
             {value: "java第4期", text: "java第4期"},
             {value: "java第5期", text: "java第5期"}
         ]
     }
    }
]

给bootstrapTable方法添加属性onEditableSave 实现编辑保存时执行ajax操作数据库

/*实现表格编辑  数据提交 添加属性：onEditableSave*/
onEditableSave: function(field,row,oldValue){
    alert(field+":"+row+":"+oldValue);//field是字段名：sname row是更改后的行数据
    //把行数据转换为json串
    var  rowJsonStr=JSON.stringify(row);
    //发送ajax请求
    $.ajax({
        type:"PUT",
        data:rowJsonStr,
        cache:false,
        async:false,
        contentType:"application/json;charset=utf-8",/*请求参数是json：必须加请求头contentType 指定请求参数的类型*/
        url:path+"student.action",
        success:function(responseVo){
            if(responseVo.status==200){
                alert(responseVo.data);
                $("#table_student").bootstrapTable("refresh"); //刷新表格
                return;
            }
            alert(responseVo.errorMessage);
        }
    });
}