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 相关文章推荐
JavaScript与函数式编程解释
Apr 27 Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
js面向对象的写法
Feb 19 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
基于jQuery ligerUI实现分页样式
Sep 18 Javascript
如何用RxJS实现Redux Form
Dec 29 Javascript
8个有意思的JavaScript面试题
Jul 30 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
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
DWR Ext 加载数据
2009/03/22 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
js实现录音上传功能
2019/11/22 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
windows下ipython的安装与使用详解
2016/10/20 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
财务会计专业毕业生自荐信
2013/10/19 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
火灾现场处置方案
2014/05/28 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
车间统计员岗位职责
2015/04/14 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
python 爬取吉首大学网站成绩单
2021/06/02 Python
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS