bootstrap-table使用总结
首先交代一下，jquery ，bootstrap ，bootstrap-table 三者之间的关系。bootstrap很多部分代码涉及到了jquery的，也就是说 bootstrap是依赖jquery的，而我们要使用的bootstrap-table则是在bootstrap基础上创造出来的，所以在使用之前必须引用 jquery 和bootstrap的相关js，css文件。
好了，简介的话就说到这，直接上代码和效果图之后，再做进一步的讨论。
<script type="text/javascript" src="./js/jquery-2.2.1.js">
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js">
<script type="text/javascript" src="./bootstrap-table/bootstrap-table-all.js">
<script type="text/javascript" src="./bootstrap-table/locale/bootstrap-table-zh-CN.js">
<script language="javascript">
|
效果图：
好接下来我们 分步骤剖析一下上面的代码的含义。 1.首先我们需要去下载相应的 jquery bootstrap bootstrap-table的包，这些网上都有教程，在此不再叙述如何下载。由上面 标签中引用js和css文件名可知我们必须引进这几个文件。注意bootstrap，下载编译过的压缩包中只有三个文件夹 css ，fonts， js 1.jquery-2.2.1.js ---- 最新的jquery文件 2.bootstrap.min.js --- 最新的bootstrap/js中bootstrap.min.js 压缩文件 3.bootstrap.min.css ---最新的bootstrap/css中bootstrap.min.css 压缩文件 4.bootstrap-table-all.js ---最新bootstrap-table下的js文件 5.bootstrap-table-zh-CN.js ----最新bootstrap-table/locale下的中文初始文件 6.bootstrap-table.min.css ---最新的bootstrap-table下css压缩文件 这六个必须配置，其中bootstrap-table-zh-CN.js是支持中文的js文件，只有加载了这个文件我们的一些表格显示信息才会被设置成中文。 我们来实验一下 将bootstrap-table-zh-CN.js去掉后的显示效果。
当然我们还可以把显示信息设置成其他语言，只要将bootstrap-table-zh-CN.js换成其他语言的js文件即可。bootstrap-table包中都有支持。 我们还可以看看这个文件中的源码，我们看一下，就知道这个文件干了什么了。
*/
(function ($) {
'use strict';
$.fn.bootstrapTable.locales['zh-CN'] = { $.extend($.fn.bootstrapTable.defaults,$.fn.bootstrapTable.locales['zh-CN']); })(jQuery); 粗略一看就知道，引用该js文件后，在加载时，便祈祷了初始化的效果。将一些显示信息的内容转为相应的中内容。 2.接着我们来说相关的html代码，实际上与bootstrap-table有关的html代码只有这一部分
|
| 对，就只有一个table标签，再加上一大堆了 参数，而表格的展现形式就是通过这些在参数 来实现的。要知道有哪些样式和功能，光靠我列举肯定是九牛一毛，授人以鱼不如授人以渔，我告诉大家去哪查找这些类.class的含义。 我们可到bootstrap-table的专业网站上去查找 这有一个我用的链接，点击打开链接如果无效的可以 直接输入http://bootstrap-table.wenzhixin.net.cn/documentation 当然还可以在example中看一些例子
我们如何查看 相应的参数的含义呢？ 看到上面这张图，最右边的是一些选项，可以选这可以设置的表格属性，行属性，以及可绑定的事件。 点击表格属性 Table options 显示如下图，首先看到标题Name用于js创建表格是使用，而Attribute是html创建表格使用的， 举几个例子在我们上面的代码中有这么几个 参数他们的意思是： data-url：索取数据的url。 data-method：请求方式。 data-height：设置表格的高 data-query-params="queryParams" ：设置 data-toolbar="#toolbar"：设置装按钮的容器为id为toolbar的。 data-pagination="true" ：设置是否显示页码数 data-search="true" ：设置search框 data-show-refresh="true" ：设置刷新按钮 data-show-toggle="true" ：设置数据显示格式 这下你该明白怎么样查看了吧！注意其中下面段代码是核心，
|
|
对于不想用html静态生成，也可以使用js动态生成。给一个代码demo，要设置相关的参数只需要采用 上面讲的Name:options 即可。例如在html中设置数据请求的目的文件data-url："./data.php" 在js中只要声明 url:"./data.php" 3.这样说，其他代码是干什么的，其中一部分代码是使用了 boostrap中的面板来设置格式，即将table镶嵌在面板中。 所去掉面板的代码后的效果是这样的仅仅是没有了面板而已。
4.传送数据的格式，bootstrap-table 接收的数据形式默认为json格式的在上面可以看到请求的后台地址为:"./data.PHP",我们来看一下他的内容 PHP;">
$results[0]=array("name"=>"aoze","pwd"=>"20132588","t_name"=>"张三");
$results[1]=array("name"=>"lisi","pwd"=>"1234","t_name"=>"李四"); $results[2]=array("name"=>"wangwu","pwd"=>"44455","t_name"=>"王五"); echo json_encode($results); ?> 很简单吧！ 当然这只是我手写的一些测试数据，在项目中当然是从数据库中查找出来的。 5.当然仅仅使显示数据有时候还是不够的，我们需要和table进行一些互动，比如进行一些删除，修改的功能，这时就需要用到 的一些事件了。在上面的案例中我在table的中镶嵌了两个button组件如图
这个镶嵌的实现办法是在在table的属性中 添加了这么一行data-toolbar="#toolbar" 其意思就是在工具栏的一行添加 id为toolbar的标签。 在本人做到这个项目中，要通过这两个按钮对table中点击选中的行进行相应的操作。 编写相应的事件，首先为table绑定一个选中的触发事件，然后通过getSelectRow函数获得点击选中行的数据。 如果大家还想深入学习，可以点击进行学习，再为大家附3个精彩的专题： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 原文链接：https://www.f2er.com/bootstrap/46960.html猜你在找的Bootstrap相关文章 |
|---|
