bootstrapTable使用场景及方式

场景一：混合开发，适用jsp、php前端不足  纯html结构

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<div>     <table id="table"         data-toggle="table"         data-url="http://guessulike.config.58v5.cn/gulrecomserviceweb/gulrecall/getscene"         data-pagination="true"          data-search="true"         data-show-columns="true"         data-show-refresh="true"         data-show-toggle="true"         data-page-number="1"         data-page-size="15"         data-sort-name="create_time"         data-sort-order="desc"         data-page-list="[10, 25, 50, 100, All]"         data-click-to-select="true"         data-single-select="true"         data-toolbar="#toolbar">         <thead>             <tr>                 <th data-field="state" data-checkbox="true"></th>                 <th data-field="scene_name" data-switchable="true">推荐位名称</th>                 <th data-field="scene" data-switchable="true">场景</th>                 <th data-field="creater" data-switchable="true">创建者</th>                 <th data-field="create_time" data-sortable="true" data-switchable="true">创建时间</th>                 <th data-field="managers" data-switchable="true">授权账号</th>             </tr>         </thead>     </table> </div>

　　

 

场景二：混合开发或前后端未完全分离，前端人员不足或不成体系，按照bootstrapTable返回响应固定结构

{

　　rows:[],

　　total:100,

}

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

$("#"+this.table).bootstrapTable({            url:'../data/bootstrap-table.json',            method:'get',//使用get方式请求服务器获取数据            queryParamsType : "",            dataField:"data",            queryParams:params=>{                this.param=this.getFormJson(this.formId)                this.param["pageSize"] = params.pageSize;                this.param["pageNumber"] = params.pageNumber                this.param['order'] = params.order;                this.param['limit'] = params.limit;                return this.param ;            },            onLoadSuccess: function(){  //加载成功时执行              },            onLoadError: function(){  //加载失败时执行              },            sidePagination : "server",            fixedColumns: true,            fixedNumber: 0,            height:getHeight()        });

　　

场景三：前后端完全分离状态，自定义响应结构体系，前端封装公共js库、ajax请求

        
function ajaxRequest(params){
            //封装ajax 十里;
            $apis.users.getlist(function(re){
                var message = rs.array;
                    
                      params.success({ //注意，必须返回参数 params
                        total: rs.total,
                        rows: res.list
                    });
            })
            
        }

 $("#"+this.table).bootstrapTable({
            ajax:ajaxRequest,
            onLoadSuccess: function(){  //加载成功时执行

            },
            onLoadError: function(){  //加载失败时执行

            },
            sidePagination : "server",
            fixedColumns: true,
            fixedNumber: 0,
            height:getHeight()
        });

 

简单事例、、虽说vue elementUI比这方便，但总有老系统还是使用旧的技术