bootstrap-table 分页增删改查之一(增加 删除)
先上效果图
- 引入js文件
<!--js jquery -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.9.0.min.js"></script>
<!--js bootstrap -->
<script src="${pageContext.request.contextPath}/bootstrapJs/bootstrap.min.js"></script>
<!-- js bootstrap-table 分页插件 -->
<script type="text/javascript"src="${pageContext.request.contextPath}/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/bootstrapJs/table/bootstrap-table-zh-CN.js"></script>
<!-- js bootstrap-datetimepicker 时间插件 -->
<script src="${pageContext.request.contextPath}/bootstrapJs/datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrapJs/datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
<!-- js knockout 增删改查 插件 -->
<script src="https://cdn.bootcss.com/knockout/3.4.0/knockout-min.js"></script> //必须
<script src="${pageContext.request.contextPath}/bootstrapJs/knockout/knockout.mapping-latest.js"></script>//必须
<!-- css -->
<link href="${pageContext.request.contextPath}/css/bootstrap-table.css"rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/bootstrapCss/datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet" /> //必须
2: 有的是弹出一个页面 有的是弹出在本页面定义的标签 看你自己了 我使用的是在本页面定义
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">收入类目增加</h4>
</div>
<div class="modal-body"> <div class="form-group">
<label for="txt_departmentname">收入类目名称</label>
<input type="text" name="txt_departmentname" data-bind="value:Name" class="form-control" id="txt_departmentname" placeholder="类目名称">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
<button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
</div>
</div>
</div>
</div>
</div>
3: js文件
$(function() {
//初始化
operate.operateInit();
});
// 操作
var operate = {
// 初始化按钮事件
operateInit : function() {
this.operateAdd();
this.operateUpdate();
this.operateDelete();
this.DepartmentModel = {
id : ko.observable(), //和标签中的data-bind 对应
Name : ko.observable(),
Level : ko.observable(),
Des : ko.observable(),
CreateTime : ko.observable()
};
},
// 新增
operateAdd : function() {
$('#btn_add').on(
"click",
function() {
$("#myModal").modal().on(
"shown.bs.modal",
function() {
var oEmptyModel = {
id : ko.observable(),
Name : ko.observable(),
Level : ko.observable(),
Des : ko.observable(),
CreateTime : ko.observable()
};
ko.utils.extend(operate.DepartmentModel,
oEmptyModel);
ko.applyBindings(operate.DepartmentModel,
document.getElementById("myModal"));
operate.operateSave();
}).on('hidden.bs.modal', function() {
ko.cleanNode(document.getElementById("myModal"));
});
});
},
// 编辑 修改这里我没有做 如果需要的话 把弹出页面中input中的data-bind中value:name 换成value:你后台传来的变量名称
operateUpdate : function() {
$('#btn_edit').on(
"click",
function() {
$("#myModal").modal().on(
"shown.bs.modal",
function() {
var arrselectedData = tableInit.myViewModel
.getSelections();
if (!operate.operateCheck(arrselectedData)) {
return;
}
// 将选中该行数据有数据Model通过Mapping组件转换为viewmodel
ko.utils.extend(operate.DepartmentModel,
ko.mapping.fromJS(arrselectedData[0]));
ko.applyBindings(operate.DepartmentModel,
document.getElementById("myModal"));
operate.operateSave();
}).on('hidden.bs.modal', function() {
// 关闭弹出框的时候清除绑定(这个清空包括清空绑定和清空注册事件)
ko.cleanNode(document.getElementById("myModal"));
});
});
},
// 删除
operateDelete : function() { //当点击删除的时候 会进入这个方法
$('#btn_delete').on(
"click",
function() {
var arrselectedData = $("#tb_departments").bootstrapTable(
'getSelections');
if (arrselectedData.length <= 0) {
alert("请选中一行");
} else {
var b = JSON.stringify(arrselectedData);
$.ajax({
url : "/billMaven/categoryDelect",
type : "post",
data : {
"name" : b //传输到后台的是 json对象 后台接收后需要转换成list 然后循环获取id删除
},
success : function(status) {
alert(status);
$("#tb_departments").bootstrapTable('refresh');
}
});
}
});
},
// 保存数据
operateSave : function() { //当点击保存的时候回跳到这个方法
$('#btn_submit').on("click", function() {
// 取到当前的viewmodel
var oViewModel = operate.DepartmentModel;
// 将Viewmodel转换为数据model
var oDataModel = ko.toJS(oViewModel);
if (oDataModel.Name == undefined || oDataModel.Name.trim() == "") {
alert("类目不能为空");
} else {
var span = $("#span").html();
$.ajax({
url : "/billMaven/categorysave", //url
type : "post",
data : { //参数
"name" : oDataModel.Name,
"state" : span
},
success : function(status) {
alert(status);
$("#tb_departments").bootstrapTable('refresh');
}
});
}
});
},
// 数据校验
operateCheck : function(arr) {
if (arr.length <= 0) {
alert("请至少选择一行数据");
return false;
}
if (arr.length > 1) {
alert("只能编辑一行数据");
return false;
}
return true;
}
}
引用 http://www.cnblogs.com/landeanfen/p/4976838.html 如果需要看理论的话 可以去他的博客看一下
bootstrap-table 分页增删改查之一(增加 删除)的更多相关文章
- MYSQL - database 以及 table 的增删改查
MYSQL - database 以及 table 的增删改查 MySQL的相关概念介绍 MySQL 为关系型数据库(Relational Database Management System), 这 ...
- 【BootStrap】--具有增删改查功能的表格Demo
[BootStrap]--具有增删改查功能的表格Demo 目录(?)[+] 前言 版本一 样式 代码 版本二 样式 代码 版本三 样式 代码 总结 前言 bootstrap的表格样式,有类似EasyU ...
- bootstrap-table 分页增删改查之一(分页)
记录一下 bootstrap-table插件的使用 先看下效果图 首先是导入js <!--js jquery --> <script type="text/javascri ...
- 关于C#三层架构增删改查中的“删除”问题
序: 刚学习C#,经过一段时间学习,现在正在做一个简单的前后台联通的项目(主要是C#三层架构实现增删改查).分享一点儿小经验,也供自己以后可以回头看看自己的码农之路. 内容: 主要分享的是一条删除会用 ...
- C# 顺序表---增删改查--逆至--删除最小值
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 页面中关于bootstrap框架的增删改查使用
bootstrap是一个简单又好用的前端框架 1.bootstrap 初始化 表格显示 2.自带的查询表单(需要配置要查询的条件 对应实体类) 3.工具(增加和查询) 4.查询方法 5.增加方法 ...
- BootStrap table动态增删改表格内数据
1:添加一个[操作]列 { title: "操作", align: 'center', valign: 'middle', width: 160, // 定义列的宽度,单位为像 ...
- java:Oracle(table的增删改查,data的增删改查)
1.oracle命名规范:和Java的命名规范很像 1.严格区分大小写 2.所有的sql语句都要以';'结尾 3.所有的sql 都要使用空格区分:sqlplus空格/空格as空格sysdba回车 4. ...
- Elasticsearch增删改查 之 —— Delete删除
删除文档也算是常用的操作了...如果把Elasticsearch当做一款普通的数据库,那么删除操作自然就很常用了.如果仅仅是全文检索,可能就不会太常用到删除. Delete API 删除API,可以根 ...
随机推荐
- Selenium+Chrome+PhantomJS爬取淘宝美食
搜索关键字 利用selenium驱动浏览器搜索有关键字,得到查询后的商品列表 分析页码并翻页 得到商品码数,模拟翻页,得到后续页面的商品列表 分析提取商品内容 利用PyQuery分析源码,解析得到商品 ...
- HTML 权重标签的使用
<H>标签通常使用<H1><H2><H3>这3个标签是有权重加分的,<H4>用于无用途的文字标记等 非重要相关字. <H1>有别 ...
- linux下的grep命令
grep(global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具,它能使用正 ...
- np.random.random()函数 参数用法以及numpy.random系列函数大全
原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/9751471.html 1.np.random.random()函数参数 np.random.r ...
- Intellij Idea快捷鍵
一.视图查看 Ctrl+F12 查看file,method结构图.类继承机构图 (不知道方法结构,Ctrl+F12一下,方法,参数,返回值,一清二楚的展现出来) Ctrl+shift+Alt+U ...
- Linux笔记-vim 配置
本文是转载的,我用的ubuntu12.04在vim设置方面就是参考了本文,拿来分享给大家! ubuntu10.10中的设置方法: $cd /etc/vim $sudo cp vimrc vimrc.b ...
- i.mx6 Android5.1.1 初始化流程之init进程(未完成)
概述: 接在i.mx6 Android5.1.1 初始化流程之框架之后 参考资料:http://blog.csdn.net/mr_raptor/article/category/799879 相关源码 ...
- DateTime compare
DateTime t1 = new DateTime(100); DateTime t2 = new DateTime(20); if (DateTime.Compare(t1, t2) > 0 ...
- Python——基本的书写规则
1.输入方法input() 等待用户输入数据,并回车后得到数据(name为输入的字符串) name=input('Please input your name:') print('Hi,',name) ...
- jQuery事件篇---基础事件
写在前面: 有一段时间未更新博客了,利用这段时间,重新看了<jQuery基础教程 第四版>和<锋利的jQuery 第二版>,这两本书绝对是jQuery入门非常好的书,值得多读几 ...