一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

bootstrap table操作技巧分享

时间:2017-04-06 编辑:简简单单 来源:一聚教程网

本文实例为大家分享了bootstrap table操作的相关技巧,供大家参考,具体内容如下

源码

html代码:

 

 

  id

  名称

  ip

  国家

  

  

  提供商

 

 

 代码如下 复制代码

 data-pagination="true"data-cache="false"

 data-height="800"data-show-columns="true"

 data-smart-display="true"

 data-async=false

 data-query-params="bh_agt_queryParams"

 data-search="true"

 data-sortable="true"

 data-show-export="true"

 data-show-refresh="true"

 data-page-size="15"

 data-page-list="[15,30,60,120]"

 data-response-handler="bh_agt_bootstrapresp"

 data-row-style="table_rowFormatter"

 >

 

 

js代码:

 

 代码如下 复制代码

//生成后台数据请求参数。后台可以用request.getParameter获取

varbh_agt_queryParams=function(params){

 vartmp = bt_bhagent_paras//外面生成的json格式参数

 bt_bhagent_paras={}

 returntmp

}

varbh_agt_bootstrapresp=function(data){

 bt_bhagent_list = data;

 //这里是动态加载数据后的入口函数。

 //在这里可以对data进行二次加工生成retdata。

 //在这里也可以出发其它的关联动作,比如说画echart图。

 returnretdata

}

//对单行数据进行格式化,可以返回各种css

vartable_rowFormatter =function(row, index){

 if(row.succ =="SUCCESS"){

  return{ classes:'success'};

 }elseif(row.succ =="NOTING"){

 return{ classes:'warning'};

 }

 return{ classes:'danger'};

}

//加载Table数据

varbh_table_update =function(refresh,filter){

 if(refresh){

 $('#'+ filter.eTable).bootstrapTable('refresh',{

  url: filter.tableUrl

 });

 }else{

 $('#'+ filter.eTable).bootstrapTable({

  url: filter.tableUrl

 });

 }

}

 

知识点说明

  • bootstrapTable(‘refresh',{ url: filter.tableUrl}); 的方式在第一次加载数据时会失败。第一次加载数据不能带refresh动作。

  • 在非第一次加载数据时,必须执行refresh动作,否则数据不会更新到表中。

  • 如果向直接加载已有数据,则需要使用load动作。如:bootstrapTable(“load”,data);

热门栏目