关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结

关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结

    Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件, 简单易用, 且功能强大。越来越多的企业级项目开发中会用到, 关于BT的基本使用本文不作赘述,有需要的可以查阅官方文档。
    在使用过程中,可能需要对BT查询返回的数据做操作,比如计算某一列的和,或者填充某行某个字段值,那么就需要用到回调。


Bootstarp Table提供了丰富的Events和Mebthods (详情查阅Bootstarp Table官方文档),这边只介绍两个回调函数。 
1.onLoadSuccess() 
此方法在Bootstarp Table数据成功加载返回后触发,参数为data(注意:data传入的数据是分页后的数据,并不是所有查询出来的数据,如果limit为10,那么就是10条数据),此时表格行数据尚未渲染,此时可以对数据进行更新或取值操作。

$("#id").bootstrapTable(‘updateRow‘, {
                    index: rowIndex,
                    row: rowData
});

2.onPostBody() 
此方法在Bootstarp Table 行数据渲染后触发,参数为data,此时要注意,如果执行了上面的updateRow操作,由于表格刷新了,所以又会触发onPostBody(),然后会陷入死循环,导致页面数据一直加载不出来。



总结:如果回调只是获取行数据,做一些逻辑,不涉及表格更新操作,可以使用onPostBody(),否则要使用onLoadSuccess()

原文地址:https://www.cnblogs.com/wangjintao-0623/p/10177817.html

时间: 2024-10-05 05:50:54

关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结的相关文章

bootstrap Table API和一些简单使用方法

官网: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 后端分页问题:后端返回"rows".""total,这样才能重新赋值 先初始化表格 $('#my-table').bootstrapTable({ method:'POST', dataType:'json', contentType: "application/x-www-form-urlencoded", cach

Bootstrap Table的使用小结

1.Jquery中的一些东西学习一下子,补充完善一下,毕竟有些时候没有使用到 这个方式很有用,在使用bootstrap table的时候,选择当前已经选择的节点的事件中的ID的值 当前rows中有很多的数据,但是我只需要id这一个值,这个时候进行操作就非常的简单了. $.map(data,function(item,index){return XXX}) 使用的总结: 把一个数组,按照新的方式进行组装返回,和原来的数组不一样. 遍历data数组中的每个元素,并按照return中的计算方式 形成一

.Net MVC+bootstrap Table学习

一.效果展示 二.使用方法 1).相关css和js的引用 <link href="~/Themes/Bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Themes/Bootstrap/css/bootstrap-table.css" rel="stylesheet" /> <!-----------------------

JS组件系列——Bootstrap Table 表格行拖拽

原文:JS组件系列--Bootstrap Table 表格行拖拽 前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成

bootstrap table 服务器端分页--ashx+ajax

1.准备静态页面 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <meta charset="utf-8" /> 7 <link rel="

Bootstrap Table Fixed Columns

最近在使用BootStrap 做项目前端,自然也用到了  Bootstrap Table. 推荐大家多去这个http://bootstrap-table.wenzhixin.net.cn/zh-cn/  网站看看,上面有很详细的介绍以及其他扩展功能 下面写下 Fixed Columns(固定列)的使用方法.附件下载地址:http://pan.baidu.com/s/1kUEQTPt 1.引用css文件,js文件(注意引用顺序) <link rel="stylesheet" hre

html5 jquery bootstrap table 直接使用

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-w

JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能覆盖似乎不太现实,博主挑选了一些自认为比较常用的功能在此分享给各位园友.源码也在这篇统一给出.好了,不多说废话,开始我们的干货之旅吧. bootstrap table系列: JS组件系列——表格组件神器:bootstrap table JS组件系列——表格组件神器:bootstrap table(二

Bootstrap table

Bootstrap table: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css"> </head> <