今天要做一个报表导入并预览的功能,使用layui的文件上传,获取表格数据,接着把表格数据返回前台,使用bootstraptable展示,实现一个预览表格数据的效果。通过后台处理后的数据bootstraptable加载数据,其实具体实现不难,今天要讲的是在实现数据加载之后,我们出现了一些问题,我会附源码讲解问题的解决方案分享给大家
这个实现其实不难,但是,没想到的是,接下来的步骤出问题了,因为我们需要实现BootstrapTable重新加载,这种问题有以下两种解决方案:
最重要的一点,写在最前面:BootstrapTable一个页面只能加载一次;想要重新加载,就必须先销毁 , 再重新初始化Bootstraptable。
销毁的方法:
$(‘#id’).bootstrapTable(‘destroy’);
好了,接下来我们来看以以下具体实现方式
在table上方添加了文本输入框,用于查询过滤table中的数据,因此需要根据查询条件,重新向后台向DAO层发送请求,返回新的结果。
这是一开始进入页面加载的表格。
想要实现的效果:
此时我需要在表格上方,加上文本输入框,并添加 查询按钮 ,点击查询按钮,把输入的条件加入到 表格参数 queryParams 中,通过数据库的查询 返回数据,并更改表格结构和内容,做到重新加载的效果。
但是失败了。
需要在点击查询按钮时,首先调用 表格销毁方法
接着再重新加载新的表格:
注意:具体实现代码太过庞大,所以以上代码并不完整只是提供思路。