bootstrap表格添加按钮、模态框实现
2024-08-28 23:17:22
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);
}
最新文章
- SFC的OAM管理框架
- bzoj 3530: [Sdoi2014]数数
- SVN+Jenkins或CCNET环境部署图
- C++内存分析
- 使用powerdesigner 画图的详细说明
- CSS-div漂浮
- HDOJ 1013题Digital Roots 大数,9余数定理
- 在UC浏览器上很炫的一个效果
- linux_操作基本语句
- Java限流策略
- Oracle数据库应用
- 记一次Java动态代理实践【首发自高可用架构公众号】
- juqery 点击张三触发李四的方法 trigger(); 和 被选元素前插入指定的内容的方法 brfore();
- Codeforces Round #437 E. Buy Low Sell High
- 关于Java Web应用中的配置部署描述符web.xml
- 仿照admin实现一个自定义的增删改查的组件
- 转:C++ 类的静态成员详细讲解
- 【CF1132F】Clear the String (DP)
- 二、git版本回退
- where常用运算符
热门文章
- day15.Python内置函数
- 查看CentOS版本信息
- Aspnet Mvc 前后端分离项目手记(三)关于restful 风格Url设计
- 阿里云服务器端配置TensorFlow &; jupyter
- eclipse 中 导入git项目无法导入的问题
- 项目部署到tomcat
- [EOJ Monthly 2018.10][C. 痛苦的 01 矩阵]
- SSM的 日常错误 之 mybatis
- 如何彻底卸载Jenkins
- 火狐浏览器安装firebug和firepath插件方法(离线)