Bootstrap Table使用心得总结

Bootstrap Table使用心得总结

之前一直在调研我们的管理后台使用的表格控件，查询到 : http://bootstrap-table.wenzhixin.net.cn的Bootstrap Table 感觉挺不错，但是由于官方的文档不是怎么的完善，导致自己的网络数据请求一直没有通过。

今天终于调试通过，在这里与大家分享一下。

一、相关的配置文件引入

二、编写表头和工具栏

其实整个表头的编写非常简单，只需要简单的几个配置就好。

注意，把每一个bean的属性书写在th中

注意绑定工具栏

可以参考如下配置

data-toolbar="#toolbar" // 这里必须绑定工具栏，不然布局会错乱

data-search="true"

data-show-refresh="true"

data-show-columns="true"

data-show-export="true"

data-export-types="['excel']"

data-export-options='{ // 导出的文件名

"fileName": "products",

"worksheetName": "products"

}'

>

&lhttp://t;th width="3%" data-field="issuerDescriptionScore">融资

&lhttp://t;th width="3%" data-field="issuerDescriptionScore">融资

三、绑定后端逻辑

因为，Bootstrap Table默认是使用了form表单的方式提交，其分页参数与查询参数都与我们的后端逻辑协议不一致。(官方就缺少这一部分的文档)

所以，我们需要更具其协议做一个自定义的配置。

$(function() {

$("#demo").bootstrapTable({

url: "http://ydjr.dev.chengyiwm.com/goldman-mgr/listProduct",

sortName: "prodId", //排序列

striped: true, //條紋行

sidePagination: "server", //服务器分页

clickToSelect: true, //选择行即选择checkbox

singleSNWckMsAVelect: true, //仅允许单选

searchOnEnterKey: true, //ENTER键搜索

pagination: true, //启用分页

escape: true, //过滤危险字符

queryParams: getParams, //携带参数

method: "post", //请求格式

responseHandler: responseHandler,

});

});

/**

* 默认加载时携带参数

*

* 将自带的param参数转化到cy的请求逻辑协议

*/

function getParams(params) {

var query = $("#searchKey").val();

console.log(JSON.stringify(params));

return {

head: {

userId: "11154",

skey: "6FC19FCE5D8DCF130954D8AE2CADB30A",

platform: "pc",

imei: "",

appVersion: "",

cityId: "",

platformVersion: NWckMsAV"",

deviceId: "",

channel: "",

protoVersion: 1,

isPreview: 2

},

body: {

'query': params.search, // 搜索参数

'start': params.offset, // 分页开始位置

'pageSize': params.limit, //每页多少条

}

}

}

/**

* 获取返回的数据的时候做相应处理，让bootstrap table认识我们的返回格式

* @param {Object} res

*/

function responseHandler(res) {

return {

"rows": res.body.listProduct, // 具体每一个bean的列表

"total": res.body.totalCount // 总共有多少条返回数据

}

}

Ok配置完成后给大家看看我们的显示效果：

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。