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 相关文章推荐
Prototype Function对象 学习
Jul 12 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 Javascript
Flexible.js可伸缩布局实现方法详解
Nov 13 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
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
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
缓存技术详谈―php
2006/12/14 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
js判断变量是否未定义的代码
2020/03/28 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
理解javascript中的闭包
2017/01/11 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
python中的格式化输出用法总结
2016/07/28 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
后勤副校长自我鉴定
2013/10/13 职场文书
中医药大学毕业生自荐信
2013/11/08 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
项目合作协议书
2014/09/23 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
三年级学生期末评语
2014/12/26 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
教你怎么用python selenium实现自动化测试
2021/05/27 Python
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL