bootstrapTable使用场景及方式

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

<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,

}

 $("#"+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比这方便，但总有老系统还是使用旧的技术

秒客网

bootstrapTable使用场景及方式

相关文章