第九章 BootstrapTable的使用-阿里云开发者社区

开发者社区> 芝麻软件> 正文

第九章 BootstrapTable的使用

简介: 一、简介 BootstrapTable是一个Bootstrap 3 的表格插件,支持单选, 复选框, 排序, 分页等功能 官网:http://bootstrap-table.wenzhixin.net.
+关注继续查看

一、简介

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
                    }
                ]
            });

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Android开发教程 - 使用Data Binding(七)使用BindingAdapter简化图片加载
本系列目录 使用Data Binding(一)介绍 使用Data Binding(二)集成与配置 使用Data Binding(三)在Activity中的使用 使用Data Binding(四)在Fragment中的使用 ...
775 0
ACCESS 触发器delete table事件变量使用及连续删除
    ACCESS的TABLE DELETE 事件触发后,会出现一个[旧]的记录,这条记录非常有用,可以用来作条件判断使用。     如下图的table event事件中,删除一条记录后,可以使用[旧]记录连接执行多个删除相关记录的操作。
582 0
React中使用Ant Table组件
一、Ant Design of React   http://ant.design/docs/react/introduce 二、建立webpack工程     webpack+react demo下载     项目的启动,参考 三、简单配置   1.工程下载下来之后,在src目录下新建目录“table”,新建app.js,内容如下。
1084 0
.NET数据库编程求索之路--4.使用ADO.NET实现(三层架构篇-使用Table传递数据)(2)
4.使用ADO.NET实现(三层架构篇-使用Table传递数据)(2) 作者:夏春涛 xchunta@163.com 转载请注明来源:http://www.cnblogs.com/SummerRain/archive/2012/07/25/2609132.
497 0
apt-get 使用指南
命令 下面将要介绍的所有命令都需要sudo!使用时请将“packagename”和“string”替换成您想要安装或者查找的程序。 apt-get update——在修改/etc/apt/sources.list或者/etc/apt/preferences之後运行该命令。此外您需要定期运行这一命令以确保您的软件包列表是最新的。 apt-get install pac
1058 0
.NET数据库编程求索之路--4.使用ADO.NET实现(三层架构篇-使用Table传递数据)(3)
4.使用ADO.NET实现(三层架构篇-使用Table传递数据)(3)   作者:夏春涛 xchunta@163.com 转载请注明来源: http://www.cnblogs.com/SummerRain/archive/2012/07/25/2609144.
868 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10249 0
Androd listView之BaseAdapter的基本使用模式
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.
508 0
SmartRefreshLayout + BaseRecyclerviewAdapterHelper 使用MVP方式实现下拉刷新
关键字:SmartRefreshLayout使用 下拉刷新 上拉加载 BaseRecyclerviewAdapterHelper 前言 下拉刷新和上拉加载是每个APP中最基本的功能,这里将这个功能进行整理。
3660 0
ASP.Net:Table类的使用
在做Asp.Net的时候,很多情况下数据的绑定都是使用GridView或者我之前提到的ListView,但是这两个适合用于数据的绑定,而有些时候,数据需要在后台进行处理,例如数据据内地某一条数据的特殊样式等等,当然也可以在绑定的时候处理,可是那些需要汇总的,和需要表格合并的,在操作起来可能就有一些麻烦了。
649 0
+关注
芝麻软件
编程语言,框架相关专家
579
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载