Bootstrap Table 加入弹出框

java-web

所需的js与css文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
bootstrap.min.css
datepicker3.css
bootstrap-editable.css
bootstrap-table.min.css
bootstrap-dialog.css

jquery-1.11.1.min.js
bootstrap.min.js
bootstrap-editable.js
bootstrap-table.js
bootstrap-table-editable.js
bootstrap-dialog.js
jquery-form.js

弹出窗口的html代码：

DeepinScreenshot_select-area_20171006214706.png

bootstrtap table的js初始化代码：

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
60
61
62
63
64
65
66
67
68
69
70
71
72
function feedbackforusr() {
    $('#feed-usr-table').bootstrapTable({
        classes: 'table table-hover',
        height: undefined,
        undefinedText: '-',
        sortName: undefined,
        sortOrder: 'asc',
        striped: false,
        columns: [{
            checkbox: true
        },{
            field: 'no',
            title: '编号',
        },{
            field: 'issuetype',
            title: '分类'
        },{
            field: 'usrname',
            title: '用户名称',
        },{
            field: 'usraccount',
            title: '用户账户',
        },{
            field: 'quesname',
            title: '问题名称',
        },{
            field: 'questime',
            title: '反馈时间',
        },{
            field: 'solve',
            title: '解决疑问',
            formatter:function (value, row, index) {
                document.getElementById("mctemail").value = row['useraccount'];
                document.getElementById("account").value = row['username'];
                document.getElementById("quesname").value = row['quesname'];
                $("#form_data").attr('action', "/admin/feed/solve/user?ID=" + row['no']);
                return '<button class="btn btn-default issue" data-toggle="modal" data-target="#issueModal">反馈</button> ';
                //return返回一个按钮，这个按钮就是触发弹出窗口的触发器
            }
        }],
        data: [],
        method: 'post',
        url: '/feed/user',
        cache: false,
        contentType: 'application/json',
        queryParams: function (params) {return params;},
        queryParamsType: 'limit', // undefined
        responseHandler: function (res) {return res;},
        pagination: true,
        sidePagination: 'client', // client or server
        totalRows: 0, // server side need to set
        pageNumber: 1,
        pageSize: 10,
        pageList: [10, 25, 50, 100],
        search: true,
        selectItemName: 'btSelectItem',
        showHeader: true,
        showColumns: true,
        showRefresh: true,
        showToggle: true,
        smartDisplay: false,
        minimumCountColumns: 1,
        idField: 'no',
        cardView: false,
        clickToSelect: false,
        singleSelect: false,
        toolbar: '#feed-usr',
        checkboxHeader: true,
        sortable: true,
        maintainSelected: false,
    })
}

呈现bootstrtap table内容的html代码：

DeepinScreenshot_select-area_20171006214824

附有图片里面的源代码（下载后将后缀改为.txt！！！）

新建文本