• bootstrap-table使用总结


    1、下载:

    https://github.com/wenzhixin/bootstrap-table

    2、文档:

    http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

    3、引用:

    1. <link rel="stylesheet" href="bootstrap.min.css">
    2. <link rel="stylesheet" href="bootstrap-table.css">
    3. <script src="jquery.min.js"></script>
    4. <script src="bootstrap.min.js"></script>
    5. <script src="bootstrap-table.js"></script>
    6. <script src="bootstrap-table-zh-CN.js"></script>

    注意:最后一个是一些提醒文字,如果有引用这个js则会以中文提示,如果没有则以英文提示。

    4、基本用法:

    html里:

    <table id="table"></table>

    js里:

    1. $('#table').bootstrapTable({
    2. columns: [{
    3. field: 'id',
    4. title: 'Item ID'
    5. }, {
    6. field: 'name',
    7. title: 'Item Name'
    8. }, {
    9. field: 'price',
    10. title: 'Item Price'
    11. }],
    12. data: [{
    13. id: 1,
    14. name: 'Item 1',
    15. price: '$1'
    16. }, {
    17. id: 2,
    18. name: 'Item 2',
    19. price: '$2'
    20. }]
    21. });

    这个data也可以换成url:

    1. $('#table').bootstrapTable({
    2. url: 'data1.json',
    3. columns: [{
    4. field: 'id',
    5. title: 'Item ID'
    6. }, {
    7. field: 'name',
    8. title: 'Item Name'
    9. }, {
    10. field: 'price',
    11. title: 'Item Price'
    12. }, ]
    13. });


    注意:url和data的区别是:url是异步请求远程数据;data是直接把数据赋值给他。在主表和子表都一样可以这样使用。


    5、引入fonts:

    一些图标需要用到bootstrap里面的文件,要从下载的bootstrap包里面拷贝过来放到对应的目录(看错误提醒)。

    但是只放进去是访问不了的,因为他不是普通的文件,所以要设置。

    进入iis管理器,找到“MIME类型”,双击进去,在右边菜单点击“添加”,分别添加以下类型:

    1. .woff
    2. application/x-font-woff
    3. .woff2
    4. application/x-font-woff

    再刷新页面就可以加载fonts里面这些文件了。


    6、定制组件


    1. (function () {
    2. function init(table,url,params,titles,hasCheckbox,toolbar) {
    3. $(table).bootstrapTable({
    4. url: url, //请求后台的URL(*)
    5. method: 'post', //请求方式(*)
    6. toolbar: toolbar, //工具按钮用哪个容器
    7. striped: true, //是否显示行间隔色
    8. cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
    9. pagination: true, //是否显示分页(*)
    10. sortable: false, //是否启用排序
    11. sortOrder: "asc", //排序方式
    12. queryParams: queryParams, //传递参数(*),这里应该返回一个object,即形如{param1:val1,param2:val2}
    13. sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
    14. pageNumber:1, //初始化加载第一页,默认第一页
    15. pageSize: 20, //每页的记录行数(*)
    16. pageList: [20, 50, 100], //可供选择的每页的行数(*)
    17. search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
    18. strictSearch: true,
    19. showColumns: true, //是否显示所有的列
    20. showRefresh: true, //是否显示刷新按钮
    21. minimumCountColumns: 2, //最少允许的列数
    22. clickToSelect: true, //是否启用点击选中行
    23. //height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
    24. uniqueId: "ID", //每一行的唯一标识,一般为主键列
    25. showToggle:true, //是否显示详细视图和列表视图的切换按钮
    26. cardView: false, //是否显示详细视图
    27. detailView: false, //是否显示父子表
    28. columns: createCols(params,titles,hasCheckbox),
    29. data: [{
    30. id: 1,
    31. name: 'Item 1',
    32. price: '$1'
    33. }, {
    34. id: 2,
    35. name: 'Item 2',
    36. price: '$2'
    37. }]
    38. });
    39. }
    40. function createCols(params,titles,hasCheckbox) {
    41. if(params.length!=titles.length)
    42. return null;
    43. var arr = [];
    44. if(hasCheckbox)
    45. {
    46. var objc = {};
    47. objc.checkbox = true;
    48. arr.push(objc);
    49. }
    50. for(var i = 0;i<params.length;i++)
    51. {
    52. var obj = {};
    53. obj.field = params[i];
    54. obj.title = titles[i];
    55. arr.push(obj);
    56. }
    57. return arr;
    58. }
    59. //可发送给服务端的参数:limit->pageSize,offset->pageNumber,search->searchText,sort->sortName(字段),order->sortOrder('asc'或'desc')
    60. function queryParams(params) {
    61. return { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
    62. limit: params.limit, //页面大小
    63. offset: params.offset //页码
    64. //name: $("#txt_name").val()//关键字查询
    65. };
    66. }
    67. // 传'#table'
    68. createBootstrapTable = function (table,url,params,titles,hasCheckbox,toolbar) {
    69. init(table,url,params,titles,hasCheckbox,toolbar);
    70. }
    71. })();




    1、调用:

    createBootstrapTable('#table','',['id','name','price'],['Item ID','Item Name!','Item Price!'],true,'#toolbar');


    2、模块:

    注意,这些只要添加上一行代码就会自动显示的:

    1. pagination 显示分页
    2. search 搜索功能
    3. showColumns 控制显示哪些列的按钮
    4. showRefresh 刷新按钮
    5. showToggle 详细视图和列表视图切换按钮

    但是这个不会:

    toolbar

    这个toolbar会关联到我们填的一个元素,但是他并不会自动创建所有菜单,而是我们要创建好菜单,他只不过把这个菜单放到合适的位置,实现这些菜单的功能还需要我们自己去做。toolbar如下:

    1. <div id="toolbar" class="btn-group">
    2. <button id="btn_add" type="button" class="btn btn-default">
    3. <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
    4. </button>
    5. <button id="btn_edit" type="button" class="btn btn-default">
    6. <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
    7. </button>
    8. <button id="btn_delete" type="button" class="btn btn-default">
    9. <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
    10. </button>
    11. </div>

    3、sidePagination

    这个是选择服务端或者客户端分页,客户端则填'client',服务端则填'server',他们的数据结构是不同的。

    这是客户端分页的数据结构:

    1. [
    2. {
    3. "id": 0,
    4. "name": "Item 0",
    5. "price": "$0"
    6. },
    7. {
    8. "id": 1,
    9. "name": "Item 1",
    10. "price": "$1"
    11. },
    12. {
    13. "id": 2,
    14. "name": "Item 2",
    15. "price": "$2"
    16. }
    17. ]

    这是服务端分页的数据结构:

    1. {
    2. "total": 200,
    3. "rows": [
    4. {
    5. "id": 0,
    6. "name": "Item 0",
    7. "price": "$0"
    8. },
    9. {
    10. "id": 1,
    11. "name": "Item 1",
    12. "price": "$1"
    13. },
    14. {
    15. "id": 2,
    16. "name": "Item 2",
    17. "price": "$2"
    18. }
    19. ]
    20. }


    这是因为客户端来分页的话,他直接根据数据总量进行判断要分成多少页,而服务端的话就需要返回一个total给他,因为服务端返回给的数据是一个片段,他没办法根据这个片段来计算多少页。


    注意:这里可以看到,服务端分页和客户端分页数据结构的层次是不同的。他接受哪种数据结构,取决于是否加这个参数:

    sidePagination:'server'
    特别是做子表的时候,因为觉得没有做分页的必要,就没了这句话,结果就是数据过去了死活不显示,排查很久才发现是这个问题。

    4、参数上传

    我们知道,当我们对table设置一个url的时候,他不仅是请求这个url,他还会带一些参数上来,他到底带来了什么参数?

    我们来一个最简单的测试一下:

    1. $('#table').bootstrapTable({
    2. striped: true,
    3. pagination:true,
    4. sidePagination:'server',
    5. url:'/xx/yy',
    6. columns: [{
    7. field: 'id',
    8. title: 'Item ID'
    9. }, {
    10. field: 'name',
    11. title: 'Item Name'
    12. }, {
    13. field: 'price',
    14. title: 'Item Price'
    15. }]
    16. });

    这里我们简单的初始化了一个bootstrap-table,数据来源我们指定了url,有个参数叫method,默认是'get',也可以设为'post',如果实际上线最好设为'post',但是这里我们就用默认的好了,可以直接在浏览器的控制台看到他请求的参数。


    我们可以看到带了一些参数上来

    (1)order=asc表示排序是升序排序,这个我们可以在参数里面设置:sortOrder: "asc/desc"(两种选一种)

    (2)offset=0表示从数据从哪个row开始,简单的说从第几行数据开始

    (3)limit=10表示选取多少个数据,也就是一页有多少条数据

    2,3跟参数pageNumber和pageSize是紧密关联的。

    pageSize对应的就是limit,因此改变pageSize就改变了limit;

    pageNumber结合pageSize可以算出offset。

    比如pageNumber=1,pageSize=30,那么offset=0,limit=30;

    比如pageNumber=2,pageSize=30,那么offset=30,limit=30。

    他不传第几页上来,而是传从第几行开始,选取多少行,这样一个数据。

    注意:pageNumber从1开始而非从0开始,但是offset是从0开始的。

    如果我尝试设置pageNumber:0,pageSize:30我们会发现offset=-30,limit=30,这是不对的。

    5、参数的查看、修改

    那么我们可以直接查看这些参数以及修改吗?答案是可以的。

    有个原始参数就是用来配置这个:

    queryParams:testQParams

    创建函数:

    1. function testQParams(params) {
    2. alert('params.limit='+params.limit+' params.offset='+params.offset);//我们可以这样查看这些要上传的参数
    3. }

    我们当然可以修改或者添加参数:

    1. function testQParams(params) {
    2. return {
    3. limit:params.limit,
    4. offset:params.offset,
    5. order:params.order,
    6. abc:123,
    7. def:456
    8. }
    9. }

    有几点要注意:

    1、我们当然可以修改limit、offset这些参数,但是不建议在这里改,我们可以用上面这种方式还给他赋值;

    2、虽然没有改动他,我们也不要丢了,如果在这里没写参数就丢了,传递的参数会以这里的为准;

    3、我们可以增加新的参数。


    7、显示图片

    字段通常是一个地址,那么我们要显示图片应该使用formatter:

    1. {
    2. field: 'thumb_img',
    3. title: '主图',
    4. align: 'center',
    5. formatter:function (value,row,index) {
    6. return '<img src='+value+' width=50 class="img-rounded" >';
    7. }
    8. }

    可以直接定义宽度,图片会自动进行缩放。


    8、行内编辑功能

    <1>bootstrap-editable

    需要一个bootstrap插件叫做bootstrap-editable,现在改名叫做x-editable了,可以适用不同的框架。

    地址:https://github.com/vitalets/x-editable

    下载下来之后,找到dist/bootstrap3-editable里面的3个文件夹css,js,img都拷贝到我们的网站目录下。

    <2>bootstrap-table-editable

    这是一个bootstrap-table的插件(插件的插件),这个插件呢就在我们下载的bootstrap-table包里,路径是dist/extensions/editable

    把他拷到我们的对应目录下即可

    <3>引入

    1. <link href="<?php echo '/static/bootstrap/extensions/editable/css/bootstrap-editable.css'; ?>" rel="stylesheet">
    2. <script src="<?php echo '/static/bootstrap/extensions/editable/js/bootstrap-editable.js'; ?>"></script>
    3. <script src="<?php echo '/static/bootstrap-table/extensions/editable/bootstrap-table-editable.js'; ?>"></script>

    注意他们跟jquery、bootstrap、bootstrap-table的依赖关系,所以要放在他们的后面。


    <4>使用1:

    在列定义里面加上editable:true,比如:

    1. field:'addr',
    2. title:'地址',
    3. editable:true,

    就会变成可编辑状态了


    <5>使用2:

    编辑完成我们要添加一个回调

    在bootstrapTable顶级的属性定义里面,添加一个回调函数:

    1. onEditableSave:function (field,row,oldValue,$el) {
    2. //alert('保存addr='+row.addr+' id='+row.itemid);
    3. }

    这里我们可以看到当编辑完保存的时候就会调用到这个函数,在row里面有所有当前行的信息,那么我们可以通过把这个信息用ajax传递到服务器保存起来。

    编辑功能完成。


    <6>保存验证+ajax保存确认+取消保存

    我们在实际开发当中,经常需要这样的功能:

    (1)验证用户的输入是否正确;

    (2)如果用户输入不正确,就不要在页面上显示了,直接显示保存不了;

    (3)如果用户输入正确,通过ajax请求保存到后台;

    (4)如果保存到后台失败,应该返回前端失败的消息,前端的内容回退到保存前的状态;

    (5)如果保存成功,前端也做相应的显示样式调整及状态确定。

    在上面“使用1”及“使用2”当中,当点击保存的时候,在save函数里验证不起作用,你再验证他也保存进去了。所以验证另有地方。

    应该这样做:

    (1)把editable:true改为:

    1. validate:function (value) {
    2. value = $.trim(value);
    3. if (!value)
    4. {
    5. return '必须填入一个网址,不能放空!';
    6. }
    7. if (!checkUrl(value))
    8. {
    9. return '输入的不是一个合法的网址!';
    10. }
    11. }

    另外,在这个函数里,要取的row数据可以这样:

    1. var data = $('#table').bootstrapTable('getData');
    2. var index = $(this).parents('tr').data('index');
    3. console.log(data[index]);

    这是因为这个$(this)可以指向这个当前单元格

    这样输入就有验证功能,return一个字符串他会自动不保存进去,而显示这个字符串的提示。

    注意,验证的保存规则:

    如果return '';  则会保存空字符串;

    如果return 'xxx';  则不会保存这个字符串,而是作为提示显示出来;

    如果不return,则按照原value保存。

    (2)把onEditableSave改为:

    1. onEditableSave:function (field,row,oldValue,$el) {
    2. // 测试证明oldValue取到的是undefined
    3. $.post('xxx/yyy')
    4. .done(function (result) {
    5. //在这里解析result
    6. if(保存成功)
    7. {
    8. // 页面提示保存成功
    9. }else
    10. {
    11. // 页面提示保存失败
    12. // buy_addr_bak这个字段是从服务端传过来与buy_addr等值的一个字段,就是为了在必要的时候恢复数据
    13. $el.text(row.buy_addr_bak);
    14. }
    15. // 不管保存成功还是失败,已经不是编辑状态,把加粗去掉
    16. $el.removeClass('editable-unsaved');
    17. });
    18. }

    另外,在这个函数里,如果要取到row数据可以这样(虽然这里没有必要,参数里已经有了):

    1. var data = $('#table').bootstrapTable('getData');
    2. var index = $el.parent().parents('tr').data('index');//注意这里一个是parent,一个是parents
    3. console.log(data[index]);


    9、自动换行

    在给table加上样式:

    style="word-break:break-all; word-wrap:break-all;"

    10、父子表

    功能:点击行首的加号,下拉展开一个子表

    <1>在父表的属性里添加

    detailView:true

    <2>添加回调函数

    1. onExpandRow:function (index,row,$detail) {
    2. initSubTable(index,row,$detail);
    3. }

    当点击行首的加号,将会触发这个回调函数,这个回调函数会再去调用执行函数。


    <3>执行函数

    1. function initSubTable(index,row,$detail) {
    2. var parentid = row.MENU_ID;
    3. var cur_table = $detail.html('<table></table>').find('table');//注意这个'table'不是一个id,他在任何情况下不需要改变
    4. $(cur_table).bootstrapTable({
    5. url:'',
    6. method:'post',
    7. queryParams:{strParentID:parentid},
    8. ajaxOptions:{strParentID:parentid},
    9. clickToSelect:true,
    10. detailView:true,
    11. uniqueId:"MENU_ID",
    12. pageSize:10,
    13. pageList:[10,25],
    14. columns:[
    15. {
    16. filed:'from',
    17. title:'from'
    18. },
    19. {
    20. field:'url',
    21. title:'url'
    22. },
    23. {
    24. field:'to',
    25. title:'to'
    26. }
    27. ],
    28. onExpandRow:function (index,row,$Subdetail) {
    29. initSubTable(index,row,$Subdetail);
    30. }
    31. });
    32. }

    注意,这里做了一个递归,即子表里面还可以展开孙表,我们也可以不需要,去掉就可以了。

    11、刷新功能

    1. $('#table_search').bootstrapTable(
    2. "refresh",
    3. {
    4. url:"/japp/autobuy/ajaxorder/search"
    5. }
    6. );



    参考文章:

    http://www.cnblogs.com/landeanfen/p/4976838.html


    原文地址:https://blog.csdn.net/wzj0808/article/details/59104035
  • 相关阅读:
    要给自己留时间思考
    联表更新 Update Left Join
    SQLServer2014内存优化表评测
    SQL Server中数据库文件的存放方式,文件和文件组
    {好文备份}SQL索引一步到位
    qt调用js,js调用qt
    【转】vs2010打开qt的.pro文件时错误解决办法
    qt多线程信号槽传输方式
    【转】设置Qt应用程序图标及应用程序名
    【转】Qt多线程操作界面---在QThread更新QProgressBar
  • 原文地址:https://www.cnblogs.com/jpfss/p/10267118.html
Copyright © 2020-2023  润新知