关闭

bootstrap Table 后台交互

6423人阅读 评论(0) 收藏 举报
分类:

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;
    }
1
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

通过AJAX获取ashx后台JSON数据并使用bootstrap-Table控件

最近项目的表格使用了bootstrap-Table控件,研究了一下直接上代码:JS代码(这个只是客户端获取数据并不是服务端):function initTable() { jQuery.aja...
  • qq_34905123
  • qq_34905123
  • 2016-12-13 14:07
  • 5176

Bootstrap table的使用,与后台数据连接,可自动翻页(客户端翻页)

参考文章: http://blog.csdn.net/lzxadsl/article/details/49181127 原来的文章并没有实现后台程序,我试着改造了一下。用java实现了json数...
  • rishengcsdn
  • rishengcsdn
  • 2016-12-15 13:16
  • 2604

Bootstrap-Table实现从服务器加载数据进行显示

Bootstrap-Table是一个Boostrap的表格插件,能够将JSON数据直接显示在表格中。当然,这需要配置一些参数并进行初始化表格才行。其官方网站地址为:http://bootstrap-t...
  • lzx_longyou
  • lzx_longyou
  • 2016-01-22 22:11
  • 83816

简单知识点实例之三:Bootstrap-Table和后台进行百分百交互的简单实例

这是一个针对前后台交互的例子,可以直接套进项目中通畅运行。第二页之所以数据不对,是因为例子毕竟没有真正的后台,所以数据不对。但是可以套入项目中,就正常了。 重点: 其中bootstrap-...
  • Miss_LL
  • Miss_LL
  • 2018-01-13 20:39
  • 42

bootstrap-table真实交互数据

  • 2018-01-13 20:38
  • 294KB
  • 下载

Bootstrap Table插件传值给后台解决中文乱码的问题

问题描述: 前台传到后台的值显示的是“????”; 原因: 因为bootstrap Table插件使用连接传值,默认的是ascll编码,(可能,未验证),需要转码。 解决办法(两步!): 1....
  • Hellojava001
  • Hellojava001
  • 2017-10-30 11:52
  • 151

关于bootstrap table 在页面进行假数据增删改,不通过后台数据库操作

使用bootstrap table 去编写前端页面,对于数据的 处理,需要批量插入数据,可以使用前端简单的 增删改,数据填好后,在进行后台操作,可以减少多次对后台的请求,提高效率。
  • orangeTop
  • orangeTop
  • 2017-08-01 15:33
  • 1900

通过AJAX获取ashx后台JSON数据并使用bootstrap-Table控件

最近项目的表格使用了bootstrap-Table控件,研究了一下直接上代码:JS代码(这个只是客户端获取数据并不是服务端):function initTable() { jQuery.aja...
  • qq_34905123
  • qq_34905123
  • 2016-12-13 14:07
  • 5176

Maven + Spring MVC+Mybatis + MySQL +AngularJS + Bootstrap 实现简单微博应用(三)前后台交互

该章节实现实现用户注册、登录、发表微博、评论微博等功能。 1. 配置文件 spring-mvc.xml <beans xmlns="http://www.springframework.org/sc...
  • shymi1991
  • shymi1991
  • 2016-09-18 15:09
  • 5131

bootstrap-table-reorder-rows.js

  • 2018-01-15 15:38
  • 3KB
  • 下载
    个人资料
    • 访问:16814次
    • 积分:353
    • 等级:
    • 排名:千里之外
    • 原创:19篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类