Bootstrap-table

快速入门----
bootstrap-table是一个基于Bootstrap的jQuery插件
可以实现从数据库中提取数据到前端进行相应操作的功能

更加优秀的页面展现请到bootstrap-table

Table of contents

quick-start

对本文有什么疑问或者建议,可以在下方的评论区说明,笔者会尽能力给出解答,另外已经完成了bootstrap-table的增删改查操作,以及增加操作的的模态框(bootstrap modal),以及表单校检(bootstrap-validate),最近有点忙,过一段时间更新,还有侧边栏的动态生成(bootstrap-treeview)也是在学习当中

快速使用:

没有配置java环境,移步JDK安装与环境变量配置;

没有配置tomcat环境,移步tomcat的下载和安装配置;

没有下载配置idea环境,移步IntelliJ 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访问到的后台路径(必须),该后台需要按照指定的json 格式返回数据

method

get发送的数据在请求报文的请求行,也就是url部分,而且参数如果有中文会出现乱码问题,而post发送的数据在报文实体,都应该是post,表单的提交也一般都是post

queryParams

不需要任何修改,相当于ajax中的data键,上面的method决定这些参数传递给后台的的传递方式.发送给后台的数据,给出实现表单分页的两个参数,offsetlimit,在oTableInit.queryParams中给出,后台用request.getParameter()的方式拿到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=(pageNumber - 1) * pageSize,是会被发送到后台使用的数据,后台数据提取sql语句示例

limit

oTableInit.queryParams = function (params) {

    var temp = {   //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
limit: params.limit, //params.limit, 页面大小
offset: params.offset,
testNum: 445,
testNum1: 343
};

limit=pageSize,是会被发送到后台使用的数据,后台数据提取sql语句示例

sql示例

SELECT * FROM test WHERE id = ? LIMIT offset,limit

表格绑定事件

用于测试ajax返回的数据是最好的

$("#table").bootstrapTable({
method: "post",
url: "获取后台数据的url",
onLoadSuccess: function(){ //加载成功时执行
console.info("加载成功");
},
onLoadError: function(){ //加载失败时执行
console.info("加载数据失败");
}
});

关于事件,更为详细的介绍请访问boottableDoc

editable

这是在操作table吗,感觉就像是数据库展现在了页面上

如果你已经阅读完或者已经在自己代码中实现了上述功能,但是table存在的目的本来就不应该只是展现,应该还有寻常的CRUD,精力有限,只是实践了update,笔者使用的是行内编辑的方式实现的update,需要用到另一个工具X-editable,不过还好boottable有这样的插件,将x-editable封装整合到了当中,只需要引入https://cdn.bootcss.com/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: row.orderid,
updateCol: field,
updateVal: eval('row.'+field)
},
dataType: 'JSON',
success: function (data, status) {
console.log(data);
if (status == "success") {
alert('旧数据: 订单号: ' + row.orderid + ' ' + field + ': ' + oldValue + '\r\n'
+ '更新后的数据: 订单号: ' + data.updateId + ' ' + data.updateCol + ': ' + data.updateVal)
}
},
error: function () {
alert('编辑失败');
},
complete: function () { } });
},

details editable

编辑后的提交方法统一放到onEditableSave事件里面统一处理

例子: 页面table中的列姓名,field为testName,实际的值为xiaoming1,通过修改将其改为xiaoming2,这时候field为testName,row为一个json,键值对分别为该行的所有键值组合,oldValue为xiaoming1

更为详细的描述请到x-editable

建议读者直接使用我的onEditableSave,它向后台发送了三个数据精确完成update,行特定标识和列特定标识定位到修改了哪一个具体的数据,再给出updateVal指出原本的数据被修改成了updateVal

moreEditable

editable中的mode的值一般是popup,翻译是弹出的意思,也可以使用inline值,但是点击并且编辑的时候会使表格样式发生改变,而popup则不会

demo

web-xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/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="https://cdn.bootcss.com/bootstrap/3.0.1/css/bootstrap.min.css">
<link href="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.css" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/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="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/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, //每页的记录行数(*) pageList: [10, 25, 50, 100], //可供选择的每页的行数(*) contentType: "application/x-www-form-urlencoded", //重要选项,必填 showColumns: true, //是否显示所有的列 showRefresh: true, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行 //height: 700, //行高,如果没有设置height属性,表格自动根据记录条数决定表格高度,最好不要设置这个属性 uniqueId: "no", //每一行的唯一标识,一般为主键列 showToggle: true, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 columns: [
{
field: 'testId',
title: 'ID',
editable: {
mode: 'inline'
}
}, { field: 'testName',
title: '用户名'
}, { field: 'testPassword',
title: '密码'
}
],
rowStyle: function (row, index) { var classesArr = ['success', 'info']; var strclass = ""; if (index % 2 === 0) {//偶数行 strclass = classesArr[0]; } else {//奇数行 strclass = classesArr[1]; } return {classes: strclass}; },//隔行变色 }); }; //得到查询的参数 oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
limit: params.limit, //params.limit, 页面大小
offset: params.offset,
testNum: 445,
testNum1: 343
}; return temp;
};
return oTableInit;
};

server-demo

package com.selton;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Enumeration; /**
* @author seltonzyf@gmail.com
* @date 2018/5/10 13:59
*/
@WebServlet(name = "DataSendServlet")
public class DataSendServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //这里输出后台从ajax拿到的数据
Enumeration<String> parameterNames = request.getParameterNames();
while (parameterNames.hasMoreElements()) {
String s = parameterNames.nextElement();
String parameter = request.getParameter(s);
System.out.println("s = " + s);
System.out.println("parameter = " + parameter);
}
response.getWriter().print("{\"total\": 11, \"rows\":[{\"testId\":9, \"testName\":\"selton\", \"testPassword\": 1}]}");
} @Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}

注意

  • bootstrap-table只能被调用一次的问题

在inittable之前

$("#table").bootstrapTable('destroy');

清空之前表内数据

  • 服务器向前端发送的用于构建表单的json,所有的键都会变成小写

bootstrap-table+x-editable入门的更多相关文章

  1. bootstrap table教程--使用入门基本用法

    笔者在查询bootstrap table资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网.但是对于某部分技术人员来说,入门还是不够详 ...

  2. BootStrap Table超好用的表格组件基础入门

    右侧导航条有目录哟,看着更方便 快速入门 表格构建 API简单介绍 主要研究功能介绍 快速入门 最好的资源官方文档 官方文档地址****https://bootstrap-table.com/docs ...

  3. JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  4. 后台系统组件:一丶bootstrap table

    http://www.cnblogs.com/landeanfen/p/4976838.html (bootstrap table) http://www.cnblogs.com/landeanfen ...

  5. [前端插件]Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...

  6. 新的表格展示利器 Bootstrap Table Ⅱ

        上一篇文章介绍了Bootstrap Table的基本知识点和应用,本文针对上一篇文章中未解决的文件导出问题进行分析,同时介绍BootStrap Table的扩展功能,当行表格数据修改. 1.B ...

  7. bootstrap table 和 x-editable 使用方法

    最近需要做一些数据表格,有同事推荐EasyUI,但经过比较还是选择了Bootstrap,一款极为强大的表格组件,基于Bootstrap 的 jQuery .本文还将介绍Bootstrap-editab ...

  8. bootstrap table使用参考

    https://www.cnblogs.com/landeanfen/p/5821192.html  转载 阅读目录 一.x-editable组件介绍 二.bootstrapTable行内编辑初始方案 ...

  9. 第87节:Java中的Bootstrap基础与SQL入门

    第87节:Java中的Bootstrap基础与SQL入门 前言复习 什么是JQ? : write less do more 写更少的代码,做更多的事 找出所有兄弟: $("div" ...

  10. bootstrap table使用总结

    使用bootstrap table可以很方便的开发后台表格,对数据进行异步更新,编辑.下面就来介绍一下bootstrap table的详细使用方法: 因为之前在官网也找了很久的教程,源码感觉隐藏的比较 ...

随机推荐

  1. android官方技术文档翻译——工具属性

    本文译自androd官方技术文档<Tools Attributes>:http://tools.android.com/tech-docs/tools-attributes 本文地址:ht ...

  2. ORACLE收集统计信息

    1.     理解什么是统计信息 优化器统计信息就是一个更加详细描述数据库和数据库对象的集合,这些统计信息被用于查询优化器,让其为每条SQL语句选择最佳的执行计划.优化器统计信息包括: ·       ...

  3. Java-HttpSession监听

    //HttpSession监听 public interface HttpSessionActivationListener extends EventListener { /** Notificat ...

  4. The type java.lang.Object cannot be resolved. It is indirectly referenced from required .class files

    The type java.lang.Object cannot be resolved.It is indirectly referenced from required .class files ...

  5. Xcode两种调试小技巧

    1."全局"断点 正常情况下如果代码有错误,会直接触发SIGXXXX信号,然后中断在main函数里. 但是我们还是不知道到底是什么引发了异常信号.我们可以在断点导航器中添加一个全局 ...

  6. iOS9 系统分享调用(UIActivityViewController)

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/49615109 ...

  7. OpenCV——彩色图像转成灰度图像

    // PS_Algorithm.h #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include <iostr ...

  8. 如何在os x或ubuntu下安装最新的ruby

    os x下基本上可以安装到比较新的ruby,首先先安装rvm,然后用rvm list known看当前可供安装的ruby的版本,不过这也不是绝对的,比如在我的os x 10.9上,命令返回如下: # ...

  9. erb自动生成html页面一例

    原来的html蛮长的,源代码如下: <html> <head> <style type="text/css"> ul.none {list-st ...

  10. H5页面转成图片并下载到本地

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...