bootstrap table 教程+x-editable
Bootstrap-table
快速入门---- bootstrap-table是一个基于Bootstrap的jQuery插件
可以实现从数据库中提取数据到前端进行相应操作的功能
更加优秀的页面展现请到bootstrap-table
Table of contents
quick-start
对本文有什么疑问或者建议,可以在下方的评论区说明,笔者会尽能力给出解答,另外已经完成了bootstrap-table的增删改查操作,以及增加操作的的模态框(bootstrap modal),以及表单校检(bootstrap-validate),最近有点忙,过一段时间更新,还有侧边栏的动态生成(bootstrap-treeview)也是在学习当中
快速使用:
- Download bootstrap-table hello demo
- 预览前端demo代码
- Clone the repo:
git clone https://github.com/seltonGitHub/helloBootTable.git
没有配置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中的重要键值的简单解释:
- url(必须修改)
- method
- pageSize(必须修改)
- jsonstyle(必须修改)
- columns(必须修改)
- contentType(必须填写)
- queryParams
- pageNumber
- 表格绑定事件
showorder.js会向服务器发起ajax访问
bootstrapTable构建元素解析:
url
$("#table").bootstrapTable({ method: "post", url: "获取后台数据的url", ... ...}); ajax访问到的后台路径(必须),该后台需要按照指定的json 格式返回数据
method
get发送的数据在请求报文的请求行,也就是url部分,而且参数如果有中文会出现乱码问题,而post发送的数据在报文实体,都应该是post,表单的提交也一般都是post
queryParams
不需要任何修改,相当于ajax中的data键,上面的method决定这些参数传递给后台的的传递方式.发送给后台的数据,给出实现表单分页的两个参数,offset和limit,在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-patte>/DataSendServlet</url-patte></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.初始化Tablevar 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();//初始化TableoTableInit.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];}retu {classes: strclass};},//隔行变色});};//得到查询的参数oTableInit.queryParams = function (params) {var temp = {//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的limit: params.limit,//params.limit,页面大小offset: params.offset,testNum: 445,testNum1: 343};retu temp;};retu 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 {@Overrideprotected 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}]}");}@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request,response);}}注意
- bootstrap-table只能被调用一次的问题
在inittable之前
$("#table").bootstrapTable('destroy'); 清空之前表内数据
- 服务器向前端发送的用于构建表单的json,所有的键都会变成小写
作者：seltonzyf
来源链接：https://www.cnblogs.com/selton/p/9024060.html
版权声明：
1、JavaClub（https://www.javaclub.cn）以学习交流为目的，由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容，包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网，本站不享有版权，版权归原作者所有。
2、本站提供的内容仅用于个人学习、研究或欣赏，以及其他非商业性或非盈利性用途，但同时应遵守著作权法及其他相关法律的规定，不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容，请及时通知本站（javaclubcn@163.com），我们将第一时间核实后及时予以删除。
