[转]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 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...
随机推荐
- CSS中详解height属性
目录结构: contents structure [+] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value describt ...
- android 控件各种颜色的半透明效果配置
格式: android:background="#XXxxxxxx"(颜色可以写在color中) 说明:半透明颜色值不同于平时使用的颜色,半透明颜色值共8位,前2位是透明度,后6位 ...
- 【转】IT业给世界带来的危机
IT业给世界带来的危机 昨天写了文章之后,回忆起这几年在湾区的经历,觉得自己是一个很不幸的人.然而就在今天,我的自怜奇妙的转换成了另一种感情,因为我看到了更不幸的人…… 正在女朋友 Cinny 的父母 ...
- 一个“蝇量级” C 语言协程库
协程(coroutine)顾名思义就是“协作的例程”(co-operative routines).跟具有操作系统概念的线程不一样,协程是在用户空间利用程序语言的语法语义就能实现逻辑上类似多任务的编程 ...
- cassandra运行出现了Unable to gossip with any seeds,cqlsh链接不上,提示connection refused处理办法
cassandra运行出现了Unable to gossip with any seeds,cqlsh链接不上,提示connection refused处理办法 问题描述 当启动了cassandra之 ...
- CentOS扩展库配置
背景:经常用到第三方的库,通过yum命令查询不到.例如:yum search ilbcWarning: No matches found for: ilbc 不要感叹,CentOS没你想象的支持力度那 ...
- PHP发送HEAD方法请求
HEAD方法在99%的web服务中支持(不完全统计,默认都是HEAD.POST.GET,除了某些极其特殊的应用会限制HEAD方法),HEAD方法有很多用途,比如探测网页的状态(HTTP头部信息,404 ...
- PHP中的$_SERVER超全局变量
详细参数 PHP编程中经常需要用到一些服务器的一些资料,特把$_SERVER的详细参数整理下,方便以后使用. $_SERVER['PHP_SELF'] #当前正在执行脚本的文件名,与 document ...
- ELK日志相关
转: Logstash 讲解与实战应用 原创qw871122016-08-20 16:06:07评论(1)40217人阅读 一.Logstash 介绍 Logstash 是一款强大的数据处理工具,它可 ...
- 最强 Android Studio 使用小技巧和快捷键总结
最强 Android Studio 使用小技巧和快捷键总结 写在前面 本文翻译自 Android Studio Tips by Philippe Breault,一共收集了62个 Android ...