bootstrap-table前端修改后台传来的数据重新进行渲染
使用bootstrap-table显示数据,后台传回数据以后,可能需要对其做调整,如需要前端为数据添加单位
调整数据代码
$("#"+tableId).bootstrapTable({
dataType: "json",
method: 'get',
contentType: "application/x-www-form-urlencoded",
cache: false,
url:url,
sortName:sortName, //排序列名
sortOrder: sortOrder,//排位命令(desc,asc)
queryParams: queryParams,
columns:columns,
pagination:true,
sidePagination:'server',
pageNumber:1,
pageSize:10,
pageList:[10],
onLoadSuccess:function(data){
//通过对data判断
if("rate" in data["rows"][0]){
var result = data["rows"];
$.each(result,function(index,content){
content["rate"] =content["rate"]+"%";ze5year"] =content["authorize5year"]+"%";
})
$("#"+tableId).bootstrapTable("load",data)
}
},
代码的解释
数据通过onLoadSuccess返回,此时数据已经渲染到页面中,这里将返回的数据对应的列中加上相应的单位(“%”)之后,使用
$("#"+tableId).bootstrapTable("load",data)重新加载到表格中,数据即得以改变
bootstrap-table前端修改后台传来的数据重新进行渲染的更多相关文章
- django:bootstrap table加载django返回的数据
bootstrap table加载表格数据有两类方式: 一种通过data属性的方式配置,一种是javascipt方式配置 这里看js配置方式: 1.当数据源为.json文件时 url参数写上json文 ...
- Bootstrap table前端分页(ssm版)
说明bootstrap table可以前端分页,也可以后端sql用limit分页.前端分页下性能和意义都不大,故一般情况下不用这种,请看我的另一篇后端分页的博客源码下载地址:https://git.o ...
- bootstrap table 前端搜索
1.bootstrap-table对于前端的搜索可以通过官网设置,但发现前端搜索出现bug,网上找到一个bootstrap-table的扩充js bootstrap-table-mytoolbar. ...
- 通过form表单上传文件获取后台传来的数据
小伙伴是不是遇到过这样的问题,通过submit提交form表单的时候,不知怎么获取后台传来的返回值.有的小伙伴就会说你不会发送ajax,其实也会.假如提交的form表单中含有文件,怎么办? 步骤1:想 ...
- BootStrap table动态增删改表格内数据
1:添加一个[操作]列 { title: "操作", align: 'center', valign: 'middle', width: 160, // 定义列的宽度,单位为像 ...
- bootstrap table 根据单元格中的数据改变单元格的样式
在bootstrap-table.js里面列属性 formatter就是用来格式化单元格的,其默认值是undefined 类型是function,function(value, row, index ...
- bootstrap table通过ajax获取后台数据展示在table
1. 背景 bootstrap table 默认向后台发送语法的dataType为 json,但是为了解决跨域问题我们需要将dataType改为jsonp,这时就需要修改bootstrap table ...
- [前端插件]Bootstrap Table服务器分页与在线编辑应用总结
先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...
- bootstrap table + spring + springmvc + mybatis 实现从前端到后端的表格分页
1.使用准备 前台需要的资源文件,主要有Bootstrap3相关css.js以及bootstrap Table相关css.js: <-- 样式 --> <link rel=" ...
随机推荐
- vue $refs的基本用法
<div id="app"> <input type="text" ref="input1"/> <butto ...
- POJ 2528 Mayor's posters (线段树+离散化)
Mayor's posters Time Limit: 1000MS Memory Limit: 65536K Total Submissions:75394 Accepted: 21747 ...
- Luogu P2852 [USACO06DEC]牛奶模式Milk Patterns
题目链接 \(Click\) \(Here\) 水题.利用\(Height\)的性质维护一个单调栈即可. #include <bits/stdc++.h> using namespace ...
- Vue(基础三)_监听器与计算属性
一.前言 本文主要涉及: 1.watch()监听单个属性 2.computed可以监听多个属性 3.点击li标签切换音乐案例 二.主要内容 1.watch()监听器(监听单一数据) (1)监听 ...
- 原生JS实现全选和不全选
案例演示 源代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- 应用实战:从Redis到Aerospike,我们踩了这些坑
个推专注为开发者们提供消息推送服务多年.通过个推SDK,手机终端与服务器建立长连接,维持在线状态.然而在网络异常等情况下,消息无法实时送达到终端用户,因而推送服务器建立了一份离线消息列表,以待用户重新 ...
- opencv: 轮廓提取;
一般轮廓提取是通过对图像的梯度进行卷积计算,得到图像边缘(滤波),常用的边缘检测方法有candy.sobel. Laplacian等,再对二值化后的边缘图像进行轮廓计算: 1.Candy算子: cv: ...
- python类继承的重写和super
给已经存在的类添加新的行为,继承是非常好的实现方式.但是如果要改变行为呢?比如在Python继承扩展内置类,我们的contact类只允许一个名字和一个邮箱,但是如果要对某些人增加电话号码呢?这里可以通 ...
- jenkins配置小结
启动jenkins:javaw -jar -Dhudson.model.DirectoryBrowserSupport.CSP= jenkins.war --httpPort=8001 wget h ...
- Event Recommendation Engine Challenge分步解析第四步
一.请知晓 本文是基于: Event Recommendation Engine Challenge分步解析第一步 Event Recommendation Engine Challenge分步解析第 ...