如何使用BootStrapDialog实现数据的添加与删除？

一、所需引入的js和css

<link rel="stylesheet" type="text/css" href="css/bootstrap-dialog.css" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" rel="external nofollow" > <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap-dialog.js"></script>
//引入的顺序:先css,再js,引入js时，先jquery,再bootstrap-dialog.js

二、示例代码

添加：

  function addData(){BootstrapDialog.show({title: '添加员工',//模态框的headerid:'addStaff',message: function(dialog) {//是模态框的body部分，也就是我们需要弹出的页面,如修改的页面var $message = $('<div></div>');var pageToLoad = dialog.getData('pageToLoad');$message.load(pageToLoad);return $message;},data: {'pageToLoad': "${path}/staff/addView.do",//指定message需要显示的页面访问路径},buttons: [{label: 'ok',action: function(dialog){var document = $(".modal-body");//通过class标签选择器，获得模态框的JQuery对象var icon = $("[name='icon']",document).val();var role = $("[name='role']",document).val();var mode = $("[name='mode']",document).val();var mobile = $("[name='mobile']",document).val();var realName= $("[name='realName']",document).val();var cityCode =$("#city option:selected",document).val();var countyCode=$("#county option:selected",document).val();var provinceCode=$("#province option:selected",document).val();var object={url:"${path}/staff/add.do?cityCode="+cityCode+"&countyCode="+countyCode+"&provinceCode="+provinceCode,type:"post",data:$("form",document).serialize(),//序列化form表单的值success:function(data){if(data==0){BootstrapDialog.alert('<div class="alert alert-danger">数据添加失败</div>');}else{dialog.close();//关闭模态框BootstrapDialog.alert('<div class="alert alert-success">数据添加成功</div>');}}};$.ajax(object);return false;},},{label: 'cancle',action: function(dialog) {dialog.close();}}]});}

删除：

     function deleteData(id){BootstrapDialog.show({type : BootstrapDialog.TYPE_DANGER,message: '你确定要删除吗？',size : BootstrapDialog.SIZE_NORMAL,buttons: [{label: '确定',action: function(dialog) {var object = {url:'${path}/staff/delete.do?id='+id,type:"post",success:function(data){if(data==1){BootstrapDialog.alert('<div class="alert alert-success">删除成功</div>');}else{BootstrapDialog.alert('<div class="alert alert-danger">删除失败</div>');}}};$.ajax(object);dialog.close();}}, {label: '取消',action: function(dialog) {dialog.close();}}]});}

三、设置事件，即可

<button type="button" id="tm" class="btn btn-primary" nuoxin="margin: 100px;" onclick="addData()">添加</button>
<button type="button" id="tm" class="btn btn-primary" nuoxin="margin: 100px;" onclick="addData()">删除</button>

如何使用BootStrapDialog实现数据的添加与删除？相关推荐

UITableView数据的添加、删除、移动
数据的添加.删除4个步骤: 1.现在导航视图上面添加一个按钮,可以是系统自带的编辑按钮editButtonItem 2.实现方法让将要执行删除添加操作的表视图处于编辑状态 3.指定表视图中哪些行可以处 ...
ajax添加和删除数据,ajax 添加更新删除数据库
ajax 添加更新删除数据库内容精选换一换云审计服务(Cloud Trace Service,CTS)记录了数据安全中心相关的操作事件,方便用户日后的查询.审计和回溯,具体请参见云审计服务用 ...
Ajax局部刷新数据：添加、删除
今天用ajax局部刷新的方式,写了个搜索显示出局部数据和点击删除,页面同样局部更新删除数据异步搜索局部添加 1.盒子显示 2.ajax处理 url请求路径,experiment项目名,UserSer ...
Navicat 数据表的数据的添加，删除及使用sql完成数据的添加。
Navicat创建数据库及表的创建,删除和插入._星星以外的博客-CSDN博客数据库主键的作用及添加_星星以外的博客-CSDN博客选中操作的表,右击----打开表(或者直接双击也行) 则出现如下界 ...
26.中继器数据的添加与删除
选择中继器里面的数据集再选择增加行勾上之后选择下方的增加行就可以填入数据了用变量获取用户输入的各项内容但是图片不能用公式操作方法:通过右键单击图片获得图片的地址图片中蓝色的部分就是相对路径 ...
Android学习笔记----SQLiteDatabase 自带添加、删除、更新、查询的操作方法：实现添加,删除,更新,查询,和分页,统计
7.除了前面给大家介绍的execSQL()和rawQuery()方法, SQLiteDatabase还专门提供了对应于添加.删除.更新.查询的操作方法: insert().delete().upda ...
Statement接口实现查询数据、添加数据
本文介绍了Statement接口实现查询数据.添加数据.在JDBC的基本应用中,介绍了使用Statement接口查询和添加数据的步骤.重点在于使用getConnection()方法来连接数据库,创建S ...
R语言ggplot2可视化：ggplot2可视化时间序列数据并在末尾数据点添加数值标签（number label）
R语言ggplot2可视化:ggplot2可视化时间序列数据并在末尾数据点添加数值标签(number label) 目录
Python使用matplotlib可视化发散棒棒糖图、发散棒棒糖图可以同时处理负值和正值、并按照大小排序区分数据、为发散棒棒糖图的特定数据点添加标签、自定义背景填充色、自定义数据点颜色
Python使用matplotlib可视化发散棒棒糖图.发散棒棒糖图可以同时处理负值和正值.并按照大小排序区分数据.为发散棒棒糖图的特定数据点添加标签.自定义背景填充色.自定义数据点颜色(Diverg ...
R语言ggplot2可视化在特定数据点添加竖直的虚线实战：Add a dotted vertical line on certain x-axis values
R语言ggplot2可视化在特定数据点添加竖直的虚线实战:Add a dotted vertical line on certain x-axis values 目录 R语言

如何使用BootStrapDialog实现数据的添加与删除？

如何使用BootStrapDialog实现数据的添加与删除？相关推荐

最新文章

热门文章