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

原创 2017年07月20日 17:35:48
  • 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); }

bootstrap表格添加按钮、模态框实现的更多相关文章

  1. Bootstrap历练实例:模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...

  2. Bootstrap(v3.2.0)模态框(modal)垂直居中

    Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...

  3. 第二百三十三节,Bootstrap表格和按钮

    Bootstrap表格和按钮 学习要点: 1.表格 2.按钮 本节课我们主要学习一下 Bootstrap 表格和按钮功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一.表格 Bootstrap ...

  4. 使用bootstrap的插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  5. BootStrap学习(6)_模态框

    一.模态框 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果只使用该功能,只引入BootSt ...

  6. dojo:为数据表格添加复选框

    一.添加复选框 此时应该选用EnhancedGrid,而不是普通的DataGrid.添加复选框需要设置EnhancedGrid的plugins属性,如下: gridLayout =[{ default ...

  7. bootstrap中的data-toggle模态框相关

    一,点击即打开1,点击按钮 <a href="javascript:void(0)" class="btn btn-primary" data-toggl ...

  8. 关于bootstrap 在MVC里 模态框里加载iframe页面做编辑的时候

    前台代码 <div class="modal fade" id="myModal" tabindex="-1" role=" ...

  9. Bootstrap手动打开隐藏模态框

    开发的时候遇到一个bug,关闭模态框后背景灰色图层依旧还在.原来是用错了隐藏模态框的代码. 正确的调用方式如下: $("#id").modal("show"); ...

随机推荐

  1. scrapy_redis 相关: 查看保存的数据

    0.参考资料 https://redis.io/topics/data-types-intro An introduction to Redis data types and abstractions ...

  2. Base64 加解密

    import java.io.UnsupportedEncodingException; import org.apache.tomcat.util.codec.binary.Base64; /** ...

  3. 利用MySQL游标进行计算排名

    SELECT a.id, a.nick_name, a.member_account, a.integral, () AS tRank #计算行号 FROM tzqc_raw_data AS a, ( ...

  4. 使用Spring ThreadPoolTaskExecutor实现多线程任务

    我们为何使用多线程,之前已经有讲过了,为了更快的处理多个任务,分割任务,或者调用多个毫无关联的第三方服务 其实spring就提供了ThreadPoolTaskExecutor这个类来实现线程池,线程池 ...

  5. 模拟select,隐藏下拉列表的几种实现

    前言 平时开发过程中,出于各种原因模拟原生slect的要求并不算少见. 在实现的过程中,点击其他区域隐藏下拉列表,又是一个必备的功能, 最近在一次开发的过程中引发了点思考,做下总结. 现象 实际中的实 ...

  6. Elasticsearch学习笔记三

    PS:前面两章已经介绍了ES的基础及REST API,本文主要介绍ES常用的插件安装及使用. Elasticsearch-Head Head是一个用于管理Elasticsearch的web前端插件,该 ...

  7. ElasticSearch 6.4.3 启动报错: [Cannot assign requested address: bind]

    今天在本地搭建一个测试用的最新版ElasticSearch6.4.3 的环境时,遇到一个报: [Cannot assign requested address: bind]的错误. 错误日志内容如下: ...

  8. springboot集成springsession利用redis来实现session共享

    转:https://www.cnblogs.com/mengmeng89012/p/5519698.html 这次带来的是spring boot + redis 实现session共享的教程. 在sp ...

  9. 201771010118《面向对象程序设计(java)》第四周学习总结

    1.实验目的与要求 (1) 理解用户自定义类的定义: (2) 掌握对象的声明: (3) 学会使用构造函数初始化对象: (4) 使用类属性与方法的使用掌握使用: (5) 掌握package和import ...

  10. Go数组求和

    package main import "fmt" ]int func main() { a := [],,,,} var b int for index,value := ran ...