Boostrap-table选中⾏获取⾏数据
博客地址：
转⾃：
bootstrap-table使⽤总结
bootstrap-table是在的基础上写出来的，专门⽤于显⽰数据的表格插件。⽽bootstrap是来⾃ Twitter，是⽬前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，具有简便灵活，快速前端开发的优势。对与bootstrap在此就不在叙述。本⽂将着重讲解⾃⼰在项⽬中使⽤到bootstrap-table的⼀些理解和如何学习它。
⾸先交代⼀下，jquery ，bootstrap ，bootstrap-table 三者之间的关系。bootstrap很多部分代码涉及到了jquery的，也就是说bootstrap是依赖jquery的，⽽我们要使⽤的bootstrap-table则是在bootstrap基础上创造出来的，所以在使⽤之前必须引⽤ jquery 和bootstrap的相关js，css⽂件。
接着说，的特点：与jquery-ui，jqgrid等表格显⽰插件⽽⾔，bootstrap-table扁平化，轻量级，对于⼀些轻量级的数据显⽰，他是绰绰有余，⽽对⽗⼦表等的⽀持也很好，最主要的是可以与bootstrap的其他标签⽆缝组合。
好了，简介的话就说到这，直接上代码和效果图之后，再做进⼀步的讨论。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
28 29 30 31 32<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"">
<head>
<title>bootstrap-table</title>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<meta name="description"content=""/>
<meta name="keywords"content=""/>
<script type="text/javascript"src="./js/jquery-2.2.1.js"></script>
<script type="text/javascript"src="./bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript"src="./bootstrap-table/bootstrap-table-all.js"></script>
<script type="text/javascript"src="./bootstrap-table/locale/bootstrap-table-zh-CN.js"></script> <link rel="stylesheet"type="text/css"href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"type="text/css"href="./bootstrap-table/bootstrap-table.min.css">
</head>
<script language="javascript">
</script>
<body>
<div class="col-md-offset-3 col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3class="panel-title text-center">已添加教师账号</h3>
</div>
<div class="panel-body">
<div id="toolbar"class="btn-group">
<button id="btn_edit"type="button"class="btn btn-default">
<span class="glyphicon glyphicon-pencil"aria-hidden="true"></span>修改
</button>
<button id="btn_delete"type="button"class="btn btn-default">
32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 <button id="btn_delete"type="button"class="btn btn-default">
<span class="glyphicon glyphicon-remove"aria-hidden="true"></span>删除
</button>
</div>
<table id="teacher_table"data-toggle="table"data-url="./data.php"data-method="post" data-query-params="queryParams"
data-toolbar="#toolbar"
data-pagination="true"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-page-size="5">
<thead>
<tr>
<th data-field="name">⽤户账号</th>
<th data-field="pwd">⽤户密码</th>
<th data-field="t_name">教师姓名</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</body>
效果图：
好接下来我们 分步骤剖析⼀下上⾯的代码的含义。
1.⾸先我们需要去下载相应的 jquery bootstrap  bootstrap-table的包，这些⽹上都有教程，在此不再叙述如何下载。
由上⾯<head>标签中引⽤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包中都有⽀持。
我们还可以看看这个⽂件中的源码，我们看⼀下，就知道这个⽂件⼲了什么了。
1 2 3/**
* Bootstrap Table Chinese translation
* Author: Zhixin Wen<wenzhixin2010@gmail>
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 */
(function($) {
'use strict';
$.fn.bootstrapTable.locales['zh-CN'] = {
formatLoadingMessage: function() {
return'正在努⼒地加载数据中，请稍候……';
},
formatRecordsPerPage: function(pageNumber) {
return'每页显⽰ '+ pageNumber + ' 条记录';
},表格网站php源码
formatShowingRows: function(pageFrom, pageTo, totalRows) {
return'显⽰第 '+ pageFrom + ' 到第 '+ pageTo + ' 条记录，总共 '+ totalRows + ' 条记录'; },
formatSearch: function() {
return'搜索';
},
formatNoMatches: function() {
return'没有到匹配的记录';
},
formatPaginationSwitch: function() {
return'隐藏/显⽰分页';
},
formatRefresh: function() {
return'刷新';
},
formatToggle: function() {
return'切换';
},
formatColumns: function() {
return'列';
}
};
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);
})(jQuery);
粗略⼀看就知道，引⽤该js⽂件后，在加载时，便祈祷了初始化的效果。将⼀些显⽰信息的内容转为相应的中内容。
2.接着我们来说相关的html代码，实际上与bootstrap-table有关的html代码只有这⼀部分
1 2 3 4 5 6 7 8 9 10 11 12<table id="teacher_table"data-toggle="table"data-url="./data.php"data-method="post" data-query-params="queryParams"
data-toolbar="#toolbar"
data-pagination="true"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-page-size="5">
<thead>
<tr>
<th data-field="name">⽤户账号</th>
13 14 15 16 17 <th data-field="pwd">⽤户密码</th>
<th data-field="t_name">教师姓名</th> </tr>
</thead>
</table>
对，就只有⼀个table标签，再加上⼀⼤堆了  参数，⽽表格的展现形式就是通过这些在参数 来实现的。要知道有哪些样式和功能，光靠我列举肯定是九⽜⼀⽑，授⼈以鱼不如授⼈以渔，我告诉⼤家去哪查这些类.class的含义。 我们可到bootstrap-table的专业⽹站上去查这有⼀个我⽤的链接，点击打开链接如果⽆效的可以 直接输⼊bootstrap-table.wenzhixin/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"  ：设置数据显⽰格式
这下你该明⽩怎么样查看了吧！
注意其中下⾯段代码是核⼼，<tr>表⽰⼀⾏ <th>⼀个格，data-field="name"表⽰⼀⾏中⼀个格⼦中的数据名  你可以把 data-field理解成id，因为后台传送过来的数据就是根据data-field的来区分，那个数据发送给谁的。
1 2 3 4 5 6 7<thead>
<tr>
<th data-field="name">⽤户账号</th> <th data-field="pwd">⽤户密码</th>
<th data-field="t_name">教师姓名</th> </tr>
</thead>
对于不想⽤html静态⽣成，也可以使⽤js动态⽣成。给⼀个代码demo，要设置相关的参数只需要采⽤ 上⾯讲的 Name:options 即可。例如在html中设置数据请求的⽬的⽂件 data-url："./data.php"  在js中只要声明  url:"./data.php"
1 2 3 4 5 6 7 8 9 10 11 12$('#table').bootstrapTable({ columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price' }],
data: [{
13 14 15 16 17 18 19 20 21 id: 1,
name: 'Item 1', price: '$1' }, {
id: 2,
name: 'Item 2', price: '$2' }]
});
3.这样说，其他代码是⼲什么的，其中⼀部分代码是使⽤了 boostrap中的⾯板来设置格式，即将table镶嵌在⾯板中。 所去掉⾯板的代码后的效果是这样的
仅仅是没有了⾯板⽽已。
4.传送数据的格式，bootstrap-table 接收的数据形式默认为json格式的
在上⾯可以看到请求的后台地址为:"./data.php"，我们来看⼀下他的内容
1 2 3 4 5 6 7 8<?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函数获得点击选中⾏的数据。
1 2 3 4 5 6 7 8 9$('#teacher_table').on('click-row.bs.table', function(e, row, element)
{
$('.success').removeClass('success');//去除之前选中的⾏的，选中样式
$(element).addClass('success');//添加当前选中的 success样式⽤于区别}); function getSelectedRow()
{
var index = $('#teacher_table').find('tr.success').data('index');//获得选中的⾏
return$('#teacher_table').bootstrapTable('getData')[index];//返回选中⾏所有数据}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。