热门标签
当前位置: article > 正文
bootstrap表格添加按钮、模态框实现_bootstrap 模态框底部加一个按钮
作者：AllinToyou | 2024-02-14 18:04:25
赞
踩
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
推荐阅读
相关标签
