前端表格插件 BootstrapTable 入门教程

最新推荐文章于 2024-04-12 20:46:50 发布
最新推荐文章于 2024-04-12 20:46:50 发布
阅读量10w+ 收藏 151
点赞数 36
分类专栏： Bootstrap 文章标签： bootstrap 前端 插件 表格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/javahighness/article/details/73929108
版权
官网地址： http://bootstrap-table.wenzhixin.net.cn/zh-cn/
Github地址： https://github.com/wenzhixin/bootstrap-table

官网介绍：
基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。

主要功能
  • 支持 Bootstrap 3 和 Bootstrap 2
  • 自适应界面
  • 固定表头
  • 非常丰富的配置参数
  • 直接通过标签使用
  • 显示/隐藏列
  • 显示/隐藏表头
  • 通过 AJAX 获取 JSON 格式的数据
  • 支持排序
  • 格式化表格
  • 支持单选或者多选
  • 强大的分页功能
  • 支持卡片视图
  • 支持多语言
  • 支持插件

优点

  • 学习成本较低，配置简单，文档齐全
  • 跟Bootstrap无缝衔接，整体风格一致，也便于二次开发
  • 开发者活跃，Github定期维护

开始使用

  • 1、在网页的head标签里插入下面的代码
<!-- 引入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>
  • 2、在页面body代码块里定义表格展示的区域
<table id="table"></table>
  • 3、使用data属性来渲染表格 （简单方式）
<table data-toggle="table" data-url="data1.json">
    <thead>
        <tr>
            <th data-field="id">序号</th>
            <th data-field="name">名称</th>
            <th data-field="price">价格</th>
        </tr>
    </thead>
</table>
  • 4、编写JavaScript代码渲染表格 （推荐使用这种方式，代码阅读和扩展更为方便）

在网页代码最下面插入js脚本，内容如下：


$("#table").bootstrapTable({ // 对应table标签的id
      url: "<%=request.getContextPath()%>/api/getDataList.do", // 获取表格数据的url
      cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
      striped: true,  //表格显示条纹，默认为false
      pagination: true, // 在表格底部显示分页组件，默认false
      pageList: [10, 20], // 设置页面可以显示的数据条数
      pageSize: 10, // 页面数据条数
      pageNumber: 1, // 首页页码
      sidePagination: 'server', // 设置为服务器端分页
      queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求

          return {
              pageSize: params.limit, // 每页要显示的数据条数
              offset: params.offset, // 每页显示数据的开始行号
              sort: params.sort, // 要排序的字段
              sortOrder: params.order, // 排序规则
              dataId: $("#dataId").val() // 额外添加的参数
          }
      },
      sortName: 'id', // 要排序的字段
      sortOrder: 'desc', // 排序规则
      columns: [
          {
              checkbox: true, // 显示一个勾选框
              align: 'center' // 居中显示
          }, {
              field: 'code', // 返回json数据中的name
              title: '编号', // 表格表头显示文字
              align: 'center', // 左右居中
              valign: 'middle' // 上下居中
          }, {
              field: 'name',
              title: '名称',
              align: 'center',
              valign: 'middle'
          }, {
              field: 'calcMode',
              title: '计算方式',
              align: 'center',
              valign: 'middle',
              formatter: function (value, row, index){ // 单元格格式化函数
                  var text = '-';
                  if (value == 1) {
                      text = "方式一";
                  } else if (value == 2) {
                      text = "方式二";
                  } else if (value == 3) {
                      text = "方式三";
                  } else if (value == 4) {
                      text = "方式四";
                  }
                  return text;
              }
          }, {
              title: "操作",
              align: 'center',
              valign: 'middle',
              width: 160, // 定义列的宽度，单位为像素px
              formatter: function (value, row, index) {
                  return '<button class="btn btn-primary btn-sm" onclick="del(\'' + row.stdId + '\')">删除</button>';
              }
          }
      ],
      onLoadSuccess: function(){  //加载成功时执行
            console.info("加载成功");
      },
      onLoadError: function(){  //加载失败时执行
            console.info("加载数据失败");
      }

})

组件文档

一、表格参数

设置表格如何显示，下面列举了常用的参数，更全的列表请访问官方网址：
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#表格参数

使用方式如下：

$("#table").bootstrapTable({
      method: "post",
      url: "获取后台数据的url",
      ... ...

});
名称标签类型默认描述
methoddata-methodString‘get’服务器数据的请求方式 ‘get’ or ‘post’
urldata-urlStringundefined服务器数据的加载地址
undefinedTextdata-undefined-textString‘-‘当数据为 undefined 时显示的字符
stripeddata-stripedBooleanfalse设置为 true 会有隔行变色效果
columns-Array[]列配置项,详情请查看 列参数 表格.
data-Array[]加载json格式的数据
cachedata-cacheBooleantrue设置为 false 禁用 AJAX 数据缓存
dataTypedata-data-typeString‘json’服务器返回的数据类型
queryParamsdata-query-paramsFunctionfunction(params) {
return params;
}		请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，
例如 toolbar 中的参数
如果 queryParamsType = ‘limit’ ,返回参数必须包含
limit, offset, search, sort, order
否则, 需要包含: pageSize, pageNumber, searchText, sortName, sortOrder.
返回false将会终止请求
paginationdata-paginationBooleanfalse设置为 true 会在表格底部显示分页条
paginationLoopdata-pagination-loopBooleantrue设置为 true 启用分页条无限循环的功能。
sidePaginationdata-side-paginationString‘client’设置在哪里进行分页，可选值为 ‘client’ 或者 ‘server’。设置 ‘server’时，必须设置 服务器数据地址（url）或者重写ajax方法
pageNumberdata-page-numberNumber1如果设置了分页，首页页码
pageSizedata-page-sizeNumber10如果设置了分页，页面数据条数
pageListdata-page-listArray[10, 25, 50, 100, All]如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
searchdata-searchBooleanfalse是否启用搜索框
searchOnEnterKeydata-search-on-enter-keyBooleanfalse设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
showRefreshdata-show-refreshBooleanfalse是否显示 刷新按钮
clickToSelectdata-click-to-selectBooleanfalse设置true 将在点击行时，自动选择rediobox 和 checkbox
singleSelectdata-single-selectBooleanfalse设置True 将禁止多选

二、列参数

针对具体每一列展示的设置参数，最常用的为 title 和 field， 它们分别设置了表头显示文字和对应要显示的每项数据

示例代码：

$("#table").bootstrapTable({
      method: "post",
      url: "获取后台数据的url",
      columns: [
          {
              checkbox: true
          }, {
              title: '标准编号'
              field: 'stdCode'
          },
          ... ...
      ]
});
名称标签类型默认描述
titledata-titleStringundefined表头要显示的文本
fielddata-fieldStringundefined要显示数据的字段名称，可以理解为json对象里的key
checkboxdata-checkboxBooleanfalse设置为True的时候 则显示一列checkbox组件，该列的宽度为固定宽度
radiodata-radioBooleanfalse设置为True的时候 则显示一列radio组件，该列的宽度为固定宽度
aligndata-alignStringundefined设置单元格数据的左右对齐方式， 可选择的值有：’left’, ‘right’, ‘center’
valigndata-valignStringundefined设置单元格数据的上下对齐方式， 可选择的值有：’top’, ‘middle’, ‘bottom’
widthdata-widthNumber {Pixels or Percentage}undefined设置列的宽度。如果没有设置的话则根据表格内容自适应宽度。设置的话，可以使用’%’百分比的方式，也可以设置要显示的像素值， 如果设置像素值的话可以不填’px’， 例如： width : 100 和 width : ‘100px’ ，效果是一样的
visibledata-visibleBooleantrue显示或隐藏该列， 默认显示， False为隐藏
formatterdata-formatterFunctionundefined单元格格式化函数，有三个参数：
value： 该列的字段值；
row： 这一行的数据对象；
index： 行号，第几行，从0开始计算
例子：
formatter : function(value, row, index){ return value + row.id + index; }

关于列参数，更详细文档请访问
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#列参数

三、事件

给表格绑定事件，代码：

$("#table").bootstrapTable({
      method: "post",
      url: "获取后台数据的url",
      onLoadSuccess: function(){  //加载成功时执行
            console.info("加载成功");
      },
      onLoadError: function(){  //加载失败时执行
            console.info("加载数据失败");
      }
});
Option 事件jQuery 事件参数描述
onLoadSuccessload-success.bs.tabledata请求加载远程服务器数据成功时的事件
onLoadErrorload-error.bs.tablestatus请求加载远程服务器数据失败时的事件
onClickRowclick-row.bs.tablerow, element|当用户点击某一行的时候触发，参数包括：<br/>row：点击行的数据，<br/> element：tr 元素，
field：点击列的 field 名称。
onDblClickRowdbl-click-row.bs.tablerow, $element当用户双击某一行的时候触发，参数包括：
row：点击行的数据，
field：点击列的 field 名称。
onClickCellclick-cell.bs.tablefield, value, row, element|当用户点击某一列的时候触发，参数包括：<br/>field：点击列的field名称，<br/>value：点击列的value值，<br/>row：点击列的整行数据，<br/> element：td 元素。
onDblClickCelldbl-click-cell.bs.tablefield, value, row, element|当用户双击某一列的时候触发，参数包括：<br/>field：点击列的field名称，<br/>value：点击列的value值，<br/>row：点击列的整行数据，<br/> element：td 元素。

关于事件，更详细文档请访问：
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#事件

四、方法

使用方法的语法：$(‘#table’).bootstrapTable(‘method’, parameter);。
示例代码：

// 获取表格所有已经勾选的行数据，为一个对象数组
var selects = $('#table').bootstrapTable('getSelections');
名称(method)参数描述
getOptionsnone返回表格的 Options。
getSelectionsnone返回所选的行，当没有选择任何行的时候返回一个空数组。
getAllSelectionsnone返回所有选择的行，包括搜索过滤前的，当没有选择任何行的时候返回一个空数组。
loaddata加载数据到表格中，旧数据会被替换。
appenddata添加数据到表格在现有数据之后。
prependdata插入数据到表格在现有数据之前。
insertRowparams插入新行，参数包括：
index: 要插入的行的 index。
row: 行的数据，Object 对象。
refreshparams更新远程服务器上的数据，可以设置{silent: true}来默认刷新，也可以设置{url: newUrl}来改变获取数据的url接口，也支持设置请求的参数{query: {foo: ‘bar’}}，这点在表单查询时很有用
showLoadingnone显示数据加载状态
hideLoadingnone隐藏数据加载状态
checkindex选择一行，参数为行号，index从0开始
uncheckindex取消选择一行，参数为行号，index从0开始
destroynone销毁一个表格，直接把整个table删掉，需要重新开始渲染table
selectPagepage跳到指定的页。
prevPagenone跳到上一页。
nextPagenone跳到下一页。

更全文档请访问：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#方法

Highnesss
关注
专栏目录
Bootstrap Table数据表格的使用指南，springmvc面试题2020
m0_64383449的博客
12-23 879
public Specification buildSpec(StudentForm form){ return null; } 其中page方法中接收参数的TablePageable类是接收分页和排序参数类，其中还包含了几个分页排序处理的方法。StudentForm中的字段和实体类中字段一样，主要用于接收查询条件。Student为实体类。buildSpec方法为查询方法。 TablePageable类代码如下。 import org.springframework.data.domain.PageRequ
Vue-Bootstrap-Table 使用指南
最新发布
gitblog_00476的博客
08-16 582
Vue-Bootstrap-Table 使用指南 vue-bootstrap-table项目地址:https://gitcode.com/gh_mirrors/vu/vue-bootstrap-table 项目介绍 Vue-Bootstrap-Table 是一个基于 Vue.js 和 Bootstrap 风格的可排序、可搜索的数据表格组件。它适用于希望在 Vue 应用中集成具有美观界面和强大功...
BootstrapTable的使用教程
热门推荐
祈澈菇凉
03-07 1万+
官方网站：http://bootstrap-table.wenzhixin.net.cn/参考文档：http://issues.wenzhixin.net.cn/bootstrap-table/index.html中文文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/下载boot...
BootstrapTable的简单使用教程
aocheqing0591的博客
08-07 266
1.引入必须的几个包 <link th:href="bootstrap/css/bootstrap.css}"/> <link th:href="bootstrap-table/bootstrap-table.css}" /> <script th:src="jquery/jquery.min.js}"></script> &l...
BootStrap-table教程
辛聪明的博客
09-25 252
BootStrap-table官网下载地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 1、head引入link、js资源 <!-- 引入bootstrap样式 --> <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css...
值得分享的Bootstrap Table使用教程
11-26
bootstrap-table是在bootstrap-table的基础上写出来的，专门用于显示数据的表格插件。而bootstrap是来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS、JAVASCRIPT 的，具有简便灵活，快速前端开发的优势。对与bootstrap在此就不在叙述。 jquery ，bootstrap ，bootstrap-table 三者之间的关系。bootstrap很多部分代码涉及到了jquery的，也就是说 bootstrap是依赖jquery的，而我们要使用的bootstrap-table则是在bootstrap基础上创造出来的，
ABP入门系列应用BootstrapTable表格插件
10-20
BootstrapTable表格插件是基于Bootstrap框架开发的一个jQuery表格插件，它允许用户通过简单的配置实现包括单选、多选、排序、分页、编辑、导出、过滤等丰富的表格功能。BootstrapTable具有轻量级、功能丰富的特点，...
教大家轻松制作Bootstrap漂亮表格（table）
11-27
Bootstrap是一款流行的...同时，可以查阅Bootstrap的教程和实战案例，如Bootstrap学习教程、Bootstrap实战教程、Bootstrap Table使用教程和Bootstrap插件使用教程，这些资源将帮助你更好地理解和掌握Bootstrap框架。
将bootstrap-table表格翻译为中文
03-04
Bootstrap表格是前端开发中常用的组件，它为网页提供了一种美观、响应式的表格展示方式。Bootstrap-table 是基于Bootstrap框架的扩展插件，它允许开发者在网页中创建功能丰富的表格，包括排序、过滤、分页、行编辑等...
bootstrap表格插件
09-06
用于生成数据表格，按指定格式传入json数据即可.............................................
JS组件Bootstrap Table使用方法详解
04-27
JS组件Bootstrap Table使用方法详解 转载 2016年03月21日 15:06:09 标签： Bootstrap Table 最近客户提出需求，想将原有的管理系统，做下优化，通过手机也能很好展现，想到2个方案: a方案：保留原有的页面，新设计一套适合手机的页面，当手机访问时，进入m.zhy.com(手机页面)，pc设备访问时，进入www.zhy.com(pc页面) b方案：采用bootstrap框架,替换原有页面，自动适应手机、平板、PC 设备 采用a方案，需要设计一套界面，并且要得重新写适合页面的接口，考虑到时间及成本问题，故项目采用了b方案 一、效果展示 二、BootStrap table简单介绍 bootStrap table 是一个轻量级的table插件，使用AJAX获取JSON格式的数据，其分页和数据填充很方便，支持国际化 三、使用方法 1、引入js、css [js] view plain copy <!--css样式--> <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap/bootstrap-table.css" rel="stylesheet"> <!--js--> [removed][removed] [removed][removed] [removed][removed] [removed][removed] 2、table数据填充 bootStrap table获取数据有两种方式，一是通过table 的data-url属性指定数据源，二是通过JavaScript初始化表格时指定url来获取数据 [xhtml] view plain copy ... ... [xhtml] view plain copy $('#table').bootstrapTable({ url: 'data.json' }); 第二种方式交第一种而言在处理复杂数据时更为灵活，一般使用第二种方式来进行table数据填充。 [js] view plain copy $(function () { //1.初始化Table var oTable = new TableInit(); oTable.Init(); //2.初始化Button的点击事件 /* var oButtonInit = new ButtonInit(); oButtonInit.Init(); */ }); var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#tradeList').bootstrapTable({ url: '/VenderManager/TradeList', //请求后台的URL（*） method: 'post', //请求方式（*） toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: true, //是否显示分页（*） sortable: false, //是否启用排序 sortOrder: "asc", //排序方式 queryParams: oTableInit.queryParams,//传递参数（*） sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） pageNumber:1, //初始化加载第一页，默认第一页 pageSize: 50, //每页的记录行数（*） pageList: [10, 25, 50, 100], //可供选择的每页的行数（*） strictSearch: true, clickToSelect: true, //是否启用点击选中行 height: 460, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 uniqueId: "id", //每一行的唯一标识，一般为主键列 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 columns: [{ field: 'id', title: '序号' }, { field: 'liushuiid', title: '交易编号' }, { field: 'orderid', title: '订单号' }, { field: 'receivetime', title: '交易时间' }, { field: 'price', title: '金额' }, { field: 'coin_credit', title: '投入硬币' }, { field: 'bill_credit', title: '投入纸币' }, { field: 'changes', title: '找零' }, { field: 'tradetype', title: '交易类型' },{ field: 'goodmachineid', title: '货机号' },{ field: 'inneridname', title: '货道号' },{ field: 'goodsName', title: '商品名称' }, { field: 'changestatus', title: '支付' },{ field: 'sendstatus', title: '出货' },] }); }; //得到查询的参数 oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 limit: params.limit, //页面大小 offset: params.offset, //页码 sdate: $("#stratTime").val(), edate: $("#endTime").val(), sellerid: $("#sellerid").val(), orderid: $("#orderid").val(), CardNumber: $("#CardNumber").val(), maxrows: params.limit, pageindex:params.pageNumber, portid: $("#portid").val(), CardNumber: $("#CardNumber").val(), tradetype:$('input:radio[name="tradetype"]:checked').val(), success:$('input:radio[name="success"]:checked').val(), }; return temp; }; return oTableInit; }; field字段必须与服务器端返回的字段对应才会显示出数据。 3、后台获取数据 a、servlet获取数据 [js] view plain copy BufferedReader bufr = new BufferedReader( new InputStreamReader(request.getInputStream(),"UTF-8")); StringBuilder sBuilder = new StringBuilder(""); String temp = ""; while((temp = bufr.readLine()) != null){ sBuilder.append(temp); } bufr.close(); String json = sBuilder.toString(); JSONObject json1 = JSONObject.fromObject(json); String sdate= json1.getString("sdate");//通过此方法获取前端数据 ... b、springMvc Controller里面对应的方法获取数据 [js] view plain copy public JsonResult GetDepartment(int limit, int offset, string orderId, string SellerId，PortId，CardNumber，Success，maxrows，tradetype) { ... } 4、分页(遇到问题最多的) 使用分页，server端返回的数据必须包括rows和total，代码如下： [js] view plain copy ...gblst = SqlADO.getTradeList(sql,pageindex,maxrows); JSONArray jsonData=new JSONArray(); JSONObject jo=null; for (int i=0,len=gblst.size();i<len;i++) { TradeBean tb = gblst.get(i); if(tb==null) { continue; } jo=new JSONObject(); jo.put("id", i+1); jo.put("liushuiid", tb.getLiushuiid()); jo.put("price", String.format("%1.2f",tb.getPrice()/100.0)); jo.put("mobilephone", tb.getMobilephone()); jo.put("receivetime", ToolBox.getYMDHMS(tb.getReceivetime())); jo.put("tradetype", clsConst.TRADE_TYPE_DES[tb.getTradetype()]); jo.put("changestatus", (tb.getChangestatus()!=0)?"成功":"失败"); jo.put("sendstatus", (tb.getSendstatus()!=0)?"成功":"失败"); jo.put("bill_credit", String.format("%1.2f",tb.getBill_credit()/100.0)); jo.put("changes",String.format("%1.2f",tb.getChanges()/100.0)); jo.put("goodroadid", tb.getGoodroadid()); jo.put("SmsContent", tb.getSmsContent()); jo.put("orderid", tb.getOrderid()); jo.put("goodsName", tb.getGoodsName()); jo.put("inneridname", tb.getInneridname()); jo.put("xmlstr", tb.getXmlstr()); jsonData.add(jo); } int TotalCount=SqlADO.getTradeRowsCount(sql); JSONObject jsonObject=new JSONObject(); jsonObject.put("rows", jsonData);//JSONArray jsonObject.put("total",TotalCount);//总记录数 out.print(jsonObject.toString()); ... 5、分页界面内容介绍 前端获取分页数据，代码如下： [js] view plain copy ...oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 limit: params.limit, //第几条记录 offset: params.offset, //显示一页多少记录 sdate: $("#stratTime").val(), }; return temp; };... 后端获取分页数据,代码如下： [js] view plain copy ...int pageindex=0; int offset = ToolBox.filterInt(json1.getString("offset")); int limit = ToolBox.filterInt(json1.getString("limit")); if(offset !=0){ pageindex = offset/limit; } pageindex+= 1;//第几页... 以上就是为大家分享的Bootstrap Table使用方法，希望对大家熟练掌握Bootstrap Table使用方法有所帮助。 转自：http://www.jb51.net/article/79033.htm
Bootstrap编辑表格插件
10-16
包含bootstrap可编辑表格、下拉框、日期三个控件，功能齐全，使用简单，用法请参见http://blog.csdn.net/lzxadsl
超详细bootstraptable使用教程
墨水直达的博客
07-22 2524
首先附上本人有道云笔记链接，内含插件下载以及详细解读 bootstraptable下载及使用 1、引用顺序 2、body部分 <div> //这边是定义表格左上角的按钮 <div id="toolbar"> <button class="Export" title="Export Excel" ...
我的天！做Java九个月涨薪7K，这究竟是怎么做到的
2401_83411843的博客
04-12 745
总而言之，面试官问来问去，问的那些Redis知识点也就这么多吧，复习的不够到位，知识点掌握不够熟练，所以面试才会卡壳。将这些Redis面试知识解析以及我整理的一些学习笔记分享出来给大家参考学习《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！大家参考学习还有更多学习笔记面试资料也分享如下：[外链图片转存中…(img-qqGiEtUj-1712925995904)]《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》
bootstrap-table的基本使用教程
劣徒5520的博客
02-24 525
bootstrap-table的基本使用教程基本结构代码效果 基本结构 代码 1.hyml <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link href="https://cdn.bootcss.com/...
bootstrap-table表格插件
azyslwj的博客
12-08 360
bootstrap-table表格插件 Document </table> </div> <!-- 1.bootstrap-table表格插件 纯js格式化写法 --> <script> //初始化bootst...
Bootstrap表格插件--bootstrap-table
fendo
12-05 5229
一、简介 bootstrap-table是基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。 官网地址： http://bootstrap-table.wenzhixin.net.cn/zh-cn/ Github地址： https://github.com/wenz
零基础入门：Bootstrap Table实现前端表格教程
本文是一篇关于使用Bootstrap Table从零开始创建前端表格的教程。作者首先强调了需要下载Bootstrap Table插件及其必需的JavaScript（可以从https://github.com/wenzhixin/bootstrap-table获取），并推荐参考官方文档...
评论 17
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值