使用ajax修改数据

发表于 | 分类于

界面

首先我们需要点击修改按钮返回一个当前列的id，通过id使用selectby(Integer id）的方法返回一个id对应的Mes封装类(包含name，address，level等属性)，然后将返回的数据回显在弹窗中，然后修改数据点击update按键，将修改后的数据传给update()方法，成功后刷新页面

修改框

bootstrap table中添加一个操作

1
2
3
4
5
6
7
{ 
	<!--value代表当前单元格中的值，row代表当前行，inedx代表当前行的下标-->
title: '操作', field: "do_business", width: 100, formatter: function (value, row, index) {
		<!--返回当前列的id-->
    return "<a href='javascript:void(0)' onclick='selectby(\""+row.id+"\")'>修改<a>"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
function selectby(id) {
		<!--跳出弹窗-->
        $("#new").modal("show");
        $.ajax({
            type: "post",
            async: false,
            url: "/selectby",
            contentType: "application/json;charset=utf-8",
            <!--当dataType: 'json'时，success方法进入不了，不懂-->
            dataType: 'text',
            data: JSON.stringify({"name": "ymt", "age": 20}),
            success:
                function (result) {
                <!--将后台返回的数据回显出来-->
                    $("#name").val(result.rows.name);
                    $("#address").val(result.rows.address);
                    $("#business").val(result.rows.business);
                    $("#level").val(result.rows.level);
                    $("#total").val(result.rows.total);
                    $("#do_business").val(result.rows.do_business);
                    $("#update").click(function() {
                        var data = {
                                    "id": id,
                                    "name": $("#name").val(),
                                    "address": $("#address").val(),
                                    "business": $("#business").val(),
                                    "level": $("#level").val(),
                                    "total": $("#total").val(),
                                    "do_business": $("#do_business").val()
                                };
                        $.ajax({
                            type: "post",
                            url: "/update",
                            contentType: "application/json;charset=utf-8",
                            dataType: 'json',
                            timeout: 1000,
                            data: JSON.stringify(data),

                            success:
                                function (result) {                              
                                     window.location.reload();
                                }
                        });
                    })
                }
        });
    }

2020年10月30更新

  • select下拉框动态增加option选项
1
2
3
4
5
6
7
8
9
10
success: function(json){
	// 清空所有下拉选项
	$("").get(0).length=0;
	// 使用for循环将值动态添加至option
	for(var i = 0; i < json.lengtn; i++){
		var d = json[i];
		// 获取到原生的DOM对象，只有原生对象才有options属性
		$("").get(0).options.add(new Option(d.name));
	}
}
  • 二级联动，根据上一个下拉选择，动态的添加当前下拉框的选项
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$("").change(function(){
	var dept = $(this).val();
	$.ajax({
		url:
		dataType:
		data:
		success: function(json){
			// 清空所有下拉选项
			$("").get(0).length=0;
			// 使用for循环将值动态添加至option
			for(var i = 0; i < json.lengtn; i++){
				var d = json[i];
				// 获取到原生的DOM对象，只有原生对象才有options属性
				$("").get(0).options.add(new Option(d.name));
			}
		}
	})
})
赏个🍗吧
0%