bootstrap table使用入门基本用法


Posted in Javascript onMay 24, 2017

笔者在查询bootstrap table资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网。但是对于某部分技术人员来说,入门还是不够详细,故有了下列的文章。希望我的文章能给大家带来帮助。

bootstrap-table作为常用的TABLE显示控件,会经常出现在各位的项目当中。 

使用步骤如下:

第一步: 下载bootstrap-table需要使用的文件(包括Css and js文件)

官方网址   http://bootstrap-table.wenzhixin.net.cn/

下载后解压后可以看到如下目录格式

bootstrap-table/
├── dist/
│   ├── extensions/
│   ├── locale/
│   ├── bootstrap-table.min.css
│   └── bootstrap-table.min.js
├── docs/
└── src/
    ├── extensions/
    ├── locale/
    ├── bootstrap-table.css
    └── bootstrap-table.js
 

第二步:在html页面或者其他页面中添加如下CSS 和JS的标签

注意:CSS文件和JS文件在下载文件夹中均可以找到

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>

最好的做法,是自己定义好CSS和JS摆放的位置,例如在你根目录下建立bootstrap-table文件夹,里面再分css和js文件夹,将文件copy到对应的目录 

第三步: 放入table 的标签

<table id="table"></table>

第四步:编写js代码

<script >
$('#table').bootstrapTable({
  url: 'data1.json',
  columns: [{
    field: 'id',
    title: 'Item ID'
  }, {
    field: 'name',
    title: 'Item Name'
  }, {
    field: 'price',
    title: 'Item Price'
  }, ]
});
</script>

第五步:编写数据来源文件

该例子是直接使用json文件来实现数据来源,其实大家可以使用其他编程语言,例如php jsp等等来实现json的输出。

data1.json文件内容如下

[{id:"1",title:"meetweb"},{id:"2",title:"learn bootstrap table"}]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
jQuery处理图片加载失败的常用方法
Jun 08 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
简单实现JS计算器功能
Dec 21 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
JavaScript设计模式之单例模式详解
Jun 09 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 Javascript
Vue动态实现评分效果
May 24 #Javascript
Angular.js指令学习中一些重要属性的用法教程
May 24 #Javascript
jquery append与appendTo方法比较
May 24 #jQuery
php 修改密码实现代码
May 24 #Javascript
详解VueJs前后端分离跨域问题
May 24 #Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 #Javascript
angular directive的简单使用总结
May 24 #Javascript
You might like
php 运行效率总结(提示程序速度)
2009/11/26 PHP
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
php 团购折扣计算公式
2011/11/24 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
微信红包随机生成算法php版
2016/07/21 PHP
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
vue跨域解决方法
2017/10/15 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
Python实现把回车符\r\n转换成\n
2015/04/23 Python
Python操作Excel之xlsx文件
2017/03/24 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
如何运行带参数的python脚本
2019/11/15 Python
tensorflow常用函数API介绍
2020/04/19 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
公司离职证明范本
2014/01/13 职场文书
设计大赛策划方案
2014/06/13 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL