记录

bootstrapTable+模态框+显示表格数据的问题

  • 2022-05-02
  • 作者 我爱小小蝶
  • ~10.57K 字
  1. 1. 在线链接：
  2. 2. 对应代码：

在线链接：

1
2
3
4
5
6
7
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.20.0/dist/bootstrap-table.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/bootstrap-table@1.20.0/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.20.0/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<body>

在我们的数据表格里每行对应的编辑按钮，当我们点击后，会弹出对应行的数据，并可以进行修改数据并提交。

测试结果如下：

对应代码：

1
2
3
4
function formaterProcess(value, rows, index) {
      return '<button class="btn  btn-info" onclick="EditViewById('+ index +')">编辑</button>' + ' <button class="btn  btn-danger" onclick="deleteUser('+ rows.id +')">删除</button>';
  }

// getData方法获取全部页面数据后，将data转为json对象，使用index当前行号作为下标获取对应数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function EditViewById(index){
     var data = JSON.stringify($("#exampleTableEvents").bootstrapTable('getData')); //获取全部数据
     var data_json = JSON.parse(data); //data_json和data_json2一样都是json对象
     console.log("data_json:" + data_json);
     //由于data2已经是对象了，alert不能显示对象只能显示为[object Object],需要控制台打印
     //根据index找到对应行数据，填充数据到修改模态框
     $("#username").val(data_json[index].username); // jq的方式给表单元素赋值
     $("#password").val(data_json[index].password);
     $("#address").val(data_json[index].address);
     $("#birth").val(data_json[index].birth);
     $("#email").val(data_json[index].email);
     console.log(1111);
     //弹出修改模态框，非新增模态框
     $('#myModal').modal('show');

 }

data_json的结果类型——每一行数据对应一个object：

data_json : [object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

var data = JSON.stringify($(“#exampleTableEvents”).bootstrapTable(‘getData’)) ：

转化为json格式数据

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
48
49
50
51
52
53
54
55
56
57
[

    {
        "address":"奥特之星M701",
        "birth":"2022-04-26 12:02:22",
        "email":"qqq@360.com",
        "id":1,
        "password":"12345",
        "phone":"111111",
        "username":"root"
    },
    {
        "address":"新世界",
        "birth":"2022-04-24 02:21:00",
        "email":"root@qq.com",
        "id":2,
        "password":"1234",
        "phone":"2222",
        "username":"admin"
    },
    {
        "address":"柳州",
        "birth":"2022-03-24 09:49:53",
        "email":"jack123@163,com",
        "id":3,
        "password":"1111",
        "phone":"123456",
        "username":"qwq"
    },
    {
        "address":"柳州",
        "birth":"2021-11-24 21:50:29",
        "email":"eq2@163.com",
        "id":4,
        "password":"2222",
        "phone":"123121",
        "username":"1211"
    },
    {
        "address":"123123123",
        "birth":"2022-04-29 11:09:44",
        "email":"12312",
        "id":21,
        "password":"123123",
        "phone":"123123",
        "username":"123123"
    },
    {
        "address":"123123",
        "birth":"2022-04-29 11:09:53",
        "email":"12312",
        "id":22,
        "password":"3121",
        "phone":"312",
        "username":"123123"
    }

// 删除用户

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function deleteUser(userID){
    if (confirm("确定要删除【" +　userID + "】的用户吗？")) {
        $.ajax({
            url: 'http://localhost:8081/app/user?action=deleteUser',
            type: 'get',
            data: {userID: userID},
            dataType: 'json',
            success: function (res){
                // console.log(res)
                if(res.code>0) {
                    $('#exampleTableEvents').bootstrapTable('refresh');
                    console.log(res.msg);
                } else{
                    bootbox.alert(res.msg);
                }
            },

        })
    }
    console.log(userID);

}

编辑用户信息 —— 模态框动态显示表格数据:

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
48
49
50
51
52
53
54
55
56
57
58
59

<div class="modal fade" data-backdrop="static"  id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <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">

                    <div class="form-group">
                        <label for="username" class="col-sm-2 control-label">用户名：</label>
                        <div class="col-sm-10">
                            <input type="text" id="username" name="username" class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="password" class="col-sm-2 control-label">密码：</label>
                        <div class="col-sm-10">
                            <input type="text" id="password" name="password" class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="address" class="col-sm-2 control-label">地址：</label>
                        <div class="col-sm-10">
                            <input type="text" id="address" name="address" class="form-control" >
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="birth" class="col-sm-2 control-label">生日：</label>
                        <div class="col-sm-10">
                            <input type="text" id="birth" name="birth" class="form-control" placeholder="格式：2022-04-28">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="email" class="col-sm-2 control-label">邮箱：</label>
                        <div class="col-sm-10">
                            <input type="email" name="email" class="form-control" id="email">
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" id="sumit_btn" class="btn btn-primary">提交</button>
                    </div>
                </form>
            </div>
        </div>


    </div>
</div>

bootstrap-table（html骨架）:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 <table id="exampleTableEvents" data-height="360"  style="height:100px" data-show-refresh="true"   data-mobile-responsive="true" data-page-size="" data-pagination="true"  data-toggle="table">
        <thead>
        <tr>
            <!-- 编号顺序用的 -->
            <th data-field="state" data-checkbox="true"></th>
<!--           <th data-field="id" class="text-center fht-cell1">编号</th>-->
            <th data-field="username" class="text-center fht-cell2"></th>
            <th data-field="password" class="text-center fht-cell3"></th>
            <th data-field="email" class="text-center"></th>
            <th data-field="birth" class="text-center"></th>
            <th data-field="phone" class="text-center"></th>
            <th data-field="address" data-align="center" class="text-center"></th>

        </tr>
        </thead>
    </table>