bootstraptable教程+x-editable
Bootstrap-table
快速⼊门---- bootstrap-table是⼀个基于Bootstrap的jQuery插件
可以实现从数据库中提取数据到前端进⾏相应操作的功能
更加优秀的页⾯展现请到
Table of contents
quick-start
对本⽂有什么疑问或者建议，可以在下⽅的评论区说明，笔者会尽能⼒给出解答，另外已经完成了bootstrap-table的增删改查操作，以及增加操作的的模态框(bootstrap modal)，以及表单校检(bootstrap-validate)，最近有点忙，过⼀段时间更新，还有侧边栏的动态⽣成(bootstrap-treeview)也是在学习当中
快速使⽤:
Clone the repo: git clone github/seltonGitHub/helloBootTable.git
没有配置java环境，移步;
没有配置tomcat环境，移步;
没有下载配置idea环境，移步;
why-use
学习成本低，配置简单,⽂档齐全
与Bootstrap⽆缝衔接，整体风格⼀致，也便于⼆次开发
开发者活跃,Github定期维护
whats-included
file list:
bootstrapDemo/
├── web/
│├── js
│├── WEB-INF
│└── bootindex.html
└── src/
│└── DataSendServlet.java
表单展⽰页⾯ (bootindex.html)
javascript⽂件 (showOrder.js)从服务器取得数据，然后渲染表格
details
$("#table").bootstrapTable({
method: "post",
url: "获取后台数据的url",
.
.. ...
});
这⾥的js语句的所有渲染操作是针对html页⾯中的id为table的⼀个table，所以不要忘了在导⼊了该js的html中构建出id为table的table
bootstrap-table中的重要键值的简单解释:
showorder.js会向服务器发起ajax访问
bootstrapTable构建元素解析:
url
$("#table").bootstrapTable({
method: "post",
url: "获取后台数据的url",
... ...
});
ajax访问到的后台路径(必须)，该后台需要按照指定的格式返回数据
method
get发送的数据在请求报⽂的请求⾏，也就是url部分,⽽且参数如果有中⽂会出现乱码问题,⽽post发送的数据在报⽂实体，都应该是post，表单的提交也⼀般都是post
queryParams
不需要任何修改，相当于ajax中的data键，上⾯的method决定这些参数传递给后台的的传递⽅式.发送给后台的数据，给出实现表单分页的两个参数，和，在oTableInit.queryParams中给出，后台⽤Parameter()的⽅式拿到queryParams中传递过来的值，然后制定dao
pageSize
当前table⼀次最多显⽰多少⾏，也就是你的table的⼀页应该展现多少⾏，必须
pageNumber
起始页,⼀般是1不⽤改，这个和pageSize决定了queryParams中的offset的值,offset=(pageNow - 1) * pageSize,limit=pageSize
contentType
contentType: "application/x-www-form-urlencoded"
columns
$("#table").bootstrapTable({
method: "post",
url: "获取后台数据的url",
data: [
{field: 'testId', title: 'ID'},
{field: 'testName', title: '姓名'},
{field: 'testPassword', title: '密码'}
]
... ...
]
});
你的table的表结构，以上例⼦表⽰表有三列，列的实际显⽰名字分别是ID，姓名，密码，但是field代表实际数据的名字，表中的数据是由于ajax向服务器发起访问，服务器返回给的数据中的rows的每⼀个json对象的键都会对应到field的列中-----
jsonstyle
{
"total":25,
"rows":[
{
"testID":1,
"testName":"xiaoming1",
"testPassword":"xiaomingpwd1"
},
{
"testID":2,
"testName":"xiaoming2",
"testPassword":"xiaomingpwd2"
}
]
}
数据库返还给发起访问的ajax的数据，必须满⾜，包含两个json形式的键值对,
⼀个是total键，值为表单拥有者在数据库中的全部数据的数量(⾏数)，这个数据和pageSize决定table展⽰的页⾯有多少页，另⼀个是rows键，值为多个json对象,rows的每⼀个json对象就是当前table页的⼀⾏实体展⽰，这⾥的rows相当于会给前端table两⾏数
据,testID,testName,testPassword分别会被填⼊到table中的field对应的列中-----
offset
oTableInit.queryParams = function (params) {
var temp = {  //这⾥的键的名字和控制器的变量名必须⼀直，这边改动，控制器也需要改成⼀样的
limit: params.limit,    //params.limit,  页⾯⼤⼩
offset: params.offset,
testNum: 445,
testNum1: 343
};
offset=( - 1) * ，是会被发送到后台使⽤的数据,
limit
oTableInit.queryParams = function (params) {
var temp = {  //这⾥的键的名字和控制器的变量名必须⼀直，这边改动，控制器也需要改成⼀样的
limit: params.limit,    //params.limit,  页⾯⼤⼩
offset: params.offset,
testNum: 445,
testNum1: 343
};
limit=，是会被发送到后台使⽤的数据,
sql⽰例
SELECT * FROM test WHERE id = ? LIMIT offset,limit
表格绑定事件
⽤于测试ajax返回的数据是最好的
$("#table").bootstrapTable({
method: "post",
url: "获取后台数据的url",
onLoadSuccess: function(){  //加载成功时执⾏
console.info("加载成功");
},
onLoadError: function(){  //加载失败时执⾏
console.info("加载数据失败");
}
});
关于事件，更为详细的介绍请访问
editable
这是在操作table吗，感觉就像是数据库展现在了页⾯上
如果你已经阅读完或者已经在⾃⼰代码中实现了上述功能，但是table存在的⽬的本来就不应该只是展现，应该还有寻常的CRUD，精⼒有限，只是实践了update，笔者使⽤的是⾏内编辑的⽅式实现的update，需要⽤到另⼀个⼯具X-editable，不过还好boottable有这样的插件，将x-editable封装整合到了当中，只需要引⼊cdn.bootcss/bootstrap-table/1.12.1/extensions/editable/bootstrap-table-editable.min.js
start editable
$("#table").bootstrapTable({
method: "post",
url: "获取后台数据的url",
[
{field: 'testId',
title: 'ID',
editable: {mode: 'popup'}
},
{field: 'testName',
title: '姓名'},
{field: 'testPassword',
title: '密码'}
]
... ...
]
});
onEditableSave: function (field, row, oldValue, $el) {
$.ajax({
type: "post",
url: "/ordercenter/updateOrder.json",
data: {
orderid: derid,
updateCol: field,
updateVal: eval('row.'+field)
},
dataType: 'JSON',
success: function (data, status) {
console.log(data);
if (status == "success") {
alert('旧数据: 订单号: ' + derid + ' ' + field + ': ' + oldValue + '\r\n'
+ '更新后的数据: 订单号: ' + data.updateId + ' ' + data.updateCol + ': ' + data.updateVal)
}
bootstrap3菜鸟教程},
error: function () {
alert('编辑失败');
},
complete: function () {
}
});
},
details editable
编辑后的提交⽅法统⼀放到onEditableSave事件⾥⾯统⼀处理
例⼦: 页⾯table中的列姓名,field为testName，实际的值为xiaoming1，通过修改将其改为xiaoming2，这时候field为testName,row为⼀个json，键值对分别为该⾏的所有键值组合,oldValue为xiaoming1
更为详细的描述请到
建议读者直接使⽤我的onEditableSave，它向后台发送了三个数据精确完成update,⾏特定标识和列特定标识定位到修改了哪⼀个具体的数据，再给出updateVal指出原本的数据被修改成了updateVal
moreEditable
editable中的mode的值⼀般是popup，翻译是弹出的意思，也可以使⽤inline值，但是点击并且编辑的时候会使表格样式发⽣改变,⽽popup则不会demo
web-xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="/xml/ns/javaee"
xmlns:xsi="/2001/XMLSchema-instance"
xsi:schemaLocation="/xml/ns/javaee /xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<welcome-file-list>
<welcome-file>/bootindex.html</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>DataSendServlet</servlet-name>
<servlet-class>com.selton.DataSendServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>DataSendServlet</servlet-name>
<url-pattern>/DataSendServlet</url-pattern>
</servlet-mapping>
</web-app>
html-demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="cdn.bootcss/bootstrap/3.0.1/css/bootstrap.min.css">
<link href="cdn.bootcss/bootstrap-table/1.12.1/bootstrap-table.min.css" rel="stylesheet">
<script src="apps.bdimg/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="//cdnjs.cloudflare/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>    <script src="//cdnjs.cloudflare/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script language="JavaScript" src="/js/showOrder.js"></script>
<script language="JavaScript">
$(function () {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
});
</script>
</head>
<body>
<div class="container">
<table id="Table"></table>
</div>
<script src="apps.bdimg/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="apps.bdimg/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="cdn.bootcss/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
</body>
</html>
js-demo
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#Table').bootstrapTable({
url: '/DataSendServlet',        //请求后台的URL（*）
method: 'get',                      //请求⽅式（*）
async:  true,                        //true表⽰执⾏到这,ajax向后台发起访问，在等待响应的这段时间⾥，继续执⾏下⾯的代码
//设置为true，基本都是后⾯的代码(除⾮还有ajax)先执⾏
// toolbar: '#toolbar',                //⼯具按钮⽤哪个容器
striped: true,                      //是否显⽰⾏间隔⾊
cache: false,                      //是否使⽤缓存，默认为true，所以⼀般情况下需要设置⼀下这个属性（*）
pagination: true,                  //是否显⽰分页（*）
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server",          //分页⽅式：client客户端分页，server服务端分页（*）
paginationPreText:'<',              //上⼀页按钮样式
paginationNextText:'>',            //下⼀页按钮样式
pageNumber: 1,                      //初始化加载第⼀页，默认第⼀页
pageSize: 10,                      //每页的记录⾏数（*）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。