最近开发的项目中表格组件用的是bootstrap-table，由于第一次用加之官方文档写的比较简单，所以踩了不少雷，浪费了大把的时间，这里把雷都罗列出来，希望可以帮助到大家~ 请叫我雷锋^>^
1. 表格多语言的开发设置
由于业务需要，项目要实现多语言切换，自然表格的字段显示也需跟随系统语言环境来切换。项目是基于react框架的，多语言是基于react-intl实现，利用组件API-injectIntl 这个高阶组件可以拿到当前系统的语言环境，那么接下来就是对表格配置文件的开发。根据官方文档，我们可以看到，bootstraptable是支持多语言的，具体的表格语言环境在该目录下：/node_modules/bootstrap-table/dist/locale；
自然你导入什么语言包表格就会展示对应得语言。但是因为我们是要实现切换的，所以这个语言包不能写死，需要跟随当前语言环境自动导入。我们找到表格样式的配置文件，通过injectIntl来获取当前语言环境，从而导入对应的表格语言包；
导入对应的表格语言包
上述设置后可以实现语言的切换，但是切不回来，就是说由A语言可以切到B语言，但是不能从B语言切回来，说明导入的语言包发生了覆盖，这并不是我们需要的，所以继续寻找，最后发现表格其实自带locale属性（官方文档中没有），找到表格的配置文件--Table.js（刚才是样式的设置文件），
表格配置文件
首先我们用 injectIntl 包裹Table组件，可以利用this.props.intl.locale拿到当前系统的语言环境，并赋值給表格的locale 属性。至此大功告成，完美的实现了表格的多语言。
2. 后台返回数据发生变化是如何处理
bootstraptable请求有默认的数据处理格式，如果后台返回的格式不是默认的，那就需要前端对数据进行处理。在项目中后台对默认的数据又包裹了一层，为了可以正确展示数据，只能各种找资料并尝试。
表格需要的返回数据
现在返回的数据
当前返回的格式表格解析不了啊！各种浪里淘沙终于发现了responseHandler，根据该API释义，他的作用就是把数据转换为bootstrp-table能接受的数据格式，抓紧试了一下子。
api解析返回数据
可以看到responseHandler这个API做的事情就是设置total和rows两个属性的值，这两个值分别表示表格的总页数和要展示的数据。因为数据中包裹了返回状态，所以还需要在返回成功的回调中进行设置。
设置回调
对后台数据处理以后我们需要表格重新渲染，bootstraptable有个onLoadSuccess函数，当远程数据加载成功时会触发，找到对应的源码重写了该函数。对返回数据状态进行一次判断，如果返回state为success时触发this.&table.boostrapTable('load",data)，load会加载data数据替换掉旧数据，重新渲染表格。这时表格数据就可以正确渲染啦~
3. 如何设置请求头
项目要是实现多语言当然不仅只是前端展示，可能还会涉及到后台，所以需要前端在发请求的时候带上当前的语言环境，我们项目的实现方式是，在请求头中加一个字段CurrentlangType。首先还是要利用react-intl组件中的injectIntl包裹表格组件，再利用this.props.intl.locale拿到当前的语言环境，然后进行如下设置：
请求头设置
成功添加
打开网络请求发现成功添加~
其他请求头的设置类似！
4. 其他设置
值得注意的是bootstraptable请求的参数是Formdata格式
表格初始化、search、loaded、selections等方法可以单独配置一个文件进行初始化。
表格方法的配置
文章内容到此结束，如有错漏，欢迎斧正！
网友评论