关键词:
前言:BootstrapTable基于Bootstrap,Bootstrap基于jquery,所以需要引入jquery后再引入bootstrap。
<link href="${ctx}/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="${ctx}/assets/plugins/bootstrap-datatable/bootstrap-table.min.css">
<script src="${ctx}/assets/plugins/jquery/jquery-2.1.4.min.js"></script>
<script src="${ctx}/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="${ctx}/assets/plugins/bootstrap-datatable/bootstrap-table.min.js"></script>
<script src="${ctx}/assets/plugins/bootstrap-datatable/bootstrap-table-zh-CN.min.js"></script>
<link rel="stylesheet" href="${ctx}/assets/font/font-awesome/4.5.0/css/font-awesome.min.css"> //icon:官网
通过 JavaScript 的方式
通过表格 id 来启用 bootstrap table。
文档链接戳这里。
<div class="box-body">
<div id="toorbar" class="btn-group">
<shiro:hasPermission name="admin:ordervip:create">
<button id="addBtn" type="button" class="btn btn-default">
<i class="glyphicon glyphicon-plus"></i>新增订单
</button>
</shiro:hasPermission>
</div>
<table id="table"></table>
</div>
function initTable() {
$("#table").bootstrapTable({
url: "${aapi}/orderVip/list", //服务器数据加载地址,与末尾sidePagination参数设置为server对应。
columns: [{ //列配置项,橙名为列参数,本文介绍有限,具体有哪些可以详细看文档介绍。
field: 'orderNo',
title: '订单编号',
formatter: function(value, row, index) { // value:field的值,row:行数据,用row.createdDtm找发起时间字段,index:行下标
return [
'<shiro:hasPermission name="admin:ordervip:detail">
<a class="detail ml10" href="javascript:void(0)" title="订单详情">',
value, '</a></shiro:hasPermission>',
'<shiro:lacksPermission name="admin:ordervip:detail">', value,
'</shiro:lacksPermission>'
].join('');
},
events: {
'click .detail': function(e, value, row, index) {
$.FORM.showFormDialog({ //bootstrap-dialog与app-jquery-dialog.js结合使用,下面的文章中详细阐述。
title: "订单详情",
isReadOnly: true,
dataSource: "${aapi}/orderVip/detail/2/" + row.orderNo,
templateUrl: '${aapi}/page/custom/vipOrderDetail'
});
}
}
}, {
field: 'createdDtm',
title: '发起时间'
}, {
field: 'cusName',
title: '发起人'
}, {
field: 'splitDtm',
title: '拆单时间'
}, {
field: 'splitnum',
title: '拆单数量'
}, {
field: 'type',
title: '类型',
formatter: function(value, row, index) {
if(value == '0') {
return "维修";
}
if(value == '1') {
return "搬运";
}
if(value == "1,0") {
return "搬运,维修"
}
}
}, {
field: 'state',
title: '订单状态',
formatter: function(value, row, index) {
if(typeof(value) == 'undefined' || value == "0") {
return "未拆分";
}
if(value == '1') {
return "已拆分";
}
}
}, {
field: 'remark',
title: '备注'
}, {
field: 'file',
title: '文件',
formatter: function(value, row, index) {
if(row.orderFile == undefined) {
return "--";
} else {
return '<shiro:hasPermission name="admin:ordervip:download"><a class="download ml10" href="javascript:void(0)" title="下载表格"> <i class="fa fa-file-o" aria-hidden="true"></i></a></shiro:hasPermission>';
}
},
events: {
'click .download': function(e, value, row, index) {
window.open('${aapi}/orderVip/downLoad/' + row.orderNo, '_self');
}
}
}, {
field: 'opt',
title: '操作',
formatter: function(value, row, index) {
return [
'<shiro:hasPermission name="admin:ordervip:splitorder">
<a class="split ml10" href="javascript:void(0)" title="拆分订单">
<i class ="fa fa-wrench" aria-hidden="true"></i></a></shiro:hasPermission>',
'<shiro:hasPermission name="admin:ordervip:update">
<a class="edit ml10" href="javascript:void(0)" title="修改订单">
<i class="glyphicon glyphicon-edit"></i></a></shiro:hasPermission>',
'<shiro:hasPermission name="admin:ordervip:delete">
<a class="cancel ml10" href="javascript:void(0)" title="取消订单">
<i class="glyphicon glyphicon-ban-circle"></i></a></shiro:hasPermission>'
].join('');
}, //紫色为添加图标(icon),插件:font-awesome,效果图见底部。
events: {
'click .split': function(e, value, row, index) {
$.FORM.showFormDialog({
title: "拆分VIP订单",
isReadOnly: true,
dataSource: "${aapi}/orderVip/detail/2/" + row.orderNo,
templateUrl: '${aapi}/page/custom/vipOrderSplit'
});
},
'click .edit': function(e, value, row, index) {
if(row.state == '1') {
$.NOTIFY.showNotice('提示', '不能修改已拆分的订单!');
} else {
$.FORM.showFormDialog({
title: "修改VIP订单",
postUrl: "${aapi}/orderVip/update",
dataSource: "${aapi}/orderVip/detail/2/" + row.orderNo,
isReadOnly: false,
templateUrl: '${aapi}/page/custom/vipModifyForm',
formId: "#vipForm",
postType: "multipart",
data: {
pid: 0,
pname: "--",
level: 0
},
onPostSuccess: function() {
$("#table").bootstrapTable("refresh");
}
});
}
},
'click .cancel': function(e, value, row, index) {
if(row.state == '1') {
$.NOTIFY.showNotice('提示', '不能删除已拆分的订单!');
} else {
$.FORM.showConfirm({
title: "提示",
message: "您确认要取消订单【" + row.orderNo + "】?",
url: "${aapi}/orderVip/delete/" + row.orderNo,
autoClose: true,
successTitle: "成功",
successMessage: "订单【" + row.orderNo + "】已取消!",
onSuccess: function() {
$("#table").bootstrapTable("refresh");
}
});
}
}
}
}],
queryParams: function(params) {
return $.extend({}, params, searchformData); //请求服务器数据时,你可以通过重写参数的方式添加一些额外的参数,本项目中用于自定义表格的查询,于别的文章详细阐述。
},
toolbar: "#toolbar", //一个jQuery 选择器,指明自定义的toolbar(工具栏),将需要的功能放置在表格工具栏(默认)位置。
sidePagination: "server", //设置在哪里进行分页,可选值为 'client' 或者 'server'。设置 'server'时,必须设置 服务器数据地址(url)或者重写ajax方法
pageNumber: 1, //如果设置了分页,首页页码
pageSize: 10, //如果设置了分页,页面数据条数
pageList: [
10, 20, 50, 100, 200 //如果设置了分页,设置可供选择的页面数据条数。设置为All 则显示所有记录。
],
pagination: true, //设置为 true
会在表格底部显示分页条
showRefresh: true, //显示 刷新按钮
showColumns: true, //是否显示 内容列下拉框
searchOnEnterKey: true, //设置为 true
时,按回车触发搜索方法,否则自动触发搜索方法
search:true //是否启用搜索框
});
}
initTable();
分页使用后台代码写,并且返回参数order=asc&limit=10&offset=0(正序,10条,从0开始),不懂这些值是怎么设置的= =
url: http://127.0.0.1:8081/piano/a/orderVip/list?order=asc&limit=10&offset=0
请求成功后的表格如下图所示:
(本篇内容还结合了bootstrap-dialog的内容。在接下来的文章中详细介绍。)
bootstraptable使用总结
使用bootstraptable可以很方便的开发后台表格,对数据进行异步更新,编辑。下面就来介绍一下bootstraptable的详细使用方法:因为之前在官网也找了很久的教程,源码感觉隐藏的比较隐秘,其他扩展功能也很难找到,其实都在:http:... 查看详情
bootstraptable的使用小结
...一下,毕竟有些时候没有使用到这个方式很有用,在使用bootstraptable的时候,选择当前已经选择的节点的事件中的ID的值 当前rows中有很多的数据,但是我只需要id这一个值,这个时候进行操作就非常的简单了。$.map(data,function(... 查看详情
bootstraptable的使用小结
...一下,毕竟有些时候没有使用到这个方式很有用,在使用bootstraptable的时候,选择当前已经选择的节点的事件中的ID的值 当前rows中有很多的数据,但是我只需要id这一个值,这个时候进行操作就非常的简单了。$.map(data,function(... 查看详情
bootstraptable使用及遇到的问题
本人前端菜鸟一枚,最近使用bootstraptable实现表格,记录一下以便日后翻阅,废话不多说,先看效果图:1、首先说下要实现该效果需要添加的css样式及所需的js文件,具体下载地址就不粘贴了(因为太懒)<linkrel="stylesheet"href="css/b... 查看详情
bootstraptable使用小记
varTableInit=function(){varoTableInit=newObject();//初始化TableoTableInit.Init=function(){$(‘#tb_rolelist‘).bootstrapTable({url:‘/Role/GetList‘,//请求后台的URL(*)method:‘get‘,//请求方式(*)toolbar:‘#toolbar‘,//工具按 查看详情
使用 BootstrapTable 添加行时使用 CellStyle
】使用BootstrapTable添加行时使用CellStyle【英文标题】:UsingCellStylewhenaddingrowswithBootstrapTable【发布时间】:2018-06-2005:19:54【问题描述】:我有一个带有按钮的引导表,用于添加新的数据行。我想在插入时为每个新行的某一列(text2... 查看详情
bootstraptable的一些简单使用总结
在GitHub上Bootstrap-table的源码地址是:https://github.com/wenzhixin/bootstrap-tableBootstrap-table的文档地址:http://bootstrap-table.wenzhixin.net.cn/Bootstrap-table的各种样例:https://github.com/wenzhixin/bootstrap-table 查看详情
bootstraptable使用心得总结
...的表格控件,查询到:http://bootstrap-table.wenzhixin.net.cn的BootstrapTable感觉挺不错,但是由于官方的文档不是怎么的完善,导致自己的网络数据请求一直没有通过。今天终于调试通过,在这里与大家分享一下。一、相关... 查看详情
bootstraptable使用心得
序号显示带分页信息的连续编号,在序号列添加以下格式化代码即可。{field:‘number‘,title:‘序号‘,align:‘center‘,width:45,formatter:function(value,row,index){varpageSize=$(‘#logList‘).bootstrapTable(‘getOptions‘).pageSize,pageNum=$(‘#logLi 查看详情
bootstraptable
bootstraptable详细使用指南1、bootstrap-table简介1.1、bootstraptable简介及特征: Bootstraptable是国人开发的一款基于Bootstrap的jQuery表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑... 查看详情
如何让bootstraptable语言包使用
参考技术A设置如下样式是可以使表格内容居中的,没有居中的原因可能是你还设置了其他的样式(把这个样式覆盖了):.tableth,.tabletdtext-align:center;height:38px;你可以新建一个单独的html文件复制如下代码来测试一下:BootstrapTable 查看详情
bootstraptable方法怎么使用
参考技术A首先,你要知道一个基础table的标签怎么去写,只有知道这个基础,你才能更好的用bootstrap中的table.html在这不过多说明.既然看这篇文章,肯定都能够理解.然后现在就把bootstrap中的table来详细说明一下.基础的table如下:下面了... 查看详情
bootstrap-dialog的使用(续bootstraptable)
Bootstrap-dialog实现表格内容的增,删,改。插件引入:必须先引入jquery和bootstrap和artTemplate。<linkrel="stylesheet"href="${ctx}/assets/plugins/bootstrap-dialog/css/bootstrap-dialog.min.css"><scriptsrc="${ctx}/assets/p 查看详情
使用bootstraptable时不能显示筛选列和分页每页显示的行数
使用bootstraptable时不能显示筛选列和分页每页显示的行数后来在同事的帮助下,才发现没有引用bootstrap的js文件 <scriptsrc="/Scripts/bootstrap/js/bootstrap.js"></script> 这个引用了就可以了 查看详情
bootstraptable前端分页的问题
之前一直都是使用bootstraptable的后端分页,后来有一次不是服务器端分页写的,又比较懒,不想改后端接口太多。考虑到数据量不算多,顶多一千条数据,就改成前端分页,后端可以不用改什么,就配合改一下数据格式。设置参... 查看详情
bootstraptable的使用总结(代码片段)
...ples.bootstrap-table.com/#动态表头(function(document,window,$)//ExampleBootstrapTableLargeColumns//-------------------------------------buildTable($('#exampleTableLargeColumns'),50,50);functionbuildTable($el,cells,rows)vari,j,row,columns=[],data=[];for(i=0;i<cells;i+... 查看详情
bootstraptable使用实例
一、bootstrapTable简单使用:<linkrel="stylesheet"href="./static/libs/bootstrap/css/bootstrap.css"><linkrel="stylesheet"href="./static/libs/bootstrap-table-master/bootstrap-table.css"><scriptsr 查看详情
bootstraptable使用实例
一、bootstrapTable简单使用:<linkrel="stylesheet"href="./static/libs/bootstrap/css/bootstrap.css"><linkrel="stylesheet"href="./static/libs/bootstrap-table-master/bootstrap-table.css"><scriptsr 查看详情