第九章 BootstrapTable的使用

芝麻软件 2017-03-13

url handler

一、简介

BootstrapTable是一个Bootstrap 3 的表格插件,支持单选, 复选框, 排序, 分页等功能

官网:http://bootstrap-table.wenzhixin.net.cn/

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

二、常用属性

 1.开启查询

search: true,
searchAlign: "left",
searchOnEnterKey: true, //回车查询

2.显示刷新按钮

showRefresh: true,

3.单选/多选

singleSelect: true,
maintainSelected: false,

4.开启分页

pagination: true,

sidePagination:'client' //或 'server' ,服务端必须使用url或ajax获取数据

客户端分页的数据格式:

[
    {
        "id": 0,
        "name": "Item 0",
        "price": "$0"
    },
]

服务端分页的数据格式:

{
    "total": 200,
    "rows": [
        {
            "id": 0,
            "name": "Item 0",
            "price": "$0"
        }, 
    ]
}

 

5.数据源

responseHandler: handler,

function handler(res) {
  return res; //如果使用server分页,这里使用res.row
}

6.单元格的格式化

  如行的删除按钮

$table.bootstrapTable({ 
                columns: [ 
                    {
                        title: '操作',
                        align: 'center',
                        field: 'Status',
                        valign: 'middle',
                        formatter: formatOperat
                    } 
                ]
            })
            
            
function formatOperat(value, row, index) {
    return ['<button type="button" onclick="deleteItem(\'' + row.Id + '\')" >移除</button>'];
}

 

 

三、bug记录

1.三个联动table的使用jQuery Event的click-row.bs.table事件

如: 点击table1的行3次,在点击table2的行,这时候会导致连接table3的url进行了3次

$table1.on("click-row.bs.table", function (row, event) {
    showTable2(event.Id);//显示第二个联动table
});
$table2.on("click-row.bs.table", function (row, event) {
    showTable3(event.Id);//显示第三个联动table
}); 

解决:使用他自带的Option Event的onClickRow事件

 

  
   
$table.bootstrapTable({
                url: url,
                dataType: "json",
                search: true,
                searchAlign: "left",
                buttonsAlign: "left",
                showRefresh: true,
                searchOnEnterKey: true,
                clickToSelect: true,
                singleSelect: true,
                maintainSelected: false,
                responseHandler: handler,
                idField: "Id",
                onClickRow: function (row, $element, field) { 
                    showTable2(row.Id); 
                    ....//省略
                },
                columns: [
                      {
                          field: 'state',
                          radio: 'true'
                      }, 
                      ...//省略
                    {
                        title: '操作',
                        align: 'center',
                        field: 'Status',
                        valign: 'middle',
                        formatter: formatOperat
                    }

                ]
            })

 2.使用radio,并启用clickToSelect: true, ,出现BUG:点击radio无反应

场景:实现点击行刷新另外一张表,但点击最后一个单元格不执行该操作,因为最后单元格自定义了自己的一系列操作

解决方法

  解析:启用clickToSelect后,单击行会自动选中chebox或者radio,触发onCheck事件;

    onCheck中如果直接写执行代码,但这些代码是和onClickCell是一样的,那么导致重复执行;

    最后通过引入外部curField来控制解决。

  代码:

            var curField = 0;
            $table.bootstrapTable({
                url: "/Get?Id=1",
                dataType: "json",
                search: true,
                searchAlign: "left",
                buttonsAlign: "left",
                showRefresh: true,
                searchOnEnterKey: true,
                clickToSelect: true,
                singleSelect: true,
                selectItemName: "custonSelectItem",
                striped: true,
                maintainSelected: false,
                responseHandler: handler,
                idField: "Id",
                onClickCell: function (field, value, row, $element) {
                    curField = 1;
                    if (field !== "Status") {
                        //执行代码
                    }
                },
                onCheck: function (row, $element) {
                    if (curField === 0) {
                        //执行代码
                    } else {
                        curField = 0;
                    }
                },
                columns: [
                    {
                        field: 'state',
                        radio: 'true'
                    },
                    {
                        title: '名称',
                        field: 'Name',
                        align: 'center',
                        valign: 'middle'

                    },
                    {
                        title: '操作',
                        align: 'center',
                        field: 'Status',
                        valign: 'middle',
                        formatter: formatOperat
                    }
                ]
            });

 

登录 后评论
下一篇
云栖号资讯小编
33325人浏览
2020-07-13
相关推荐
前端学习系列教程
893人浏览
2017-09-01 12:54:00
第九章 集合
1020人浏览
2018-09-15 19:05:00
1
0
1
955