bootstrap表格添加按钮、模态框实现
2017-11-07 16:38 vodka蓝颜 阅读(2249) 评论(0) 编辑 收藏 举报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);
}
