如何读出bootstbootstraptable刷新加载的所有值

来源：蜘蛛抓取(WebSpider) 时间：2017-05-22 10:04 标签： bootstraptable刷新

在我们构建BootStrbootstraptable刷新(下文中均称：BsTable)其中columns参数作为表格列的内容存储，我们的需求是根据返回的数据动态的生成columns参数的内容从而生成动态表格。
columns参数格式：类似下文 

需求：通过点击按钮发送ajax请求针对请求返回的数据进行动态表格的构建。

按钮构造：设置点击事件


  

点击事件编写：dataQuery.js (注意：这里将逐段解析最後将贴上完整版代码)

1.获取html页面元素值

，所以要先从页面上获取两个元素的值：类选择器选择元素获取对应值


  

2.选定页面表格元素，发送ajax请求构建BSTable

页面上的表格元素：采用beetl的标签，将重复使用的html代码用一行代码标签代替方便使用，易于维护


  

  

    
      

        
      

    
    
      

        
      

      

        
      

      

        
      

      

        
      

      

        
      

      

        
      

      

        
      

    
  

  

    2.2 ajax请求成功，根据返回json数据构造動态表头

    2.2.1 初始化自定义动态表头数组
  

  
 
 


  
 
 
 
 


  

    这段代码我们可以结合浏览器F12查看Object.keys(json[0])中的具体内容：模拟一个请求/test。

    2.2.3 构造表格构造表格前要进行table销毀，否则会保留上次加载的内容
  

  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


  

    2.3 ajax请求失败弹窗报告错误信息，页面重加载
  

  

 
 


  

    3.测试动态表格生成结果

    3.1 测试分两部分首先获取请求所得到的json數据，模拟请求获取100条数据
  

  

    3.2 查看请求所返回的json数据

  

  

    3.2 测试动态表格生成 上述的请求可以正常返回数据那我们通过ajax请求所构建的动态BSTable呢？
  


  请求为：SQL语句/链接信息ajax请求返回json数据，与上述请求一致

  查看我们的动态表格生成状况：

  宾果，至此BootStrbootstraptable刷新动态表格功能已实现


                            

                                                    

                                

  

bootstrap的table属性已经很熟悉了最近遇到┅个问题，犹豫每个列表加载的数据需求不同所以需要动态的更换表头。 网上有很多加载表格数据的例子但是却没有找到如何动态加載表格，再加在数据 虽然可以一个表格加载一种数据，但是本着学习的态度尝试了下这种方式结果发现是可以执行的。分享下思路和實现过程以备日后使用。

  
 
1、写接口查询出要展示的列。注意接口中必须要有字段中文名称（columns属性的title值）字段的英文名称（columns的field字段），特别注意filed字段应该与最后查询出的列表中返回的json数据中的key保持一致不然取不到值。
2、ajax请求刚才的接口查询出columns，并给table的columns赋值
3、加载表格展示。
大致代码如下：

  
// 未查询到相应的列展示默认列 //没查到列的时候把之前的列再给它 // 异步获取要动态生成的列
  

  
//点击左侧树后重新加载表格
 
 

  
  

  
  
需要注意的是bootstrap的table提供了两个刷新的方法，一个refresh一个refreshOptions，前者只是刷新当前表格后者会将表格中的组件全部更新一遍，因为我们替换了url和columns所以需要调用后者。
展示效果：
动态加载表头其实就是类似Echart中动态加载数据的感觉一样只是改变整个Option中的相关属性即可。
优點：代码量会大大减少当我们要加载不同数据且样式一样的表格的时候可以采用这样的方式。
缺点：样式很难维护前端人员不好定位bug，所以很难修改相应的样式bug
依据项目实际情况，择优使用吧

  
  

  

  



                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 bootstraptable刷新 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐