bootstrap table使用总结
使用bootstrap table可以很方便的开发后台表格，对数据进行异步更新，编辑。下面就来介绍一下bootstrap table的详细使用方法：
因为之前在官网也找了很久的教程，源码感觉隐藏的比较隐秘，其他扩展功能也很难找到，其实都在：http://issues.wenzhixin.net.cn/bootstrap-table/index.html这里面，点击上面的tab可以找到具体的功能实现（特别是extension和issues，之前以为issues不是教程，结果点进去才知道）：
最简单的异步表单
1.html中加入如下代码：
<table id="table"></table>- 1
2.javascript
/*bootstrap table*/
$('#table').bootstrapTable({
url:"/wadmin/permission/doRuleList",//请求数据url
queryParams: function (params) {
return {
offset: params.offset, //页码
limit: params.limit, //页面大小
search : params.search, //搜索
order : params.order, //排序
ordername : params.sort, //排序
};
},
showHeader : true,
showColumns : true,
showRefresh : true,
pagination: true,//分页
sidePagination : 'server',//服务器端分页
pageNumber : 1,
pageList: [5, 10, 20, 50],//分页步进值
search: true,//显示搜索框
//表格的列
columns: [
{
field: 'id',//域值
title: '规则ID',//标题
visible: true,//false表示不显示
sortable: true,//启用排序
width : '5%',
},
{
field: 'name',//域值
title: '唯一英文标识',//标题
visible: true,//false表示不显示
sortable: true,//启用排序
width : '30%',
editable:true,
},
{
field: 'title',//域值
title: '中文描述',//内容
visible: true,//false表示不显示
sortable: true,//启用排序
width : '35%',
editable:true,
},
{
field: 'status',//域值
title: '状态',//内容
visible: true,//false表示不显示
sortable: true,//启用排序
width : '20%',
formatter : function (value, row, index) {
if (row['status'] === 1) {
return '正常';
}
if (row['status'] === 0) {
return '禁用';
}
return value;
}
}
]
});上面代码中，除了url和下面的column需要动态变之外，其他的基本上都是固定的，可以复制粘贴到处使用。因为规则的固定，所以后台的规则也是比较固定的。
3.thinkPHP5.0实现后台（主要是返回total和rows）
controller
public function doRoleRuleList() {
$id = input("id");
if (!$id) return "";
$limit = input("limit");
$offset = input("offset");
$search = input("search");
$order = input("order", "desc");
$ordername = input("ordername");
if (!$ordername) {
$ordername = 'id';
$order = 'desc';
}
$perModel = new PermissionModel();
$rs = $perModel->doRoleRuleList($id, $offset, $limit, $search, $order, $ordername);
return json($rs);
}model
public function doRoleRuleList($id, $offset, $limit, $search, $order, $ordername) {
$total = Db::connect("dbUser")->table("auth_rule")->where(['status'=>['<>', 0]])->count();
$auth_group = Db::connect("dbUser")->table("auth_group")->field("id,rules")->where("id", $id)->find();
$rules ="-1";
if ($auth_group && $auth_group['rules']) $rules = $auth_group['rules'];
$rows = Db::connect("dbUser")->table("auth_rule")
->field(['id','name','title',"if(id in ({$rules}), 1, 0)"=>'selected'])
->where([
'status'=>['<>', 0],
// 'name|title' => ['like', "%{$search}%"]
])
->order($ordername." ".$order)
->select();
return ['total'=>$total,'rows'=>$rows];
}说明图：
复杂表格（行内编辑（编辑文字，下拉选择），样式改变，自定义图标，文件上传），因为js比较复杂，这里先列出代码功能的说明：
1.显示详情使用如下代码：
表格参数中添加代码
detailView : true,
detailFormatter : function (index, row) {
var image = '<div class="photos">'
+'<a target="_blank" href="'+row['jumpUrl']+'"><img alt="image" class="feed-photo" src="'+row['picUrl']+'"></a>'
+'</div>';
return image;
}可以在detailFormatter进行代码的格式化，以字符串的形式返回即可，实现效果如下：
2.表格列内容的格式化
列参数中添加代码
formatter : function (value, row, index) {
return "<img style='width: 50px;height: 50px;' src='"+value+"' alt=''>"
}效果如下：
3 . 表格的样式自定义
列参数中添加带代码
cellStyle : function (value, row, index) {
return {
css: {
"max-width": "300px",
"word-wrap": "break-word",
"word-break": "normal"
}
};
}4 . 新增数据
在js文件中添加如下代码：
$("#btn_add").click(function () {
$.ajax({
type : "POST",
url : "/wadmin/ad/addAd",
dataType : 'JSON',
success : function (data) {
if (data.result != 0) {
toastr.info("info", data.message);
return ;
}
toastr.success("success", '标签');
$("#table").bootstrapTable('insertRow', {index:0, row:data.data});
}
});
});绑定的按钮是toolbar里面的，点击如果进行ajax请求，再根据请求的结果自行判断添加
5.表格中列格式化成图标并监听事件
6.文件上传（基于5）
列参数中添加如下代码
{
field: 'operate',
title: '操作',
align: 'center',
events: operateEvents,
width : '25%',
formatter: operateFormatter
}operateFormatter（这里注意需要添加a标签包住图标，并添加class）
function operateFormatter(value, row, index) {
return [
'<a class="using" href="javascript:void(0)" title="Remove">',
'<i class="fa fa-check"></i>',
'</a> ',
'<a class="upload" style="cursor: pointer" href="javascript:void(0)" title="Upload">',
'<label style="cursor: pointer" for="'+row['adId']+'">',
'<i class="fa fa-upload"></i>',
'<input type="file" name="adUpload" style="display: none;" class="adUpload" id="'+row['adId']+'" >',
'</label>',
'</a> ',
'<a class="remove" href="javascript:void(0)" title="Using">',
'<i class="fa fa-times"></i>',
'</a>',
].join('');
}operateEvents（监听事件，注意这里是window.operateEvents）
window.operateEvents = {
'click .remove': function (e, value, row, index) {
$.ajax({
type : "POST",
url : "/wadmin/ad/deleteAd",
data : {
adId : row['adId']
},
dataType : 'JSON',
success : function (data) {
if (data.result != 0) {
toastr.info("info", data.message);
return ;
}
toastr.success("success", '删除成功');
$("#table").bootstrapTable('remove', {
field: 'adId',
values: [row['adId']]
});
}
});
return false;
},
'click .using': function (e, value, row, index) {
$.ajax({
type : "POST",
url : "/wadmin/ad/usingAd",
data : {
adId : row['adId']
},
dataType : 'JSON',
success : function (data) {
if (data.result != 0) {
toastr.info("info", data.message);
return ;
}
toastr.success("success", '使用该广告');
$("#table").bootstrapTable('refresh');
}
});
return false;
},
'click .upload': function (e, value, row, index) {
$('.adUpload').fileupload({
url : '/wadmin/ad/adUpload/adId/'+row['adId'],
dataType: 'json',
add: function (e, data) {
data.submit();
},
done: function (e, data) {
var response = data.result;
if (response.result != 0) {
toastr.error(response.message);
return false;
}
toastr.success("上传成功");
$("#table").bootstrapTable('refresh');
}
});
return false;
}
};实现的效果如下：
7.行内编辑
普通的编辑只需要在列参数中设置即可：
列参数中添加代码
editable : true,- 1
需要下拉编辑的，使用如下代码：
editable: {
type: 'select',
source: [ //0->无广告，1->静态不可点击，2->静态可点击，3->动态不可点击，4->动态可点击
{value: 0, text: '无广告'},
{value: 1, text: '静态不可点击'},
{value: 2, text: '静态可点击'},
{value: 3, text: '动态不可点击'},
{value: 4, text: '动态可点击'},
]
}这里还有一些行内编辑的样式是需要导入第三方lib的，比如说如果要实现行内时间的编辑，需要下载导入combodate.js ，然后添加如下代码（这些js文件后面会给出的，也可以去官网下载最新版）：
editable: {
type: 'combodate',
viewformat: 'YYYY-MM-DD HH:mm:ss',
template: 'YYYY-MM-DD HH:mm:ss',
format: 'YYYY-MM-DD HH:mm:ss',
combodate: {
minuteStep: 1,
secondStep: 1,
maxYear: 5000,
minYear: 2016,
}
}然后再表格参数中添加如下代码监听事件：
onEditableSave: function (field, row, oldValue, $el) {
$.ajax({
type: "post",
url: "/wadmin/ad/updateAdInfo",
dataType : 'json',
data: row,
success: function (data, status) {
if (status == "success" && data.result == 0) {
toastr.success('更新成功');
if (field == 'jumpUrl') {
$('#table').bootstrapTable("refresh");
}
return true;
} else {
toastr.info(data.message);
$('#table').bootstrapTable("refresh");
}
},
error: function () {
alert("Error");
},
complete: function () {
}
});
}实现的效果如下：
其中，调用bootstraptable的一些方法可以动态更新表格（增删改等），用法如下：
$("#table").bootstrapTable('insertRow', {index:0, row:data.data});
$("#table").bootstrapTable('remove', {
field: 'adId',
values: [row['adId']]
});
$("#table").bootstrapTable('refresh');
$("#table").bootstrapTable('updateCell', {
index : index,
field: 'status',
value: row['status'] ? 0 : 1
});因为引入的js和css库有点多，而且需要实现行内编辑的话需要需要引入的js文件比较难找，下面给出下载地址（密码：jjdk）：
http://pan.baidu.com/s/1bpiRObt
完整代码
html
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增广告
</button>
</div>
<table id="table"></table>javascript
/**
* Created by raid on 2016/12/28.
*/
$(function () {
window.operateEvents = {
'click .remove': function (e, value, row, index) {
$.ajax({
type : "POST",
url : "/wadmin/ad/deleteAd",
data : {
adId : row['adId']
},
dataType : 'JSON',
success : function (data) {
if (data.result != 0) {
toastr.info("info", data.message);
return ;
}
toastr.success("success", '删除成功');
$("#table").bootstrapTable('remove', {
field: 'adId',
values: [row['adId']]
});
}
});
return false;
},
'click .using': function (e, value, row, index) {
$.ajax({
type : "POST",
url : "/wadmin/ad/usingAd",
data : {
adId : row['adId']
},
dataType : 'JSON',
success : function (data) {
if (data.result != 0) {
toastr.info("info", data.message);
return ;
}
toastr.success("success", '使用该广告');
$("#table").bootstrapTable('refresh');
}
});
return false;
},
'click .upload': function (e, value, row, index) {
$('.adUpload').fileupload({
url : '/wadmin/ad/adUpload/adId/'+row['adId'],
dataType: 'json',
add: function (e, data) {
data.submit();
},
done: function (e, data) {
var response = data.result;
if (response.result != 0) {
toastr.error(response.message);
return false;
}
toastr.success("上传成功");
$("#table").bootstrapTable('refresh');
}
});
return false;
}
};
/*bootstrap table*/
$('#table').bootstrapTable({
url:"/wadmin/ad/doAdList",//请求数据url
toolbar : "#toolbar",
// toolbarAlign : "right",
queryParams: function (params) {
return {
offset: params.offset, //页码
limit: params.limit, //页面大小
search : params.search, //搜索
order : params.order, //排序
ordername : params.sort, //排序
};
},
detailView : true,
detailFormatter : function (index, row) {
var image = '<div class="photos">'
+'<a target="_blank" href="'+row['jumpUrl']+'"><img alt="image" class="feed-photo" src="'+row['picUrl']+'"></a>'
+'</div>';
return image;
},
showHeader : true,
showColumns : true,
showRefresh : true,
pagination: true,//分页
sidePagination : 'server',//服务器端分页
pageNumber : 1,
pageList: [5, 10, 20, 50],//分页步进值
search: true,//显示搜索框
//表格的列
columns: [
{
field: 'adId',//域值
title: '广告ID',//标题
visible: true,//false表示不显示
sortable: true,//启用排序
width : '5%',
},
{
field: 'picUrl',//域值
title: '图片',//标题
visible: true,//false表示不显示
sortable: true,//启用排序
width : '15%',
formatter : function (value, row, index) {
return "<img style='width: 50px;height: 50px;' src='"+value+"' alt=''>"
}
},
{
field: 'jumpUrl',//域值
title: '跳转链接',//内容
visible: true,//false表示不显示
sortable: true,//启用排序
width : '10%',
editable : true,
cellStyle : function (value, row, index) {
return {
css: {
"max-width": "300px",
"word-wrap": "break-word",
"word-break": "normal"
}
};
}
},
{
field: 'adDesc',//域值
title: '描述',//内容
visible: true,//false表示不显示
sortable: true,//启用排序
width : '10%',
editable : true,
},
{
field: 'displayType',//域值
title: '表现形式',//内容
visible: true,//false表示不显示
sortable: true,//启用排序
width : '10%',
editable: {
type: 'select',
source: [ //0->无广告，1->静态不可点击，2->静态可点击，3->动态不可点击，4->动态可点击
{value: 0, text: '无广告'},
{value: 1, text: '静态不可点击'},
{value: 2, text: '静态可点击'},
{value: 3, text: '动态不可点击'},
{value: 4, text: '动态可点击'},
]
}
},
{
field: 'displaySeconds',//域值
title: '时间',//内容
visible: true,//false表示不显示
sortable: true,//启用排序
width : '5%',
editable : true,
},
{
field: 'scope',//域值
title: '影响范围',//内容
visible: true,//false表示不显示
sortable: true,//启用排序
width : '10%',
editable: {
type: 'select',
source: [ //0->全国
{value: 0, text: '全国'},
]
}
},
{
field: 'userType',//域值
title: '影响群体',//内容
visible: true,//false表示不显示
sortable: true,//启用排序
width : '5%',
editable: {
type: 'select',
source: [ //0->全部
{value: 0, text: '全部'},
]
}
},
{
field: 'status',//域值
title: '状态',//内容
visible: true,//false表示不显示
sortable: true,//启用排序
width : '10%',
formatter : function (value, row, index) {
return value==1||value=='1' ? '正在使用' : '没有使用';
}
},
{
field: 'addTime',//域值
title: '时间',//内容
visible: true,//false表示不显示
sortable: true,//启用排序
width : '10%',
}
,{
field: 'operate',
title: '操作',
align: 'center',
events: operateEvents,
width : '25%',
formatter: operateFormatter
}
],
onEditableSave: function (field, row, oldValue, $el) {
$.ajax({
type: "post",
url: "/wadmin/ad/updateAdInfo",
dataType : 'json',
data: row,
success: function (data, status) {
if (status == "success" && data.result == 0) {
toastr.success('更新成功');
if (field == 'jumpUrl') {
$('#table').bootstrapTable("refresh");
}
return true;
} else {
toastr.info(data.message);
$('#table').bootstrapTable("refresh");
}
},
error: function () {
alert("Error");
},
complete: function () {
}
});
}
});
$("#btn_add").click(function () {
$.ajax({
type : "POST",
url : "/wadmin/ad/addAd",
dataType : 'JSON',
success : function (data) {
if (data.result != 0) {
toastr.info("info", data.message);
return ;
}
toastr.success("success", '标签');
$("#table").bootstrapTable('insertRow', {index:0, row:data.data});
}
});
});
function operateFormatter(value, row, index) {
return [
'<a class="using" href="javascript:void(0)" title="Remove">',
'<i class="fa fa-check"></i>',
'</a> ',
'<a class="upload" style="cursor: pointer" href="javascript:void(0)" title="Upload">',
'<label style="cursor: pointer" for="'+row['adId']+'">',
'<i class="fa fa-upload"></i>',
'<input type="file" name="adUpload" style="display: none;" class="adUpload" id="'+row['adId']+'" >',
'</label>',
'</a> ',
'<a class="remove" href="javascript:void(0)" title="Using">',
'<i class="fa fa-times"></i>',
'</a>',
].join('');
}
});bootstrap table使用总结的更多相关文章
- BootStrap table使用
bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="sty ...
- bootstrap Table 中给某一特定值设置table选中
bootstrap Table 中给某一特定值设置table选中 需求: 如图所示:左边地图人员选定,右边表格相应选中. 功能代码: //表格和图标联动 function changeTableSel ...
- JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...
- JS组件系列——Bootstrap Table 表格行拖拽
前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...
- JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- 后台系统组件：一丶bootstrap table
http://www.cnblogs.com/landeanfen/p/4976838.html (bootstrap table) http://www.cnblogs.com/landeanfen ...
- Bootstrap Table Examples
The examples of bootstrap table http://bootstrap-table.wenzhixin.net.cn/examples/ http://www.jq22.co ...
随机推荐
- 2018秋寒假作业4- -PTA编程总结1
PTA1打印沙漏.打印沙漏中的“沙漏形状”,就是每行输出的奇数符号与各行符号中心对齐:相邻两行符号数相差2:符号数从大到小递减到1,再从小到大递增.在做的时候出了几次错,编译发先是几个小地方出错了.以 ...
- luogu P3193 [HNOI2008]GT考试
传送门 单串匹配显然用\(kmp\) 一个暴力的dp是设\(f_{i,j}\),表示前\(i\)位,正在匹配给定串第\(j\)位的方案,转移就枚举下一位放什么,然后使用\(kmp\)看会匹配到给定串的 ...
- EOF \n \0 NULL 之间的区别
\n 是换行符 \0 是字符串的结束标志 EOF是流的结束标志 FILE* 这种流 NULL 是指针为空 第一个问题是EOF 它是end of file的缩写,表示"文字流"(s ...
- Python 入门基础18 --re模块+内存管理
今日内容: 1.垃圾回收机制 2.re模块 一.垃圾回收机制 在计算机中,不能被程序访问到的数,称之为垃圾 1.1 引用计数 引用计数用来记录值的内存地址被记录的次数 每引用一次就对标记 +1 操作 ...
- 2018-2019-2 网络对抗技术 20165227 Exp3 免杀原理与实践
2018-2019-2 网络对抗技术 20165227 Exp3 免杀原理与实践 **免杀** - 一般是对恶意软件做处理,让它不被杀毒软件所检测.也是渗透测试中需要使用到的技术. - 要做好免杀,就 ...
- CentOS 6.5下快速搭建ftp服务器[转]
CentOS 6.5下快速搭建ftp服务器 1.用root 进入系统 2.使用命令 rpm -qa|grep vsftpd 查看系统是否安装了ftp,若安装了vsftp,使用这个命令会在屏幕上显示vs ...
- 中间人攻击之ettercap嗅探
中间人攻击: 中间人攻击(Man-in-the-MiddleAttack,简称“MITM攻击”)是一种“间接”的入侵攻击,这种攻击模式是通过各种技术手段将受入侵者控制的一台计算机虚拟放置在网络连接中的 ...
- shell-检测服务是否运行，并记日志
目的:每隔*分钟检测服务是否运行:若运行中,则记录执行的进程名称:若不运行,记录当前时间 shell: #!/bin/bash date=`date +%Y%m%d` log=/home/mono_$ ...
- JDK8 Lambda表达式对代码的简化
只是举个例子: public class LambdaDemo { public static String findData( String name , LambdaInterface finde ...
- manjaro 的配置
一.更新源的配置: 1).自动方法: 在 终端 执行下面的命令从官方的源列表中对中国源进行测速和设置 sudo pacman-mirrors -c China 2).手动方法 自动方法(上面的方法1, ...