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>
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表格添加按钮、模态框实现的更多相关文章
- Bootstrap历练实例:模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...
- Bootstrap(v3.2.0)模态框(modal)垂直居中
Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...
- 第二百三十三节,Bootstrap表格和按钮
Bootstrap表格和按钮 学习要点: 1.表格 2.按钮 本节课我们主要学习一下 Bootstrap 表格和按钮功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一.表格 Bootstrap ...
- 使用bootstrap的插件实现模态框效果
在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...
- BootStrap学习(6)_模态框
一.模态框 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果只使用该功能,只引入BootSt ...
- dojo:为数据表格添加复选框
一.添加复选框 此时应该选用EnhancedGrid,而不是普通的DataGrid.添加复选框需要设置EnhancedGrid的plugins属性,如下: gridLayout =[{ default ...
- bootstrap中的data-toggle模态框相关
一,点击即打开1,点击按钮 <a href="javascript:void(0)" class="btn btn-primary" data-toggl ...
- 关于bootstrap 在MVC里 模态框里加载iframe页面做编辑的时候
前台代码 <div class="modal fade" id="myModal" tabindex="-1" role=" ...
- Bootstrap手动打开隐藏模态框
开发的时候遇到一个bug,关闭模态框后背景灰色图层依旧还在.原来是用错了隐藏模态框的代码. 正确的调用方式如下: $("#id").modal("show"); ...
随机推荐
- scrapy_redis 相关: 查看保存的数据
0.参考资料 https://redis.io/topics/data-types-intro An introduction to Redis data types and abstractions ...
- Base64 加解密
import java.io.UnsupportedEncodingException; import org.apache.tomcat.util.codec.binary.Base64; /** ...
- 利用MySQL游标进行计算排名
SELECT a.id, a.nick_name, a.member_account, a.integral, () AS tRank #计算行号 FROM tzqc_raw_data AS a, ( ...
- 使用Spring ThreadPoolTaskExecutor实现多线程任务
我们为何使用多线程,之前已经有讲过了,为了更快的处理多个任务,分割任务,或者调用多个毫无关联的第三方服务 其实spring就提供了ThreadPoolTaskExecutor这个类来实现线程池,线程池 ...
- 模拟select,隐藏下拉列表的几种实现
前言 平时开发过程中,出于各种原因模拟原生slect的要求并不算少见. 在实现的过程中,点击其他区域隐藏下拉列表,又是一个必备的功能, 最近在一次开发的过程中引发了点思考,做下总结. 现象 实际中的实 ...
- Elasticsearch学习笔记三
PS:前面两章已经介绍了ES的基础及REST API,本文主要介绍ES常用的插件安装及使用. Elasticsearch-Head Head是一个用于管理Elasticsearch的web前端插件,该 ...
- ElasticSearch 6.4.3 启动报错: [Cannot assign requested address: bind]
今天在本地搭建一个测试用的最新版ElasticSearch6.4.3 的环境时,遇到一个报: [Cannot assign requested address: bind]的错误. 错误日志内容如下: ...
- springboot集成springsession利用redis来实现session共享
转:https://www.cnblogs.com/mengmeng89012/p/5519698.html 这次带来的是spring boot + redis 实现session共享的教程. 在sp ...
- 201771010118《面向对象程序设计(java)》第四周学习总结
1.实验目的与要求 (1) 理解用户自定义类的定义: (2) 掌握对象的声明: (3) 学会使用构造函数初始化对象: (4) 使用类属性与方法的使用掌握使用: (5) 掌握package和import ...
- Go数组求和
package main import "fmt" ]int func main() { a := [],,,,} var b int for index,value := ran ...