zoukankan      html  css  js  c++  java
  • bootstrap-table插件数据加载方式

    1. data-url

      直接使用data-url在table标签中定义

    2. 使用load方法加载数据 
      $(“#finishingTask”).bootstrapTable(‘load’,data); 
      //data为json数组

    3. 几个实例


    通过data-url从本地json文件取值,也可以直接从后台取值,后台返回值格式必须为json数组形式,如下:

    [{"FormID":"402899814d9e4fea014d9e500ffc0001","FormCode":"10000000","CreateByName":"chen","RequestByName"
    :"b","ReceiveByName":"f","ReimburseAmount":"5.00","CreateDate":"2015-07-03"},{"FormID":"402899814daa65d0014daa65e26e0001"
    ,"FormCode":"10000001","CreateByName":"chen","RequestByName":"b","ReceiveByName":"g","ReimburseAmount"
    :"3.00","CreateDate":"2015-06-07"},{"FormID":"402899814dce2120014dce2125f80001","FormCode":"10000002"
    ,"CreateByName":"chen","RequestByName":"b","ReceiveByName":"f","ReimburseAmount":"10.00","CreateDate"
    :"2015-06-07"},{"FormID":"402899814de68b77014de68b7c1d0001","FormCode":"10000003","CreateByName":"chen"
    ,"RequestByName":"cjj","ReceiveByName":"2","ReimburseAmount":"33.00","CreateDate":"2015-06-13"},{"FormID"
    :"402899814e541ffc014e542036030001","FormCode":"10000004","CreateByName":"chen","RequestByName":"44"
    ,"ReceiveByName":"","ReimburseAmount":".00","CreateDate":"2015-07-03"},{"FormID":"402899814e542774014e5428b1c90001"
    ,"FormCode":"10000005","CreateByName":"chen","RequestByName":"2","ReceiveByName":"","ReimburseAmount"
    :".00","CreateDate":"2015-07-03"}]
    <table id="finishingTask" data-toggle="table" 
            data-url="../data/checkingTask.json"
               data-click-to-select="true" data-search="true"
               data-show-refresh="true"
               data-show-toggle="true"
               data-show-columns="true"
               data-toolbar="#toolbar"
               data-query-params="queryParams"
               data-pagination="true"
                data-halign="center">
    
            <thead>
                <tr>
                    <th data-field="state" data-checkbox="true"></th>
                    <th data-align="center" data-field="superviseID" class="col-sm-1">ID</th>
                    <th data-field="superviseName">未完成任务</th>
                    <th data-formatter="operateBtn" data-events="operateEvents" class="col-md-2">评价</th>
                </tr>
            </thead>
        </table>
     ID未完成任务评价

    如果后台传递的数据格式为json对象,需要在前台解析,并通过load方法将数据写入表格,load方法接收的数据格式如下:

    oad方法接收的数据

    下面是通过ajax从后台获取数据,并通过load方法给table赋值的例子,后台使用spring框架

    @RequestMapping(value = "/getAllSuperviseInformjson",method=RequestMethod.GET)  
        public @ResponseBody Object getAllSuperviseInformjson(ModelMap model) { 
            List<MaritimeSupervise> list = new ArrayList<MaritimeSupervise>(); 
            list = mpli.getAllSupervise();
            System.out.println("getAllAdministratCoercionInformjson:"+JSONArray.fromObject(list).toString());
            model.addAttribute("msg",list);   
            return model;
        }

    jquery.ajax取值

    $.ajax(
            {
                type:"GET",
               url:"http://localhost:8080/maritime/rest/getAllSuperviseInformjson",
                contentType: 'application/json',
                dataType:"json",
                success:function(json){
                    var data = json.msg;//要传入table的数据值
                    //bootstrap-Table获取数据
    
           //finishingTask为table的id $("#finishingTask").bootstrapTable('load',data);
                },
                error:function(){
                    alert("错误");
                }
            }
        )
  • 相关阅读:
    至少有K个重复字符的最长字串 分治法+递归
    旋转数组
    旋转链表 指针移动
    通过删除字母匹配到字典里最长的单词
    How to fix yum after CentOS 6 went EOL
    Centos6 yum源配置(CentOS 6停止更新)
    ORACLE 12C R2 RAC 安装配置指南
    Background Processes Specific to Oracle RAC
    如何缩小 Oracle 数据库中的临时表空间
    Script To Get Tablespace Utilization In Oracle Database 12c
  • 原文地址:https://www.cnblogs.com/ziyoublog/p/9178272.html
Copyright © 2011-2022 走看看