一、简介

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,
clickToSelect: true,//点击行则选中
maintainSelected: false,//分页仍然选中
columns: [
  {
    field: 'Id',
    checkbox: true
  }]

获取选中的id列表

function deleteAll() {
var selection = $table.bootstrapTable('getSelections');
if (selection.length == 0) {
toastr.info('请至少选中一行记录');
return false;
}
swdel({},
function () {
var selects = new Array();
$.each(selection,
function (index, value, array) {
selects.push(value.Id);
}); $.post(deleteAllUrl,
{ "Id": selects },//后台获取Request.Form["id[]"]
function(result) {
if (result) {
if (result.code >= 0) {
toastr.success(result.msg, "操作成功");
                      $table.bootstrapTable('uncheckAll');//清空选中选中
$table.bootstrapTable('refresh');
} else {
toastr.warning(result.msg, "操作失败");
}
} else {
toastr.warning('请求失败');
}
},'json');
});
};

如果开启多选,查询的时候,使用 $table.bootstrapTable('uncheckAll');清除已选选项

4.开启分页

pagination: true,

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

客户端分页的数据格式:

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

服务端分页的数据格式:

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

5.数据源

后台模型

public class PagerDataModel<T>
{
public int total { get; set; }
public List<T> rows { get; set; }
public int page { get; set; } public PagerDataModel<T> Init(int skip,int limit)
{
this.page = (skip / limit) + ;
return this;
} public PagerDataModel( int skip, int limit)
{
Init(skip, limit);
}
}

分页接收的json格式: {total:0,page:0,rows:[{id:1}

$table.bootstrapTable({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>'];
}

7.行样式

直接css或class控制样式,

以下是隔行变色的写法,此效果使用 data-striped="true"可实现,这里用来做示例。

缺点:使用checkBox,它的背景色不会改变,

rowStyle: function (row, index) {
if (index % 2) {
//return { classes: "bg-info" };
return { css: { "background-color": "#f8f8f8" } };
}
return { classes: "" };
},

三、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 = ;
$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 = ;
if (field !== "Status") {
//执行代码
}
},
onCheck: function (row, $element) {
if (curField === ) {
//执行代码
} else {
curField = ;
}
},
columns: [
{
field: 'state',
radio: 'true'
},
{
title: '名称',
field: 'Name',
align: 'center',
valign: 'middle' },
{
title: '操作',
align: 'center',
field: 'Status',
valign: 'middle',
formatter: formatOperat
}
]
});

第九章 BootstrapTable的使用的更多相关文章

  1. 精通Web Analytics 2.0 (11) 第九章: 新兴分析—社交,移动和视频

    精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第九章: 新兴分析-社交,移动和视频 网络在过去几年中发生了不可思议的发展变化:从单向对话到双向对话的转变; 由视频,Ajax和 ...

  2. 第九章:四大组件之Broadcast Receiver

    第九章:四大组件之Broadcast Receiver   一.广播的功能和特征 广播的生命周期很短,经过调用对象-->实现onReceive-->结束,整个过程就结束了.从实现的复杂度和 ...

  3. [Effective Java]第九章 异常

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  4. 第九章 C语言在嵌入式中的应用

    上章回顾 编码的规范和程序版式 版权管理和申明 头文件结构和作用 程序命名 程序注释和代码布局规范 assert断言函数的应用 与0或NULL值的比较 内存的分配和释放细节,避免内存泄露 常量特性 g ...

  5. Laxcus大数据管理系统2.0(11)- 第九章 容错

    第九章 容错 在当前,由于集群庞大的组织体系和复杂性,以及用户普遍要求低成本硬件,使得集群在运行过程中发生的错误概率,远远高于单一且性能稳定的小型机服务器,并且集群在运行过程中几乎是不允许停止的,这就 ...

  6. Android群英传》读书笔记 (4) 第八章 Activity和Activity调用栈分析 + 第九章 系统信息与安全机制 + 第十章 性能优化

    第八章 Activity和Activity调用栈分析 1.Activity生命周期理解生命周期就是两张图:第一张图是回字型的生命周期图第二张图是金字塔型的生命周期图 注意点(1)从stopped状态重 ...

  7. [转]Windows Shell 编程 第九章 【来源:http://blog.csdn.net/wangqiulin123456/article/details/7987969】

    第九章 图标与Windows任务条 如果问一个非程序人员Windows最好的特色是什么,得到的答案应该是系统最有吸引力的图标.无论是Windows98现在支持的通用串行总线(USB)还是WDM(看上去 ...

  8. perl5 第九章 关联数组/哈希表

    第九章 关联数组/哈希表 by flamephoenix 一.数组变量的限制二.定义三.访问关联数组的元素四.增加元素五.创建关联数组六.从数组变量复制到关联数组七.元素的增删八.列出数组的索引和值九 ...

  9. Knockout应用开发指南 第九章:高级应用举例

    原文:Knockout应用开发指南 第九章:高级应用举例 1   Contacts editor 这个例子和微软为演示jQuery Data Linking Proposal例子提供的例子一样的提供的 ...

随机推荐

  1. CentOS7 nginx简单配置pathinfo模式(ThinkPHP)

    location ~ \.php {    #去掉$ root          H:/PHPServer/WWW; fastcgi_pass   127.0.0.1:9000; fastcgi_in ...

  2. 3、C#基础 - C# 的 Hello World

    HelloWorld,是学会程序的通用起手式了,哈哈. 打开我们的VS:文件\新建\项目 选择"控制台应用(.NET Framework)",名称改为"HelloWorl ...

  3. javac 小记

    javac 到底是什么? javac 就是一个编译器,它把 Java 源代码编译成 Java 字节码,即 JVM 能够识别的二进制形式的文件. javac 由什么构成? 词法分析器:识别源代码中的 J ...

  4. Android注解方式实现表单校验

    在开发中总会遇到输入框的输入规则限制 比如 电话输入框电话号码的校验,密码规则的校验等 ,我们通常做法是提交操作时对每个输入框的输入内容进行校验,很多的if else ,代码看起来很乱,其实我们可以用 ...

  5. mouseenter和mouseover的区别

    mouseover事件-不论鼠标指针穿过被选元素或其子元素,都会触发. mouseenter事件-只有在鼠标指针穿过被选元素时才会触发,对应事件为mouseleave. mouseout事件-不论鼠标 ...

  6. Linux下实现视频读取(三)---Buffer的准备和数据读取

    前面主要介绍的是:V4L2 的一些设置接口,如亮度,饱和度.曝光时间,帧数,增益.白平衡等.今天看看V4L2 得到数据的几个关键ioctl,Buffer的申请和数据的抓取. 1. 初始化 Memory ...

  7. Javascript--cookie创建与查看

    创建cookie 以下代码将创建一个cookie,该cookie名称为UserName,值为Paul,过期时间为7天后(2015年6月29日) <span style="font-si ...

  8. python的unittest測试框架的扩展浅谈

    非常多时候測试框架须要依据測试数据来自己主动生成測试用例脚本,比方接口測试,通过不同參数构建组合去请求接口,然后验证返回结果.假设这样能通过配置excel数据来驱动測试.而不用去写一大堆的測试用例脚本 ...

  9. 关于UTF8文件带BOM头可能会引起的错误解析

    今天在做一个文件上传的项目中碰到了一个十分奇怪的问题,在解析上传上来的csv文件时,总是在解析第一行的第一个标题字段时出错,就是第一个那个字段总是和对应的model字段对应不上,这个坑是真的很深,找了 ...

  10. 【转载】JAVA中综合接口和抽象类实现的一种“抽象接口”

    Muscleape个人总结:(这里的抽象接口是指:使用一个抽象类实现一个接口,是两部分结构) 使用一个抽象类直接实现接口,将接口中的方法区分为实现类必须要实现的和选择性实现的,其他需要实现接口的类型通 ...