Bootstrap Table的使用
前言: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的内容。在接下来的文章中详细介绍。)
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 ...
随机推荐
- 如何从Apache官网下载apache
apache服务器官网地址:http://httpd.apache.org/ linux版本下载比较容易,以windows版本,apache 2.4为例. 点击download 此处随便选一个提供商. ...
- sql server 的约束的作用 于 理解 [转]
SQL Server中的约束用来确保系统的完整性.一般约束可以分为:主键约束外键约束检查约束默认约束唯一约束非空约束 但是一般我们需要特别注意前三种约束:主键约束,一就是说跟你系统的实体有很大的关系, ...
- 8.2 sikuli 集成进eclipse 报错:Getting the VisionProxy.dll: Can not find dependent libraries...
如果在执行脚本的时候出现以下错误: Getting the VisionProxy.dll: Can not find dependent libraries... 把Sikuli X 的libs目录 ...
- windows下编译Android版本的boost库文件
1.起因: 手上有一个用到了boost的asio库和thread库的工程要编译到手机上(Android版本和ios版本),本文只介绍如何编译到Android版本,ios版本之后再介绍,也许就不介绍了( ...
- HTML+CSS D08浮动
1. <html> <head> <title>div浮动</title> <style type="text/css"> ...
- dedecms 标签的基本用法
1.关键描述调用标签: <meta name="keywords" content="{:fieldname='keywords'/}"> < ...
- java 数据结构 队列的实现
java 数据结构队列的代码实现,可以简单的进行入队列和出队列的操作 /** * java数据结构之队列的实现 * 2016/4/27 **/ package cn.Link; import java ...
- 转:Warning -26490: File name in a multipart submit is missing or empty.解决方法
录制测试上传文件脚本,回放报Warning -26490: File name in a multipart submit is missing or empty. Using an empty fi ...
- MVC 使用Jquery的$.post传递参数
MVC中,如果要使用 $.post 给 COntroller 传递参数,需要类实现 属性 get set,这样才行
- loadrunner常用计数器分析
内存是第一个监视对象,确定系统瓶颈的第一个步骤就是排除内存问题.内存短缺的问题可能会引起各种各样的问题. Object(对象) Counters Description(描述) 参考值 Memory ...