这篇文章主要为大家详细介绍了射流研究…组件引导表使用方法，具有一定的实用性和参考价值，感兴趣的小伙伴们可以参考一下
bootstrap-table使用总结
引导表是在引导表的基础上写出来的，专门用于显示数据的表格插件。而引导程序是来自推特，是目前最受欢迎的前端框架自举是基于HTML、CSS、JAVASCRIPT的，具有简便灵活，快速前端开发的优势。对与引导程序在此就不在叙述。本文将着重讲解自己在项目中使用到引导表的一些理解和如何学习它。
首先交代一下，jquery，引导，引导表三者之间的关系自举很多部分代码涉及到了jquery的，也就是说引导程序是依赖jquery的，而我们要使用的引导表则是在引导程序基础上创造出来的，所以在使用引导表之前必须引用jquery和引导程序的相关js，css文件。
接着说，引导表的特点：与jquery-ui，jqgrid等表格显示插件而言，引导表扁平化，轻量级，对于一些轻量级的数据显示，他是绰绰有余，而对父子表等的支持也很好，最主要的是可以与引导程序的其他标签无缝组合。
好了，简介的话就说到这，直接上代码和效果图之后，再做进一步的讨论。
！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN '
http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-strict。' DTD '
头
标题引导-表格/标题
meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /
meta name=' description ' content=' '/
meta name='keywords' content='' /
脚本类型='text/javascript' src=' ./js/jquery-2。2 .1 .js '/脚本
脚本类型='text/javascript' src=' ./bootstrap/js/bootstrap。量滴js '/脚本
脚本类型='text/javascript' src=' ./bootstrap-table/bootstrap-table-alljs '/脚本
脚本类型='text/javascript' src=' ./bootstrap-table/locale/bootstrap-table-zh-cn。js '/脚本
link rel=' style sheet ' type=' text/CSS ' href=' ./bootstrap/CSS/bootstrap。量滴' CSS '
link rel=' style sheet ' type=' text/CSS ' href=' ./bootstrap-table/bootstrap-table量滴' CSS '
/头
脚本语言='javascript '
/脚本
身体
div class=' col-MD-offset-3 col-MD-6 '
div class='面板面板-默认'
div class='面板标题'
h3 class='面板标题文本居中'已添加教师账号/h3
/div
div class='面板-正文'
div id=' toolbar ' class=' BTN-group '
'按钮id=' BTN _编辑'类型='按钮'类=' BTN BTN-默认'
span class=' glyphicon glyphicon-pencil ' aria-hidden=' true '/span修改
/按钮
'按钮id=' BTN _删除'类型='按钮'类=' BTN BTN-默认'
span class=' glyphicon glyphicon-remove ' aria-hidden=' true '/span删除
/按钮
/div
表id=' teacher _ table ' data-toggle=' table ' data-URL=' ./data.php' data-method='post '
data-query-params='queryParams '
数据工具栏='#toolbar '
数据分页='真'
数据搜索='真'
数据显示刷新='真'
数据显示切换='真'
数据显示列='真'
data-page-size='5 '
四羟乙基己二酰胺
tr
泰国(Thailand)数据字段='名称'用户账号/th
泰国(Thailand)数据字段='pwd '用户密码/th
泰国(Thailand)数据字段='t_name '教师姓名/th
/tr
/thead
/表格
/div
/div
/div
/body
效果图：
好接下来我们分步骤剖析一下上面的代码的含义。
1.首先我们需要去下载相应的jquery引导程序引导表的包，这些网上都有教程，在此不再叙述如何下载。
由上面头标签中引用射流研究…和钢性铸铁文件名可知我们必须引进这几个文件。
注意自举，下载编译过的压缩包中只有三个文件夹css，字体，js
1.jquery-2.2.1.js -最新的jquery文件
2 .自举最新的自举/js中靴子。量滴射流研究…压缩文件
bootstrap.min.css最新的bootstrap/css中bootstrap.min.css压缩文件
4 .引导表-全部最新引导表下的射流研究…文件
5 .自举-表格-zh-CN.js -最新引导表/区域设置下的中文初始文件
6.bootstrap-table . min . css-bootstrap-table下最新的CSS压缩文件
这六个必须配置，其中bootstrap-table-zh-CN.js是支持中文的js文件。只有当这个文件被加载时，我们的一些表格显示信息才会被设置为中文。
我们来实验一下去掉bootstrap-table-zh-cn . js zh-cn . js后的显示效果。
当然，我们也可以将显示信息设置为其他语言，只需将bootstrap-table-zh-CN.js改为其他语言的js文件即可。在引导表包中有支持。
我们也可以看看这个文件中的源代码。如果我们查看它，我们将知道这个文件做了什么。
/**
*自举表中文翻译
*作者：志新Wenwenzhixin2010@gmail.com
*/
(函数($) {
使用严格的'；
$ . fn . bootstraptable . locales[' zh-CN ']={
formatLoadingMessage:function(){
返回“正在加载数据，请稍候…”；
},
formatRecordsPerPage:函数(页码){
Return' show' pageNumber '每页记录数'；
},
formatShowingRows:function(page from，pageTo，totalRows) {
“Return”显示“记录总数”中从“pageFrom”到“pageTo”的记录；
},
formatSearch: function () {
返回“搜索”；
},
format matches:function(){
返回“未找到匹配记录”；
},
formatPaginationSwitch:function(){
返回“隐藏/显示分页”；
},
格式刷新：函数(){
返回“刷新”；
},
formatToggle:函数(){
返回“开关”；
},
格式列：函数(){
返回“列”；
}
};
$.extend($ . fn . bootstraptable . defaults，$ . fn . bootstraptable . locales[' zh-CN '])；
})(jQuery)；
一眼就能看出，引用了这个js文件之后，就祈祷加载时初始化的效果了。将显示信息的部分内容转化为相应的内容。
2.那我们来说说相关的html代码。实际上，这是html代码中唯一与bootstrap-table相关的部分。
表id=' teacher _ table ' data-toggle=' table ' data-URL='。/data.php' data-method='post '
data-query-params='queryParams '
数据工具栏='#toolbar '
数据分页='true '
数据搜索='真'
数据显示刷新='真'
数据显示切换='真'
数据显示列='true '
data-page-size='5 '
四羟乙基己二酰胺
tr
Th data-field='name '用户帐户/th
Th数据字段='pwd '用户密码/th
Th data-field='t_name '教师姓名/th
/tr
/thead
/表格
是的，只有一个表格标签，加上一大堆参数，表格的展现形式就是通过这些已有的参数实现的。要知道有什么风格和功能，它必须是九个牛一头发只是由我的名单。授人以鱼不如授人以渔。我会告诉你在哪里找到这些类的意义。我们可以去bootstrap-table的专业网站找找。这是我用的一个链接。单击打开链接。如果不行，可以直接进入http://bootstrap-table.wenzhixin.net.cn/documentation.
当然，你也可以在example中看到一些例子。
我们如何检查相应参数的含义？见上图，最右边是一些选项。您可以选择可以在此设置的表属性、行属性和可绑定事件。
点击表属性表选项，出现下图。首先，您可以看到标题名称用于js创建表格，而属性用于html创建表格。
这里有几个例子。在上面的代码中，有太多的参数意味着：
data-url：数据的url。
data-method：请求方法。
data-height：设置桌子的高度
data-query-params="queryParams" ：设置
data-toolbar="#toolbar"：将带有按钮id的容器设置为工具栏。
data-pagination="true" ：设置是否显示页码。
data-search="true" ：设置搜索框
data-show-refresh="true" ：设置刷新按钮
data-show-toggle="true" ：设置数据显示格式
现在你应该知道怎么检查了吧！
注意下面的代码是核心，tr代表一行中的一个网格，data-field='name '代表一行中一个网格中的数据名称。您可以将数据字段理解为id，因为从后台传输的数据是根据数据字段以及数据发送给谁来区分的。
四羟乙基己二酰胺
tr
Th data-field='name '用户帐户/th
Th数据字段='pwd '用户密码/th
Th data-field='t_name '教师姓名/th
/tr
/thead
如果不想用html进行静态生成，也可以用js进行动态生成。给出一个代码演示，要设置相关参数，只需使用上面提到的Name:options即可。例如，如果您设置目标文件数据url:'。/data.php '在html中，只需声明URL:'。js中的“/data.php”。
$('#table ')。bootstrapTable({
列：[{
字段：“id”，
标题：“项目ID”
}, {
字段：“名称”，
标题：“项目名称”
}, {
字段：“价格”，
标题：“项目价格”
}],
数据：[{
id: 1，
名称：'项目1 '，
价格：' $1 '
}, {
id: 2，
名称：'项目2 '，
价格：' $2 '
}]
});
3.那么，其他代码是做什么的呢？他们中的一些人使用boostrap中的面板来设置格式，即在面板中嵌入表格。移除面板代码后，bootstrap-table的效果如下
只是没有面板而已。
4.格式的数据传输，bootstrap-table接收的数据默认为json格式。
上面可以看到，请求的后台地址是：'。/data.php '。我们来看看它的内容。
？服务器端编程语言（Professional Hypertext Preprocessor的缩写）
$ results [0]=array ('name'=' aoze '，' pwd'=' 20132588 '，' t _ name'='张三')；
$ results [1]=array ('name'=' Lisi '，' pwd'=' 1234 '，' t _ name '=' Lisi ')；
$ results [2]=array ('name'='吴王'，' pwd'=' 4455 '，' t _ name'='王五')；
echo JSON _ encode($ results)；
？
很简单！当然只是我写的一些测试数据，是从项目里的数据库里找的。
5.当然，仅仅显示数据有时候是不够的。我们需要与表进行一些交互，比如删除和修改函数。这时，我们需要使用bootstrap-table的一些事件。在上面的例子中，我在table中嵌入了两个按钮组件，如图所示。
这个马赛克是通过在table的属性中添加这样一行data-toolbar='#toolbar '来实现的。
这意味着在工具栏的一行中添加一个带有id工具栏的标签。
在这个项目中，我想通过这两个按钮单击表中选定的行。
写相应的事件。首先将一个选中的触发事件绑定到table，然后通过getSelectRow函数获取点击选中行的数据。
$('#teacher_table ')。on('click-row.bs.table '，函数(e，row，element)
{
$('.成功)。remove class(“success”)；//删除之前选择的线条，选择样式。
$(元素)。add class(“success”)；//添加当前选择的成功风格进行区分
});函数getSelectedRow()
{
var index=$('#teacher_table ')。find('tr.success ')。数据(“索引”)；//获取选中的行
return $('#teacher_table ')。bootstrapTable(' get data ')[index]；//返回选中行的所有数据
}
如果你还想深入学习，可以点击这里学习，并附上3个为你准备的精彩话题：
引导学习课程
自助实践课程
引导表教程
引导插件教程
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。