原文地址: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. 【java】详解java中的注解(Annotation)

    目录结构: contents structure [+] 什么是注解 为什么要使用注解 基本语法 4种基本元注解 重复注解 使用注解 运行时处理的注解 编译时处理的注解 1.什么是注解 用一个词就可以 ...

  2. 【Oracle】Oracle中dump函数的用法

    一.函数标准格式: DUMP(expr[,return_fmt[,start_position][,length]]) 基本参数时4个,最少可以填的参数是0个.当完全没有参数时,直接返回null.另外 ...

  3. 解决线上服务logback 乱码问题

    从网上查询资料 获得以下结果 1 设置 project 和file 文件为utf-8 编码 2 设置 logback 文件内容 <appender name="CONSOLE" ...

  4. 为什么说,长跑和爬山能锻炼意志?因为要不停的run,run,run......

    长跑和爬山教会我们的是无论做什么都要坚持,教会我们的是生活的态度. 如果不能体会到这一点,那你长跑的意义就是纯粹的锻炼身体. 中国教育的最大败笔就是教会了人学习,却没教会人思考.

  5. Aborted connection 1055898 to db: 'xxx' user: 'yyy' host: 'xxx.xxx.xxx.xxx' (Got timeout reading communication packets)

    mysql错误日志中,发现大量以下类似信息:(mysql 5.7.18) [Note] Aborted connection 1055898 to db: 'xxx' user: 'yyy' host ...

  6. 【Android】图片切角,切指定的边。

    公司的项目,UI和应用都是我自己做的.前几天设计了一个UI,出现了半边圆角的情况,如下图片所示.图片都来自服务器,肯定不能要求返回的图片按这个格式,必须在应用端对图片进行切角. Google了好久,发 ...

  7. 阮一峰 IaaS,PaaS,SaaS 的区别

    链接: IaaS,PaaS,SaaS 的区别 作者: 阮一峰 日期: 2017年7月23日 越来越多的软件,开始采用云服务. 云服务只是一个统称,可以分成三大类. IaaS:基础设施服务,Infras ...

  8. JAXB--@XmlType注解标注xml生成顺序

    默认情况下,Jaxb编组出来的xml中的字段顺序是随机的,你可以使用@XmlType的propOrder属性 来指定序列化的顺序.   第一步:定义java类时,使用@XmlType(propOrde ...

  9. 如何运行你的Android程序?

    原文链接:http://android.eoe.cn/topic/android_sdk 本文中你将了解到: 1. 在真机上运行App 2. 在模拟器上运行App 你还应该阅读: 1. Using H ...

  10. 深入理解Linux内核-进程

    1.进程的静态特性 进程:程序执行时的一个实例 进程描述符(task_struct): 进程的基本信息(thread_info).指向内存区描述符的指针(mm_struct).进程相关的tty(tty ...