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 相关文章推荐
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
Aug 26 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
Dec 08 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
es6数值的扩展方法
Mar 11 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
详解JavaScript中分解数字的三种方法
Jan 05 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
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
JavaScript 学习 - 提高篇
2007/02/02 Javascript
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
js实现tab切换效果
2017/02/16 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
Python中asyncore的用法实例
2014/09/29 Python
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
python 多线程重启方法
2019/02/18 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
为数据库创建索引都需要注意些什么
2012/07/17 面试题
员工培训心得体会
2013/12/30 职场文书
应届毕业生个人求职自荐信
2014/01/06 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
护士岗前培训心得体会
2016/01/08 职场文书