bootstrap-table使用笔记
服务端分页:
//html
<div class="container-fluid">
<div style="margin-top:1em"></div>
<form action="${basePath}admin/wp/wpDayOrderReceivable.xhtml" class="form-inline" role="form" method="post">
<input type="hidden" name="isXls" id="isXls" />
<div class="form-group">
<label for="startTimeSearch" class="control-label">日期</label>
<div class="input-group date form_date">
<input class="form-control" id="startTime" name="startTime" type="text" value='$!DateUtil.format($!command.startTime,"yyyy-MM-dd")' onfocus="WdatePicker({minDate:'2014-12-01',maxDate:'$!command.endTime'})">
</div>
</div>
<div class="form-group">
<label for="endTimeSearch" class="control-label">-</label>
<div class="input-group date form_date" >
<input class="form-control" id="endTime" name="endTime" type="text" value='$!DateUtil.format($!command.endTime,"yyyy-MM-dd")' onfocus="WdatePicker()">
</div>
</div>
<div class="form-group">
<label for="payName" class="control-label">支付渠道</label>
<select id="payName" name="payName" class="form-control" onchange="Changed(this.value)">
$!{DisplayUtil.getWeipiaoDisplay($!{command.merchantNo})}
</select>
</div>
<div class="form-group">
<label for="merchantNo" class="control-label">商户号</label>
<select id="merchantNo" name="merchantNo" class="form-control">
</select>
<button type="button" onclick="javascript:refreshTable()" class="btn btn-default">查询</button>
</div>
<div class="form-group">
<button type="button" onclick="javascript:downloadxls()" class="btn btn-default">导出xls</button>
</div>
</form>
<br>
<table id="table" class="table table-hover table-bordered">
</table>
</div> //js
$(function () {
Changed('$!command.merchantNo');
$('#table').bootstrapTable({
url:"${basePath}admin/wp/wpDayOrderReceivable.xhtml",
method: 'get',
pagination: true,
sidePagination: "server",
pageSize: 10,
queryParams:getParams,
columns:[{
title: '交易时间',
field: 'transactiondate',
formatter: dateFormater
},{
title: 'ID',
field: 'id',
visible:false
},{
title: '支付渠道',
field: 'merchantName'
},{
title: '商户号',
field: 'merchantNo'
},{
title: '交易金额',
field: 'successAmount',
formatter: valueFormater
},{
title: '退款金额',
field: 'refundAmount',
formatter: valueFormater
},{
title: '应收金额',
field: 'yingshou',
formatter: valueFormater
},{
title: '详情',
formatter: operateFormatter
}]
})
}); function operateFormatter(value, row, index){
if(row.id){
var a='<a href="${basePath}admin/wp/wpOrderReceivableDetail.xhtml?id='+row.id+"&startTime="+row.transactiondate+"&merchantNo="+row.merchantNo+'" class="btn btn-default" role="button">详情</a>';
return a;
}
}
function fmoney(s, n) {
s = (s/100).toFixed(n) + "";
var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1];
t = "";
for (i = 0; i < l.length; i++) {
t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
}
return t.split("").reverse().join("") + "." + r;
}
function valueFormater(value, row, index){
var v=fmoney(value,2);
return v;
}
function dateFormater(value, row, index) {
if(value){
return value.substr(0,10)
}
}
function getParams(params){
params.startTime=$('#startTime').val();
params.endTime=$('#endTime').val();
params.merchantNo=$('#merchantNo').val();
return params;
}
function refreshTable() {
table.bootstrapTable('refresh');
}
后台逻辑代码:
返回格式:json {total:23,rows[{...},{...}]}
@RequestMapping("/admin/wp/wpDayOrderReceivable.xhtml")
public String getDayWeiPiaoOrderReceivable(CarDistributorCommand command, ModelMap model,HttpServletResponse response){
if(StringUtils.isBlank(command.getMerchantNo())){
return showJsonError(model,"merchantNo not null");
}
Integer count=weipiaoIncomeDetailService.getWeipiaoOrderReceivableCount(command);
List<WeipiaoOrderReceivable> lists=weipiaoIncomeDetailService.getWeipiaoOrderReceivable(command);
if (StringUtils.isNotBlank(command.getIsXls())) {
model.put("list",lists);
download("xls", response);
return "/weipiao/wporderReceivableXls.vm";
}
for(WeipiaoOrderReceivable wp:lists){
wp.setMerchantName(WeiPiaoCate.getWeipiao(wp.getMerchantNo()));
}
List<WeipiaoOrderReceivable> sums=weipiaoIncomeDetailService.getWeipiaoOrderReceivableMonth(command);
WeipiaoOrderReceivable w=sums.get(0);
w.setMerchantName(null);
w.setTransactiondate(null);
w.setMerchantNo("合计");
lists.add(w); Map<String,Object> map= Maps.newHashMap();
map.put("total",count);
map.put("rows",lists);
String resultJson = JsonUtils.writeObjectToJson(map);
return showDirectJson(model,resultJson);
}
前台分页:
//html
<div class="container-fluid">
<div style="margin-top:1em"></div>
<form action="${basePath}admin/wp/wpOrderReceivableMonth.xhtml" class="form-inline" role="form" method="post">
<div class="form-group">
<label for="startTimeSearch" class="control-label">日期</label>
<div class="input-group date form_date">
<input class="form-control" name="startTime" type="text" value='$!DateUtil.format($!command.startTime,"yyyy-MM")' onclick="WdatePicker({dateFmt:'yyyy-MM'})">
</div>
<button type="button" onclick="javascript:document.forms[0].submit()" class="btn btn-default">查询</button>
</div>
</form>
<table id="table" class="table table-hover table-bordered" data-show-columns="true"
data-side-pagination="client"
data-pagination="true"
data-page-size="10">
<thead>
<tr>
<th data-field="date" data-sortable="true">期间</th>
<th data-field="mname" data-sortable="true">支付渠道</th>
<th data-field="mcode" data-sortable="true">商户号</th>
<th data-field="jiaoyi" data-sortable="true">交易金额</th>
<th data-field="tuikuan" data-sortable="true">退款金额</th>
<th data-field="yingshou" data-sortable="true">应收金额</th>
<th data-field="detail" data-sortable="true">详情</th>
</tr>
</thead>
</table>
</div>
//js
var table = $('#table');
$(function () {
var data = [
#set($a2=0)
#set($a3=0)
#set($a4=0)
#set($a5=0)
#set($a6=0)
#foreach($re in ${list})
{
"date": "$!DateUtil.format($!re.transactiondate,'yyyy-MM')",
"mname":"$!re.merchantName",
"mcode":"$!re.merchantNo",
#set($a2=$a2 + $!re.successAmount)
"jiaoyi": "$!VmUtils.formatPercent($!re.successAmount, 100, '###,##0.00')",
#set($a3=$a3 + $!re.refundAmount)
"tuikuan": "$!VmUtils.formatPercent($!re.refundAmount, 100, '###,##0.00')",
#set($a6=$a6 + $!re.yingshou)
"yingshou": "$!VmUtils.formatPercent($!re.yingshou, 100, '###,##0.00')",
"detail":'<a href="${basePath}admin/wp/wpOrderReceivable.xhtml?merchantNo=$!re.merchantNo&startTime=$!re.transactiondate" class="btn btn-default" role="button">详情</a>'
}
,
#end
{"date":"合计","mname":"","mcode":"","jiaoyi":"$!VmUtils.formatPercent($!a2, 100, '###,##0.00')","tuikuan":"$!VmUtils.formatPercent($!a3, 100, '###,##0.00')","yingshou":"$!VmUtils.formatPercent($!a6, 100, '###,##0.00')"}
];
table.bootstrapTable({data : data});
});
后台直接绑定数据:
@RequestMapping("/admin/wp/wpOrderReceivableMonth.xhtml")
public String getMonthWeiPiaoOrderReceivable(CarDistributorCommand command, ModelMap model){
if(command.getStartTime()==null){
command.setStartTime(DateUtil.getMonthFirstDay(DateUtil.getCurFullTimestamp()));
}
if(command.getEndTime()==null){
command.setEndTime(DateUtil.getNextMonthFirstDay(DateUtil.getCurFullTimestamp()));
}
List<WeipiaoOrderReceivable> wos=weipiaoIncomeDetailService.getWeipiaoOrderReceivableMonth(command);
model.put("command",command);
model.put("list",wos);
return "/weipiao/wporderReceivableMonth.vm";
}
bootstrap-table使用笔记的更多相关文章
- Bootstrap Table使用方法详解
http://www.jb51.net/article/89573.htm bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专 ...
- JS组件系列——表格组件神器:bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- Bootstrap Table急速完美搭建后台管理系统
Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分页,以及编辑.导出.过滤(扩展)等等的功能:http://bo ...
- [转]JS组件系列——表格组件神器:bootstrap table
原文地址:https://www.cnblogs.com/landeanfen/p/4976838.html 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉 ...
- JS组件系列——表格组件神器:bootstrap table 包含了js对象的定义和对象成员函数的定义
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍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(二:父子表和行列调序)
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...
随机推荐
- POJ 2080:Calendar
Calendar Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 12546 Accepted: 4547 Descrip ...
- shell脚本自动更新git
gitpull.sh #!/bin/bash cd /home/wwwroot/default/mouse && git pull cd /home/wwwroot/default/s ...
- C# oracle 参数传递的多种方式 留着复习
ORA-01036 非法的变量名/编号,(解决) 博客分类: oracle SQL 下边的代码就会造成 ORA-01036 非法的变量名/编号 cmd.CommandText = "SE ...
- 第八周 Leetcode 44. Wildcard Matching 水题 (HARD)
Leetcode 44 实现一种类似正则表达式的字符串匹配功能. 复杂度要求不高, 调代码稍微费点劲.. 好像跟贪心也不太沾边, 总之 *把待匹配串分成若干个子串, 每一个子串尽量在模式串中靠前的部分 ...
- 列表渲染v-for
v-for我们用v-for指令根据一组数据的选项列表进行渲染.v-for指令需要以item in items形式的特殊语法,items是源数据数组并且item是数组元素迭代的别名. demo: < ...
- uva11542
https://vjudge.net/problem/UVA-11542 xor高斯消元... 答案为2^f-1 其实书上有一个问题 样例有3种情况,其中4,6,15是绑在一起的,也就是他们必须满足一 ...
- 【174】C#添加非默认字体
参考:C# WinForm程序安装字体或直接调用非注册字体 参考:百度知道 在Debug文件夹下面新建一个font的文件夹,然后将字体的文件复制到里面,使用的时候,直接调用字体文件! private ...
- Eclipse导入Java 的jar包的方法
打开eclipse1.右击要导入jar包的项目,点properties 2.左边选择java build path,右边选择libraries 3.选择add External jars 4.选择ja ...
- Google C++编程规范 – 第十九条 -《前置声明》
转自:http://roclinux.cn/?p=3285 本原创文章属于<Linux大棚>博客. 博客地址为http://roclinux.cn. 文章作者为roc wu == [规范] ...
- [App Store Connect帮助]六、测试 Beta 版本(4.4) 管理 Beta 版构建版本:停止测试构建版本
在首页上,点按“我的 App”,选择您的 App,然后在工具栏中点按“TestFlight”. 在左列中的“构建版本”下,点按您 App 的平台(iOS 或 Apple TVOS). 在右表中,点按该 ...