bootstrap Table 后台交互

bootstrap Table 后台交互

table

th对应的字段和bean相对应，bootstrap能自动解析json封装展示到table上。同时bootstrap支持格式化，如下面代码示例中的data-formatter方法，封装个function遍可以，示例代码如下，bootstrap table的中支持的属性可以访问官方文档：http://bootstrap-table.wenzhixin.net.cn/documentation/

function operateFormatterANo(value, row) {
return "<a href='javascript:void(0)' onclick=viewCreditApplyListInfo('"+row.creditId+"','"+row.enterpriseId+"','"+row.status+"')>"+value+"</a>";
}

bootstrap table查询data-query-params 中调用的方法示例如下，传递分页信息和参数。

//传递的参数
function queryParams(params) {
var executeDeadDateStart = $("#executeDeadDateStart").val();
var executeDeadDateEnd = $("#executeDeadDateEnd").val();
var contractNo = $("#contractNo").val();
var applyStatus = $("#applyStatus").val();
return {
limit : params.limit,
paging : true,
offset : (params.pageNumber -1)* params.limit,
executeDeadDateStart : executeDeadDateStart,
executeDeadDateEnd : executeDeadDateEnd,
contractNo : contractNo,
applyStatus : applyStatus,
applyStatusList:"APPROVE,OVERDUE"// PSUBMIT
};
}

代码中的table实例

<table data-toggle="table" id="table" data-query-params="queryParams" data-side-pagination="server"
data-classes="cs-rowstyle"
data-pagination="true"
data-pagination="true" data-page-list="[5,8,10]"
data-pagination-first-text="<<" data-pagination-pre-text="<"
data-pagination-next-text=">" data-pagination-last-text=">>"
data-toolbar=".toolbar">
<thead>
<tr>
<th data-field="applyNo"            data-align="center" data-visible="false"></th>
<th data-field="approveDatetime"    data-align="center">授信时间</th>
<th data-field="approveAmount"      data-align="center">授信额度(元)</th>
<th data-field="interestRate"       data-formatter='rateFormatter' data-align="center">授信日利率</th>
<th data-field="contractNo"         data-align="center" data-formatter="operateFormatterANo">业务合同编号</th>
<th data-field="productName"        data-align="center">产品名称</th>
<th data-field="applyStatus"        data-formatter="statusFormatter"      data-align="center">状态</th>
<th data-field="executeDeadDate"    data-align="center">授信到期日</th>
<th data-field="creditId" data-align="left" data-visible="false"></th>
<th data-field="enterpriseId" data-align="left" data-visible="false"></th>
</tr>
</thead>
</table>

以下展示的是对table进行手动刷新的例子

<!--script 使用table的id发起请求-->
function showDetail(financeId) {
$('#logTable').bootstrapTable('refresh', {
url: "../factoring/finance/financeApplyLogs.ajax?t=" + Math.random() + "&financeId=" + financeId
});

后台实现

后台返回json 放到Map中key必须是rows！要不然bootstrap自动解析不了，返回的必须是json格式。

@ResponseBody
@RequestMapping("/financeApplyLogs.ajax")
public Map<String, Object> financeApplyLogs(FinanceApplyLogCriteria criteria){
List<FinanceApplyLogVo> logList = new ArrayList<FinanceApplyLogVo>();
Map<String, Object> resultMap = new HashMap<String, Object>();
if(criteria!=null) {
List<FinanceApplyLog> list = financeApplyLogService.query(criteria);
logList = new FinanceApplyLogVoConvertor().convertList(list, VoMaskLevel.NORMAL, "", bizDictService);
resultMap.put("rows", logList);
}
return resultMap;
}