[转]bootstrap table本地数据使用方法
原文地址: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本地数据使用方法的更多相关文章
- bootstrap table 和 x-editable 使用方法
最近需要做一些数据表格,有同事推荐EasyUI,但经过比较还是选择了Bootstrap,一款极为强大的表格组件,基于Bootstrap 的 jQuery .本文还将介绍Bootstrap-editab ...
- bootstrap table 获取数据后的前台页面(后台怎么传就不必详细说明了吧)
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ t ...
- bootstrap Table动态绑定数据并自定义字段显示值
第一步:我们在官网下载了bootstrap 的文档,并在项目中引入bootstrap table相关js文件,当然,也要记得引入jquery文件 大概如图: 第二步:定义一个table控件 第三步:j ...
- ios 保存本地数据的方法
1. NSString *path = [[NSBundle mainBundle] pathForResource:@"文件名" ofType:@"plist" ...
- bootstrap table load数据
直接load数据: $("#button").click(function(){ var name=$("input[name='name']").val(); ...
- bootstrap table分页,重新数据查询时页码为当前页问题
问题描述: 使用bootstrap table时遇到一个小问题,第一次查询数据未5页,翻页到第5页后,选中条件再次查询数据时,传到后端页码仍旧为5,而此时数据量小于5页,表格显示为未查询到数据. 处理 ...
- 表格组件神器:bootstrap table详细使用指南
1.bootstrap-table简介 1.1.bootstrap table简介及特征: Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单 ...
- Bootstrap Table使用分享
版权声明:本文为博主原创文章,未经博主允许不得转载. 最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问 ...
- 新的表格展示利器 Bootstrap Table
1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...
随机推荐
- JS遍历Table的所有单元格内容
用JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现: 这个方法的参数是唯一标识Table的id,用document对象的获取. function GetInfoFromTable(ta ...
- ThinkPHP 3.2 性能优化,实现高性能API开发
需求分析 目前的业务全站使用ThinkPHP 3.2.3,前台.后台.Cli.Api等.目前的业务API访问量数千万,后端7台PHP 5.6,平均CPU使用率20%. 测试数据 真实业务 php5.6 ...
- Debian本地镜像长时间不更新
一.执行apt-get update 使用一个长期未更新的本地源,得到错误的提示: Release file for ... is expired. Updates for this reposito ...
- STM8串口初始化寄存器配置
//库函数配置 UART1_DeInit(); UART1_Init((u32)1000000, UART1_WORDLENGTH_8D, UART1_STOPBITS_1, \ UART1_PARI ...
- Koa 框架 的错误处理
默认情况下Koa会将所有错误信息输出到 stderr,除非 NODE_ENV 是 "test".为了实现自定义错误处理逻辑(比如 centralized logging),您可以添 ...
- MongoDB索引相关文章-摘自网络
索引类型 虽然MongoDB的索引在存储结构上都是一样的,但是根据不同的应用层需求,还是分成了唯一索引(unique).稀疏索引(sparse).多值索引(multikey)等几种类型. 唯一索引 唯 ...
- mysql 主从同步遇到的问题(1032)
event_scheduler对主从的影响: 1 对于已经存在的主从, 新建立events没有影响. 2 对于新建立的主从,如果有events ,那么需要在从库上把event_scheduler设置为 ...
- [LeetCode] Palindrome Permutation I & II
Palindrome Permutation Given a string, determine if a permutation of the string could form a palindr ...
- GGGGCCCC
Evaluating and improving remembered sets in the HotSpot G1 garbage collector http://www.diva-portal. ...
- python(58):python下划线
详解Python中的下划线 本文将讨论Python中下划线(_)字符的使用方法.我们将会看到,正如Python中的很多事情,下划线的不同用法大多数(并非所有)只是常用惯例而已. 单下划线(_) 通常情 ...