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下的Live方法和$.browser方法使用代码
Jun 02 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
js清理Word格式示例代码
Feb 13 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
动态加载jQuery的方法
Jun 16 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
jquery自定义插件——window的实现【示例代码】
May 06 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 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
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
ajax实现无刷新分页(php)
2010/07/18 PHP
php使用百度天气接口示例
2014/04/22 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
js常见遍历操作小结
2019/06/06 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
Python re模块介绍
2014/11/30 Python
Python构建XML树结构的方法示例
2017/06/30 Python
python文件写入write()的操作
2019/05/14 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
高二物理教学反思
2014/02/08 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
让生命充满爱观后感
2015/06/08 职场文书
李强优秀员工观后感
2015/06/16 职场文书
高中语文教学反思范文
2016/02/16 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
如何使用pdb进行Python调试
2021/06/30 Python
关于MySQL中explain工具的使用
2023/05/08 MySQL