bootstrap Table 后台交互

bootstrap Table 后台交互

1. 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
        });

1. 后台实现
   后台返回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;
    }