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

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

原创 2017年07月20日 17:35:48

• 标签：
• bootstrap

• 1723

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>

    window.operateEvents = {
            'click .RoleOfdelete': function (e, value, row, index) {
                alert(row.dno);
         },
            'click .RoleOfedit': function (e, value, row, index) {
                $("#editModal").modal('show');

            }
    };

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
        });

- 解释

在最后一个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>

---

    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);  

        }

- 解释

搜索按钮响应模态框 ：通过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

---

获取表单里面的值，放入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);  

        }