当前位置:   article > 正文

bootstrap表格添加按钮、模态框实现_bootstrap 模态框底部加一个按钮

bootstrap 模态框底部加一个按钮

bootstrap表格添加按钮、模态框实现

- 需求:

需要表格后面每一列后面都有“添加”“删除”按钮。如下图


这里写图片描述

- 源码如下

   <script>
   function operateFormatter(value, row, index) {
      return [
      '<button type="button" class="RoleOfdelete btn btn-primary  btn-sm" style="margin-right:15px;">删除</button>',

      '<button type="button" class="RoleOfedit btn btn-primary  btn-sm" style="margin-right:15px;">修改</button>'
      ].join('');
      }
   </script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
    window.operateEvents = {
            'click .RoleOfdelete': function (e, value, row, index) {
                alert(row.dno);            
         },
            'click .RoleOfedit': function (e, value, row, index) {
                $("#editModal").modal('show');

            }
    };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
 columns: [{ //编辑datagrid的列
                title : '序号',
                field : 'did',
                align : 'center',
                checkbox : true
            }, {
                field : 'dno',
                title : '动态编号',
                width : 80
            }, {
                field : 'userInfo',
                title : '账号',
                width : 80,
                formatter : function(value, row, index) {
                    if (row.userInfo) {
                        return row.userInfo.userName;
                    } else {
                        return value;
                    }
                } 

            },
            {
                field : 'userInfo.name',
                title : '昵称',
                formatter : function(value, row, index) {
                    if (row.userInfo) {
                        return row.userInfo.name;
                    } else {
                        return value;
                    }
                },width : 50
            },
            {
                field : 'date',
                title : '日期',
                width : 80
            }, {
                field : 'title',
                title : '标题',
                width : 100
            }, {
                field : 'text',
                title : '内容',
                width : 100
            }, {
                field : 'images',
                title : '图片',
                width : 100
            }, {
                field : 'viedo',
                title : '视频',
                width : 100
            } , {
                field : 'record',
                title : '语音',
                width : 100
            }, {
                field: 'operate',
                title: '操作',
                align: 'center',
                width : 100,
                events: operateEvents,
                formatter: operateFormatter
                }],
           pagination:true
        });
  • 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

- 解释

在最后一个colums里 ,添加一个event响应事件 event:operateEvents
colums里formatter:operateFormatter 返回两个按钮。
button中 class=”RoleOfdelete“ 在事件里通过 click .RoleOfedit 调用button 类
响应通过funtion()来实现


模态框

- 需求:

  • 点击search搜索,弹出模态框显示搜索条件,实现查询。
  • 如图下图这里写图片描述

- 源码

  <!-- 查询的模态对话框 -->
        <div id="myModal" class="modal fade"  role="dialog"   aria-hidden=true>
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">
                    <i class="icon-pencil"></i>
                    <span id="lblAddTitle" style="font-weight:bold">查询</span>
                </h4>
            </div>
                <div class="modal-body" style="text-align:center;">
                    <form  id ='searchForm' class="bs-example bs-example-form" role = "form">
                            <div class = "input-group" > 
                                <span class="input-group-addon text-center"><i class="icon-th"></i></span>
                                <input type = "text" class=" form-control" name="dno"
                                id="sd.dno" placeholder="动态编号">
                            </div>
                            <div class = "input-group">
                                <span class = "input-group-addon"><i class="icon-th"></i></span>
                                <input type = "text" class = "form-control"  placeholder="账号" name="userName"
                                id="sd.userInfo.userName">
                            </div>

                            <div class = "input-group" >
                                <span class="input-group-addon text-center"><i class="icon-th"></i></span>
                                <input type = "text"  class=" form-control" name="name"
                                id="sd.userInfo.name" placeholder="昵称">
                            </div>
                            <div class = "input-group" >

                                <span class="input-group-addon text-center"><i class="icon-th" ></i></span>
                                <input type = "text"  class=" form-control" name="title"
                                id="sd.title"  placeholder="标题关键字">
                            </div>
                            <div class = "input-group" >
                                <span class="input-group-addon text-center"><i class="icon-th"></i></span>
                                <input type = "text"  class=" form-control"  name="text"id="sd.text"  placeholder="内容关键字" >
                            </div>
                    </form>
                </div>
                <div class="modal-footer bg-info">
                    <input type="hidden" id="ID" name="ID" />
                    <button type="submit" class="btn btn-primary"  onclick =search()>确定</button>
                    <button type="button" class="btn green" data-dismiss="modal">取消</button>
                </div>
            </form>
        </div>
    </div>
</div>
  • 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

    function search()
        {

        var opt = {     
                        url: 'doDynamicsList',
                        silent: true,
                        query:{
                            'sd.dno':searchForm.dno.value,
                            'sd.userInfo.userName':searchForm.userName.value,
                            'sd.userInfo.name':searchForm.name.value,
                            'sd.title':searchForm.title.value,
                            'sd.text':searchForm.text.value
                        }
                    };
        $('#myModal').modal('hide');

        $("#table").bootstrapTable('destroy'); 
        $('#test').bootstrapTable('refresh',opt);  


        }

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

- 解释

搜索按钮响应模态框 :通过data-target=”#模态框的id”

  <button  id = "btnsearch"  type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 

   <span class="glyphicon glyphicon-search"><i class="icon-search"></i></span> Search
  • 1
  • 2
  • 3

获取表单里面的值,放入opt里,加入请求的url。重新发送一次请求给后台
重新表格参数发送是需要先摧毁再添加

function search()
        {

        var opt = {     
                        url: 'doDynamicsList',
                        silent: true,
                        query:{
                            'sd.dno':searchForm.dno.value,
                            'sd.userInfo.userName':searchForm.userName.value,
                            'sd.userInfo.name':searchForm.name.value,
                            'sd.title':searchForm.title.value,
                            'sd.text':searchForm.text.value
                        }
                    };
        $('#myModal').modal('hide');

        $("#table").bootstrapTable('destroy'); 
        $('#test').bootstrapTable('refresh',opt);  


        }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/80945
推荐阅读
相关标签
  

闽ICP备14008679号