BoostrapTable-本地模式（一次性加在所有数据）
直接上代码
数据：
[
{
"id": "1001",
"name": "yyq",
"isAdmin": 0
}, {
"id": "1002",
"name": "yyq",
"isAdmin": 1
}, {
"id": "1003",
"name": "yyq",
"isAdmin": 0
}, {
"id": "1004",
"name": "yyq",
"isAdmin": 1
}, {
"id": "1005",
"name": "yyq",
"isAdmin": 0
}, {
"id": "1006",
"name": "yyq",
"isAdmin": 1
}, {
"id": "1007",
"name": "yyq",
"isAdmin": 0
}, {
"id": "1008",
"name": "yyq",
"isAdmin": 1
}, {
"id": "1009",
"name": "yyq",
"isAdmin": 0
}, {
"id": "10010",
"name": "yyq",
"isAdmin": 1
}, {
"id": "10011",
"name": "yyq",
"isAdmin": 0
}, {
"id": "10012",
"name": "yyq",
"isAdmin": 1
}, {
"id": "10013",
"name": "yyq",
"isAdmin": 1
}, {
"id": "10014",
"name": "yyq",
"isAdmin": 0
}, {
"id": "10015",
"name": "yyq",
"isAdmin": 1
}, {
"id": "10016",
"name": "yyq",
"isAdmin":0
}, {
"id": "10017",
"name": "yyq",
"isAdmin": 1
}, {
"id": "10018",
"name": "yyq",
"isAdmin": 0
}, {
"id": "10019",
"name": "yyq",
"isAdmin":0
}, {
"id": "10020",
"name": "yyq",
"isAdmin": 1
}
]
页面：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta charset="utf-8">
<title>BootStrap Table使用</title>
<!-- 引入bootstrap样式 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入bootstrap-table样式 -->
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"> <!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!-- bootstrap-table.min.js -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- 引入中文语言包 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div class="container"> <!--工具栏-->
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div> <!--表格-->
<table id="table"></table> <!--新增-->
<div class="modal fade" data-keyboard="false" id="addTeacherModel" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
</button>
<h4 class="modal-title" >
添加教师
</h4>
</div>
<div class="modal-body">
<form id="addTeacherForm" action="#" class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">ID</label>
<div class="col-sm-10">
<input name="id" type="text" class="form-control" placeholder="请输入ID">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input name="name" type="text" class="form-control" placeholder="请输入姓名">
</div>
</div>
<div class="form-group text-center" style="color: red">
*密码与ID一致
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input name="isAdmin" type="checkbox" value="1">设为管理员
</label>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
取消
</button>
<button id="addTeacher" type="button" class="btn btn-primary">
保存
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal --> <!--修改-->
<div class="modal fade" data-keyboard="false" id="updateTeacherModel" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
</button>
<h4 class="modal-title">
修改教师信息
</h4>
</div>
<div class="modal-body">
<form id="updateTeacherForm" action="#" class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">ID</label>
<div class="col-sm-10">
<input name="id" type="text" class="form-control" placeholder="请输入ID">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input name="name" type="text" class="form-control" placeholder="请输入姓名">
</div>
</div>
<div class="form-group text-center" style="color: red">
<label class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input name="passwd" type="text" class="form-control" placeholder="请输入要重置的密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input name="isAdmin" type="checkbox" value="1">设为管理员
</label>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
取消
</button>
<button id="updateTeacher" type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div> <script type="text/javascript" > $(function () { //1.初始化Table
$('#table').bootstrapTable({
url: 'data.json', //请求后台的URL（*）
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
/*queryParams: function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset, //页码
departmentname: $("#txt_search_departmentname").val(),
statu: $("#txt_search_statu").val()
};
return temp;
},*/ //传递参数（*）
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
//height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "id", //每一行的唯一标识，一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [{
checkbox: true
}, {
field: 'id',
title: '教师ID',
sortable:true
}, {
field: 'name',
title: '教师姓名',
sortable:true
}, {
field: 'isAdmin',
title: '是否是管理员',
sortable:true,
formatter: isAdminFormatter
} ]
}); //2.初始化事件
function isAdminFormatter(value, row, index) {
return value == "1"? "是": "否";
} function getSelectRows() {
return $("#table").bootstrapTable('getSelections');
} function removeRows(ids) {
$("#table").bootstrapTable('remove', {field:'id', values:ids});
} function addRow(data) {
$("#table").bootstrapTable('prepend', data);
} //获取索引号，坑爹的设计，修改行数据必须要index而不是uniqueId，大坑特坑
function getSelectIndex() {
return $("#table tbody tr[data-uniqueid='" + getSelectRows()[0].id + "']").attr("data-index");
} function updateRow(data) {
$("#table").bootstrapTable('updateRow', data);
} $("#btn_delete").click(function () {
//本地表格删除
var ids = new Array();
var selects = getSelectRows();
// selects.forEach(function (item, index, arr) {
// ids.push(item.id);
// })
$.each(selects, function(index, item) {
ids.push(item.id);
})
removeRows(ids); // 请求服务器删除数据
// var url = "${pageContext.request.contextPath}/admin/teacher/remove/" + ids;
// $.get(url, function(data) {
// if (data.status == 200) {
// //删除本地表格对应的行
// }
// })
}) //新增教师
$("#btn_add").click(function () {
//开启模态框
$('#addTeacherModel').modal('toggle'); })
//新增教师提交表单
$("#addTeacher").click(function() {
//获取数据
var params = $("#addTeacherForm").serialize();
var t = $("#addTeacherForm").serializeArray();
//post请求添加数据
// var url = "${pageContext.request.contextPath}/admin/teacher/add";
// $.post(url, function (data) {
// if (data.status == 200) {
// //添加一行数据到行首，，模态框消失
// } else {
//alert重新输入
// }
// })
//提交成功，列表项添加该数据
// addRow({id:"1", name:"test", isAdmin:"1"});
addRow({ id: t[0].value, name:t[1].value, isAdmin:t.length ==2 ? 0:1});
$('#addTeacherModel').modal('toggle');
//数据清空
clearForm()
}) //清空表单
function clearForm() {
$("form input[name!='isAdmin']").val("");
$("form input[name='isAdmin']").removeAttr("checked");
} //修改教师
$("#btn_edit").click(function () {
//获取行信息
var selects = getSelectRows(); if (selects.length > 0) {
//数据填充到模态框
var row = selects[0];
$("#updateTeacherForm :input[name='id']").val(row.id);
$("#updateTeacherForm :input[name='name']").val(row.name);
if (row.isAdmin == 1)
$("#updateTeacherForm :input[name='isAdmin']").attr("checked", "checked")
//开启模态框
$('#updateTeacherModel').modal('toggle');
} })
//修改教师提交表单
$("#updateTeacher").click(function() {
//获取数据
var params = $("#updateTeacherForm").serialize();
var t = $("#updateTeacherForm").serializeArray();
//post请求添加数据
// var url = "${pageContext.request.contextPath}/admin/teacher/add";
// $.post(url, function (data) {
// if (data.status == 200) {
// //修改数据
// } else {
//alert重新输入
// }
// })
//提交成功，修改该数据
updateRow({index:getSelectIndex(), row:{ id: t[0].value, name:t[1].value, isAdmin:t.length ==2 ? 0:1}});
$('#updateTeacherModel').modal('toggle');
//数据清空
clearForm();
}) }); </script> </body>
</html>
效果展示：
BoostrapTable-本地模式（一次性加在所有数据）的更多相关文章
- 参考 ZTree 加载大数据量。加载慢问题解析
参考 ZTree 加载大数据量. 1.一次性加载大数据量加载说明 1).zTree v3.x 针对大数据量一次性加载进行了更深入的优化,实现了延迟加载功能,即不展开的节点不创建子节点的 DOM. 2) ...
- 大数据入门第八天——MapReduce详解（四）本地模式运行与join实例
一.本地模式调试MR程序 1.准备 参考之前随笔的windows开发说明处:http://www.cnblogs.com/jiangbei/p/8366238.html 2.流程 最重要的是设置Loc ...
- 【Hibernate 懒加载】debug模式懒加载获取空数据
<many-to-one name="department" class="k.domain.Department" column="depar ...
- Scala进阶之路-Spark本地模式搭建
Scala进阶之路-Spark本地模式搭建 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Spark简介 1>.Spark的产生背景 传统式的Hadoop缺点主要有以下两 ...
- hive安装教程本地模式
1.安装模式介绍: Hive官网上介绍了Hive的3种安装方式,分别对应不同的应用场景. a.内嵌模式(元数据保村在内嵌的derby种,允许一个会话链接,尝试多个会话链接时会报错) b.本地模式(本地 ...
- WinForm ListView不分页加载大量数据
WinForm的ListView在加载大量数据时会出现闪烁的问题,同时数据加载很慢.如果你的列表中有超过千条的数据且不做特殊处理还是用普通的ListView.Items.Add(),估计你的用户得抱怨 ...
- dhtmlxtree动态加载节点数据的小随笔
最近做了一个这个东西,颇有些感触,随笔记录一下自己的过程. 首先特别感谢:https://blog.csdn.net/cfl20121314/article/details/46852591,对我的帮 ...
- apache ignite系列（三）：数据处理(数据加载，数据并置，数据查询)
使用ignite的一个常见思路就是将现有的关系型数据库中的数据导入到ignite中,然后直接使用ignite中的数据,相当于将ignite作为一个缓存服务,当然ignite的功能远不止于此,下面以 ...
- 阿里云ECS服务器部署HADOOP集群（四）：Hive本地模式的安装
本篇将在阿里云ECS服务器部署HADOOP集群(一):Hadoop完全分布式集群环境搭建的基础上搭建. 本地模式需要采用MySQL数据库存储数据. 1 环境介绍 一台阿里云ECS服务器:master ...
随机推荐
- Educational Codeforces Round 61 (Rated for Div. 2)F（区间DP，思维，枚举）
#include<bits/stdc++.h>typedef long long ll;const int inf=0x3f3f3f3f;using namespace std;char ...
- [poj 1185] 炮兵阵地 状压dp 位运算
Description 司令部的将军们打算在N*M的网格地图上部署他们的炮兵部队.一个N*M的地图由N行M列组成,地图的每一格可能是山地(用"H" 表示),也可能是平原(用&quo ...
- atcoder/CODE FESTIVAL 2017 qual B/B(dfs染色判断是否为二分图)
题目链接:http://code-festival-2017-qualb.contest.atcoder.jp/tasks/code_festival_2017_qualb_c 题意:给出一个含 n ...
- zancun
#include<iostream> #include<cstdio> using namespace std; ; int n; int avai[maxn], need[m ...
- sql遍历查询结果sql循环查询结果集sql循环查询
--查询表B,把查询到的数据插入临时表#A中,根据表B 的ID 进行排序:表#A中 的 i 字段 由1开始增加排序: SELECT ROW_NUMBER() OVER ( ORDER ...
- P1742 最小圆覆盖
\(\color{#0066ff}{题目描述}\) 给出N个点,让你画一个最小的包含所有点的圆. \(\color{#0066ff}{输入格式}\) 先给出点的个数N,2<=N<=1000 ...
- City Game UVALive - 3029（悬线法求最大子矩阵）
题意:多组数据(国外题好像都这样),每次n*m矩形,F表示空地,R表示障碍 求最大子矩阵(悬线法模板) 把每个格子向上延伸的空格看做一条悬线 以le[i][j],re[i][j],up[i][j]分别 ...
- 洛谷P1894 [USACO4.2]完美的牛栏The Perfect Stall
题目描述 农夫约翰上个星期刚刚建好了他的新牛棚,他使用了最新的挤奶技术.不幸的是,由于工程问题,每个牛栏都不一样.第一个星期,农夫约翰随便地让奶牛们进入牛栏,但是问题很快地显露出来:每头奶牛都只愿意在 ...
- svn显示提交人以及时间
eclipse使用svn显示提交人以及提交时间,方便查看自己修改过的代码,过程如下: Window-->Preferences-->Team-->SVN-->Lable dec ...
- flex item的width VS flex-basis
flexbox的子元素flex item的宽度,按照以下规则计算: content>width>flex-basis(limited by max/min-width) flex-basi ...