Bootstrap-table学习笔记(一)
第一次使用Bootstrap-table这个表格插件,记录一下使用过程中遇到的问题。
===================
| 引入CSS文件
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
| 引入相关库
我们需要引入Jquery库、bootstrap库、以及bootstrap-table.js文件
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<-- put your locale files after bootstrap-table.js -->
<script src="bootstrap-table-zh-CN.js"></script>
| 启用Bootstrap Table插件:
官方文档中给出了我们有两种那个方式来启用bootstrap-table插件:
1,通过data属性的方式:
<table data-toggle="table">
<thead>
<tr>
<th>Item ID</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Item 1</td>
<td>$1</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>$2</td>
</tr>
</tbody>
</table>
2,通过js的方式:
//只需要HTML中写下table标签,并设置id
<table id="table"></table>
$('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}],
data: [{
id: 1,
name: 'Item 1',
price: '$1'
}, {
id: 2,
name: 'Item 2',
price: '$2'
}]
});
也可以通过url获取数据
$('#table').bootstrapTable({
url: 'data1.json',
columns: [{
field: 'id', //与返回值的JSON数据的key值对应
title: 'Item ID' //列名
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}, ]
});
Bootstrap-table学习笔记(一)的更多相关文章
- .Net MVC+bootstrap Table学习
一.效果展示 二.使用方法 1).相关css和js的引用 <link href="~/Themes/Bootstrap/css/bootstrap.css" rel=&quo ...
- Bootstrap 基础学习笔记(一)
排版 (1)标题 Bootstrap标题样式进行了以下显著的优化重置: 1.重新设置了margin-top和margin-bottom的值, h1~h3重置后的值都是20px:h4~h6重置后的值都 ...
- bootstrap 新手学习笔记 代码整理
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap入门学习笔记(只记录了效果)
基本头文件 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <me ...
- Boostrap Table学习笔记
最近要对项目上的table进行调整,让表格能够支持更多的操作,于是接触到了boostrapTable这个插件.研究了一天,记录下学习的内容. Boostrap Table可以支持表的分页及动态显示表的 ...
- LUA table学习笔记
function printT( ... ) for i,v in ipairs(...) do print(i,v) end end t1={} t2={} t3={} table.insert(t ...
- Bootstrap 3学习笔记 -栅格
这是Bootstrap中非常基础一张表,但其实有这么容易掌握和理解吗? (1).对于col-md的div, 默认是垂直排列, 当视口(屏幕或浏览器的宽度)>992px,col-md-1的div块 ...
- Bootstrap 新手学习笔记——布局组件
1.字形图标: <button type="button" class="btn btn-primary btn-lg" style="font ...
- Bootstrap新手学习笔记——css
Css模块: 1.网格系统: class前缀:.col-xs-*,.col-sm-*,.col-md-*,.col-lg-* <div class="container"&g ...
- bootstrap table 学习记录
效果: html代码: <!-- 工具容器 --> <div id="toolbar" class="btn-group"> <b ...
随机推荐
- Python单元测试框架——unittest
测试的常用规则 一个测试单元必须关注一个很小的功能函数,证明它是正确的: 每个测试单元必须是完全独立的,必须能单独运行.这样意味着每一个测试方法必须重新加载数据,执行完毕后做一些清理工作.通常通过se ...
- Maven的Mirror和Repository
今天新公司入职,项目经理让迁出项目,心想maven的阿里镜像源挺快的,干脆在配置了公司私服之后自己配置了阿里的镜像源,没成想项目屡屡报错,找不到项目依赖的公司jar包,后来才发现,同事配置mirror ...
- vue项目配置less预编译语言
当所有东西都 准备好之后 : 第一步: 安装less依赖,npm install less less-loader --save 第二步:找到webpack配置文件webpack.base.conf. ...
- windows 安装python3.5启动报错:api-ms-win-crt-runtime-l1-1-0.dll丢失
下载: api-ms-win-crt-runtime就是MFC的运行时环境的库,python在windows上编译也是用微软的visual studio C++编译的,底层也会用到微软提供的C++库和 ...
- Spring AOP(4)
- [CTSC2008]祭祀river
Description 在遥远的东方,有一个神秘的民族,自称Y族.他们世代居住在水面上,奉龙王为神.每逢重大庆典, Y族都 会在水面上举办盛大的祭祀活动.我们可以把Y族居住地水系看成一个由岔口和河道组 ...
- C# word 类库基本属性介绍
using System;using System.Collections.Generic;using System.Text;using Microsoft.Office.Interop.Word; ...
- 第二篇:Spark SQL Catalyst源码分析之SqlParser
/** Spark SQL源码分析系列文章*/ Spark SQL的核心执行流程我们已经分析完毕,可以参见Spark SQL核心执行流程,下面我们来分析执行流程中各个核心组件的工作职责. 本文先从入口 ...
- eclipse向上/下复制一行(或者多行)的快捷键失效的基本解决方法
在eclipse中,快捷键Ctrl+Alt+↓是向下复制选中的行,快捷键Ctrl+Alt+↑是向上复制选中的行. 这两个快捷键也是我常用的快捷键之一,以前也遇到失效. 所以现在记录一个解决的方法: 在 ...
- 工作队列work queues 公平分发(fair dispatch) And 消息应答与消息持久化
生产者 package cn.wh.work; import cn.wh.util.RabbitMqConnectionUtil; import com.rabbitmq.client.Channel ...