bootstrap table使用总结
来源：互联网 发布：中智软件开发有限公司 编辑：程序博客网 时间：2024/05/16 14:16
使用bootstrap table可以很方便的开发后台表格，对数据进行异步更新，编辑。下面就来介绍一下bootstrap table的详细使用方法：
因为之前在官网也找了很久的教程，源码感觉隐藏的比较隐秘，其他扩展功能也很难找到，其实都在：http://issues.wenzhixin.net.cn/bootstrap-table/index.html这里面，点击上面的tab可以找到具体的功能实现（特别是extension和issues，之前以为issues不是教程，结果点进去才知道）：
最简单的异步表单
1.html中加入如下代码：
<table id="table"></table>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,需要下拉编辑的，使用如下代码：
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(''); }}); 0 0
- bootstrap-table使用总结
- bootstrap table使用总结
- bootstrap-table使用总结
- bootstrap-table使用总结
- bootstrap table使用总结
- bootstrap table使用总结
- Bootstrap Table使用心得总结
- Bootstrap table的一些简单使用总结
- 关于bootstrap table 插件的使用总结
- Bootstrap table的一些简单使用总结
- Bootstrap table的一些简单使用总结
- Bootstrap Table总结
- Bootstrap Table总结
- bootstrap-table bug总结
- bootstrap table使用小记
- Bootstrap Table使用分享
- Bootstrap Table使用分享
- bootstrap-table操作使用
- Linux进程间通信——pipe应用实例
- UVA 1405 The Great Wall Game(最佳二分图匹配)
- sql 创建表、删除表、 增加字段、删除字段等操作
- 设计模式（九）——组合模式
- Objective-c - 多个对象的内存管理之三:为某个属性反复赋值同一个对象
- bootstrap table使用总结
- eclipse中servers配置tomcat出现apr错误解决方案
- Activity生命周期的详解
- Leetcode——30. Substring with Concatenation of All Words
- Apache Flume 1.7深入浅出，快速入门
- IO基础入门之I/O多路复用技术
- 胜负
- [leetcode-481]Magical String
- mac 安装 nginx 环境
