bootstrap table 教程+x-editable

快速入门

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

Table of contents

  • Quick start
  • Why use it
  • What's included
  • details
  • 进阶之行内编辑
  • 额外的坑点

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决定这些参数传递给后台的的传递方式.发送给后台的数据,给出实现表单分页的两个参数,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-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,所有的键都会变成小写
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,732评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,496评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,264评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,807评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,806评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,675评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,029评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,683评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 41,704评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,413评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,016评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2赞 343