原文地址:http://www.giserdqy.com/language/h5/bootstrap/1136

data对应columns进行组合

 var columns = [
{
field: 'fid',
title: '编号',
align: 'center',
halign: 'center',
valign: 'middle',
width: '50%'
}, {
field: 'realval',
title: '施工状态',
formatter: function (index, row) {
var d = row['realval'];
if (d == 1.0) {
return '完工'
}
return '未完工';
},
align: 'center',
halign: 'center',
valign: 'middle',
width: '50%'
}
];
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
data: data,
classes: 'table table-hover',
//height: 400,
//url: queryUrl, //请求后台的URL(*)
//method: 'GET', //请求方式(*)
//toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
//cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
//pagination: true, //是否显示分页(*)
//sortable: true, //是否启用排序
//sortOrder: "asc", //排序方式
//sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
//pageNumber: 1, //初始化加载第一页,默认第一页,并记录
//pageSize: rows, //每页的记录行数(*)
//pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
search: false, //是否显示表格搜索
strictSearch: false,
showColumns: false, //是否显示所有的列(选择显示的列)
//showRefresh: true, //是否显示刷新按钮
//minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
uniqueId: "fid", //每一行的唯一标识,一般为主键列
showToggle: false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
//得到查询的参数
//queryParams: function (params) {
// //这里的键的名字和控制器的变量名必须一致,这边改动,控制器也需要改成一样的
// var temp = {
// rows: params.limit, //页面大小
// page: (params.offset / params.limit) + 1, //页码
// sort: params.sort, //排序列名
// sortOrder: params.order //排位命令(desc,asc)
// };
// return temp;
//},
columns: columns,
onLoadSuccess: function () {
},
onLoadError: function () {
showTips("数据加载失败!");
},
onClickRow: function (row, $element) {
return;
var featureid = row.fid;
var realval = row.realval;
if (realval == 1) {
realval = 0;
} else {
realval = 1;
}
updatePlanVal(featureid, realval);
},
onDblClickRow: function (row, $element) {
var id = row.ID;
EditViewById(id, 'view');
}
});
$('#table').on('post-body.bs.table', function (e) {//渲染完成,重新设置高度
var h = $('#table').height();
if (h > 500) {
$('#table').bootstrapTable('resetView', { 'height': 300 });
}
});

###获取bootstraptable数据

 var data = $('#table').bootstrapTable('getData');

###重新设置bootstraptable数据

$('#table').bootstrapTable('load', newData);

[转]bootstrap table本地数据使用方法的更多相关文章

  1. bootstrap table 和 x-editable 使用方法

    最近需要做一些数据表格,有同事推荐EasyUI,但经过比较还是选择了Bootstrap,一款极为强大的表格组件,基于Bootstrap 的 jQuery .本文还将介绍Bootstrap-editab ...

  2. bootstrap table 获取数据后的前台页面(后台怎么传就不必详细说明了吧)

    <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ t ...

  3. bootstrap Table动态绑定数据并自定义字段显示值

    第一步:我们在官网下载了bootstrap 的文档,并在项目中引入bootstrap table相关js文件,当然,也要记得引入jquery文件 大概如图: 第二步:定义一个table控件 第三步:j ...

  4. ios 保存本地数据的方法

    1. NSString *path = [[NSBundle mainBundle] pathForResource:@"文件名" ofType:@"plist" ...

  5. bootstrap table load数据

    直接load数据: $("#button").click(function(){ var name=$("input[name='name']").val(); ...

  6. bootstrap table分页,重新数据查询时页码为当前页问题

    问题描述: 使用bootstrap table时遇到一个小问题,第一次查询数据未5页,翻页到第5页后,选中条件再次查询数据时,传到后端页码仍旧为5,而此时数据量小于5页,表格显示为未查询到数据. 处理 ...

  7. 表格组件神器:bootstrap table详细使用指南

    1.bootstrap-table简介 1.1.bootstrap table简介及特征: Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单 ...

  8. Bootstrap Table使用分享

    版权声明:本文为博主原创文章,未经博主允许不得转载. 最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问 ...

  9. 新的表格展示利器 Bootstrap Table

     1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...

随机推荐

  1. 基于matplotlib的数据可视化 - 柱状图bar

    柱状图bar 柱状图常用表现形式为: plt.bar(水平坐标数组,高度数组,宽度比例,ec=勾边色,c=填充色,label=图例标签) 注:当高度值为负数时,柱形向下 1 语法 bar(*args, ...

  2. golang学习笔记 --- goroutine

    package main import ( "fmt" "io" "io/ioutil" "net/http" &quo ...

  3. 还没被玩坏的robobrowser(1)-简介

    今天偶然发现了一个很有意思的python库——robobrowser.简单的看了一下,觉得这个东东作为轻量的爬虫还是很适合的.另外这个做一些简单的web测试也未尝不可. 好了,那么问题来了. 什么是r ...

  4. android发送短信代码(短信内容超长处理)

    一条短信只可容纳70个中文,所以当短信长度超过70个中文字符时程序就要特殊处理了. 有两种方式: 1.通过sendTextMessage()方法依次发送拆分后的短信,该方式有个弊端就是用户会分条收到短 ...

  5. Android Studio入门指南 (历上最全,全球首发)

    下载地址:http://pan.baidu.com/s/1CEMma 8月份的时候因为Android开发团队全部使用Android Studio进行开发,所以我整理了Android Studio的一些 ...

  6. C#基础课程之三循环语句

    for循环: ; i < ; i++) { Console.WriteLine("执行"+i+"次"); } while循环: while (true) ...

  7. windows 自动移动maven jar包到jmeter 文件夹下面

    jmeter 自动移动maven jar包到jmeter 文件夹下面 bat 文件 rem 本文件放在jmeter 脚本maven项目根目录下面,和pom.xml在同一个文件夹下面 rem 预置条件, ...

  8. xp中使用grubdos安装ubuntu13.04

    http://www.cnblogs.com/ggjucheng/archive/2012/08/18/2645916.html 根据以上帖子安装ubuntu13.04 当重启,进入ubuntu in ...

  9. 尼康G镜头与D镜头的差别

    尼康系统实现自动对焦必须:机身和镜头,两者至少其一拥有马达. 尼康现在新出的G头,几乎都带马达.但在胶片时代的G头,几乎都不带马达. G只表示:没有手动光圈环. D只表示:镜头能提供距离信息给机身. ...

  10. zabbix 对网卡的流量的监控

    新建Template:Network incoming or outcoming on eth1 新建items:Network incoming on eth1 特别注意:储存值:差量(每秒速率)- ...