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