引导表使用方法详解
自举表使用总结
自举表是在自举表的基础上写出来的，专门用于显示数据的表格插件。而引导程序是来自推特，是目前最受欢迎的前端框架自举是基于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-严格。DTD ' 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=' http :/js/jquery-2。2 .1 .js/脚本脚本类型=' text/JAVAScript ' src=' http :/bootstrap/js/bootstrap。量滴js /脚本脚本类型=' text/JAVAScript ' src=' http :/引导表/引导表-全部。js/'脚本脚本类型=' text/JAVAScript ' src=' http :/bootstrap-table/locale/bootstrap-table-zh-cn。js '/脚本链接rel='样式表type='text/css' href=' ./bootstrap/CSS/bootstrap。量滴CSS ' link rel='样式表type='text/css' href=' ./引导表/引导表。量滴CSS/head脚本语言=' JavaScript '/脚本正文div class=' col-MD-offset-3 col-MD-6 ' div class=' panel panel-default ' div class=' panel-heading ' H3 class=' panel-title text-center '已添加教师账号/H3/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=' 真/跨度修改/button button id=' BTN _ delete ' type=' button ' class=' BTNBTN-默认' span class=' glyphicon glyphicon-remove ' aria-hidden=' true '/span删除/button/div table id=' teacher _ table ' data-toggle=' table ' data-URL=' . /数据。PHP ' data-method=' post ' data-query-params=' queryParams ' data-toolbar=' # toolbar ' data-paging=' true ' data-search=' true ' data-show-refresh=' true ' data-show-toggle=' true ' data-show-columns=' true ' data-page-size=' 5 ' the和tr th data-field=' name '用户账号第/th个数据字段='pwd '用户密码第/th个数据字段='t_name '教师姓名/th/tr/thead/table/div/div/body效果图：
好接下来我们分步骤剖析一下上面的代码的含义。
1.首先我们需要去下载相应的jquery自举自举表的包，这些网上都有教程，在此不再叙述如何下载。
由上面头标签中引用射流研究…和钢性铸铁文件名可知我们必须引进这几个文件。
注意自举，下载编译过的压缩包中只有三个文件夹css，字体，js
1.jquery-2.2.1.js -最新的jquery文件
2.bootstrap.min.js -最新的引导/js中bootstrap.min.js压缩文件
3.bootstrap.min.css -最新的引导/css中bootstrap.min.css压缩文件
4 .引导表all.js最新自举表下的射流研究…文件
5 .引导表-zh-CN.js -最新引导表/地区下的中文初始文件
6.bootstrap-table.min.css -最新的自举表下钢性铸铁压缩文件
这六个必须配置。bootstrap-table-zh-CN.js是一个支持中文的js文件。只有当这个文件被加载时，我们的一些表格显示信息才会被设置为中文。
我们来实验一下去掉bootstrap-table-zh-CN.js后的显示效果。
当然，我们也可以设置其他语言的显示信息，只需将bootstrap-table-zh-CN.js改为其他语言的js文件即可。引导表包中有支持。
我们也可以看看这个文件中的源代码，我们可以看到这个文件做了什么。
/** * Bootstrap Table中文翻译* Author:智信文[emailprotected] */(函数($) { '使用strict '；$ . fn . bootstraptable . locales[' zh-cn ']={ formatloading message 3360 function(){ return }正在尝试加载数据，请稍候.”；}，formatrecordsperpage :函数(pageNumber) {return '每页显示'页码'记录；}，formatshowingrows :函数(pageFrom，pageTo，totalRows) {return '显示从' page from '到' pageto '的记录，合计为' totalRows '；}，formatsearch :函数(){返回' search '；}，format nomacets : function(){返回“未找到匹配的记录”；}，format pagination switch : function(){ return ' hide/show pagination '；}，format refresh : function(){ return ' refresh '；}，format toggle : function(){ return ' switch '；}，formatcolumns :函数(){ return ' column} };$.extend($ . fn . bootstraptable . defaults，$ . fn . bootstraptable . locales[' zh-CN '])；})(jQuery)；粗略看了一下，可以看到在引用了js文件之后，在加载的时候，我们祈祷初始化效果。将一些显示信息的内容转换成相应的内容。
2.接下来，我们来谈谈相关的html代码。事实上，与引导表相关的html代码只是这一部分
table id=' teacher _ table ' data-toggle=' table ' data-URL='。/data . PHP ' data-method=' post ' data-query-params=' queryParams ' data-toolbar=' # toolbar ' data-paging=' true ' data-search=' true ' data-show-refresh=' true ' data-show-toggle=' true ' data-show-columns=' true ' data-page-size=' 5 '第R个数据-字段='name '用户帐户/第th个数据-字段='pwd '用户密码/第th个数据-字段='t_name '教师姓名要知道有哪些款式和功能，一定是我一个人的九根牛一毛。授人以鱼不如授人以渔。我会告诉你在哪里可以找到这些类的含义。我们可以去bootstrap-table的专业网站给我找一个链接。如果是无效的，可以直接进入http://bootstrap-table.wenzhixin.net.cn/documentation
当然，你也可以在例子中看到一些例子
我们如何看待相应参数的含义？看到上面的图片，最右边有一些选项。您可以选择可以设置的表属性、行属性和可绑定事件。
单击表属性表选项，显示下图。首先，您可以看到标题名称用于js创建表，而属性用于html创建表。
举几个例子，上面的代码中有这么多参数，它们的意思是：
请求数据的网址。数据方法：请求方法。数据-高度：设置表格高度数据-查询-参数='queryParams ':设置数据-工具栏='#toolbar ':设置带有按钮的容器为工具栏。数据-分页='真':设置是否显示页码数据-搜索='真':设置搜索框数据-显示-刷新='真':设置刷新按钮数据-显示-切换='真':设置数据显示格式
现在你应该知道怎么检查了！
请注意，以下代码是核心，tr表示th的一行和一个网格，data-field='name '表示一行网格中的数据名称。您可以将数据字段理解为id，因为从后台传输的数据是根据数据字段以及数据发送给谁来区分的。
第一个数据字段='name '用户帐户/第一个数据字段='pwd '用户密码/第一个数据字段='t_name '教师姓名/第一个/第一个/第二个
如果不想用html静态生成，也可以用js动态生成。给出一个代码演示，要设置相关参数，只需使用上面提到的名称：options。例如，在html中设置数据请求的目标文件data-URL:“”。/data.php“只需声明url:”。js中的“/data.php”
$('#table ')。bootstrapTable({ columns :[{ field : ' ID '，title: 'Item ID' }，{ field: 'name '，title: 'Item Name' }，{ field: 'price '，title: 'Item Price' })，data: [{ id: 1，name: 'Item 1 '，price: '$1' }，{ id:23.那么，其他代码是做什么的？他们中的一些人使用boostrap中的面板来设置格式，即在面板中嵌入表格。删除面板代码后，引导表的效果如下
它只是没有面板。
4.传输数据的格式。默认情况下，引导表接收的数据是json格式的
从上面可以看到，请求的后台地址是：’。/data.php '。我们来看看他的内容。
？PHP $ results[0]=array(' name '=' aoze '，' pwd'=' 20132588 '，' t _ name'='张三')；$ results [1]=array ('name'=' Lisi '，' pwd'=' 1234 '，' t _ name '=' Lisi ')；$ results [2]=array ('name'='吴王'，' pwd'=' 44455 '，' t _ name'='王武')；echo JSON _ encode($ results)；很简单，不是吗？当然，这只是我写的一些测试数据，是从项目中的数据库中找到的。
5.当然，仅仅显示数据是不够的。我们需要与表进行交互，比如删除和修改，然后我们需要使用引导表的一些事件。在上面的例子中，我在表格中嵌入了两个按钮组件，如图所示
实现这种镶嵌的方法是在表的属性中添加这样一行数据-toolbar='#toolbar '
意思是在工具栏的一行添加一个带有id工具栏的标签。
在这个项目中，我想使用这两个按钮对表中选定的行执行相应的操作。
编写相应的事件，先为表绑定一个选中的触发事件，然后通过getSelectRow函数获取选中行的数据。
$('#teacher_table ')。on('click-row.bs.table '，函数(e，row，element) { $(')。成功)。removeClass(“成功”)；//删除先前选择的行，并选择样式$(元素)。addClass(“成功”)；//添加当前选中的成功风格进行区分})；函数getSelectedRow(){ var index=$(' # teacher _ table ')。find('tr.success ')。数据('索引')；//获取所选行返回$ ('# teacher _ table ')。引导表(' getdata ')[index]；//返回选中行的所有数据}如果你还想深入学习，可以点击这里学习，然后为你附上3个精彩话题：
引导学习教程
引导实用教程
引导表教程
引导插件教程
以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。
