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;
    }