bootstrap table操作技巧分享


Posted in Javascript onFebruary 15, 2017

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

源码

html代码:

<table id="agenttable" data-toggle="table" 
 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"
 >
 <thead>
 <tr>
  <th data-field="id" data-align="center" data-sortable="true" bgcolor="#FF0000">id</th>
  <th data-field="name" data-align="center" data-sortable="true">名称</th>
  <th data-field="agentip" data-align="center" data-sortable="true">ip</th>
  <th data-field="country" data-align="center" data-sortable="true">国家</th>
  <th data-field="province" data-align="center" data-sortable="true">省</th>
  <th data-field="city" data-align="center" data-sortable="true">市</th>
  <th data-field="carrier" data-align="center" data-sortable="true">提供商</th>
 </tr>
 </thead>
</table>

js代码:

//生成后台数据请求参数。后台可以用request.getParameter获取
var bh_agt_queryParams=function(params){
 var tmp = bt_bhagent_paras//外面生成的json格式参数
 bt_bhagent_paras={}
 return tmp
}
var bh_agt_bootstrapresp=function(data){
 bt_bhagent_list = data;
 //这里是动态加载数据后的入口函数。
 //在这里可以对data进行二次加工生成retdata。
 //在这里也可以出发其它的关联动作,比如说画echart图。
 return retdata
}
//对单行数据进行格式化,可以返回各种css
var table_rowFormatter = function(row, index){
 if (row.succ == "SUCCESS"){
  return { classes: 'success' };
 }else if (row.succ == "NOTING"){
 return { classes: 'warning' };
 }
 return { classes: 'danger' };
}
//加载Table数据
var bh_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);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
非常好的js代码
Jun 27 Javascript
索趣科技的答案
Feb 07 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
js字符串转成JSON
Nov 07 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
JS自定义右键菜单实现代码解析
Jul 16 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 #Javascript
JS原型与原型链的深入理解
Feb 15 #Javascript
js中数组插入、删除元素操作的方法
Feb 15 #Javascript
jQuery中on方法使用注意事项详解
Feb 15 #Javascript
防止重复发送 Ajax 请求
Feb 15 #Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 #Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 #Javascript
You might like
在服务端进行目录建立、删除,文件上传、删除的过程的php代码
2008/09/10 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
让你的网站可编辑的实现js代码
2009/10/19 Javascript
javascript Object与Function使用
2010/01/11 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
puppeteer实现html截图的示例代码
2019/01/10 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
python根据距离和时长计算配速示例
2014/02/16 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
python TCP包注入方式
2020/05/05 Python
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
工商治理实习生的自我评价
2014/01/15 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
酒店员工职业生涯规划
2014/02/25 职场文书
先进班集体事迹材料
2014/12/25 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
2016保送生自荐信范文
2016/01/29 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang
js前端图片加载异常兜底方案
2022/06/21 Javascript