[转]bootstrap table本地数据使用方法

时间:2023-01-17 03:47:09

原文地址: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&quot ...

  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. jQuery AutoComplete在AJAX UpdatePanel环境中PostBack之后无法工作

    前些日子,Insus.NET有实现<ASP.NET MVC使用jQuery实现Autocomplete>http://www.cnblogs.com/insus/p/5638895.htm ...

  2. protobuf C&plus;&plus; 使用示例

    1.在.proto文件中定义消息格式 2.使用protobuf编译器 3.使用c++ api来读写消息 0.为何使用protobuf? 1.原始内存数据结构,可以以二进制方式sent/saved.这种 ...

  3. windows脚本配置ip地址

    背景:工作上经常涉及到要调试设备,每次都要手动配置静态ip地址,配置完之后还要重新改回来,有时候为了连续调试多台设备,来回手动更改ip,实在麻烦. 思考:想到windows有脚本,可以利用脚本文件达到 ...

  4. 从本地向 Github 上传项目步骤攻略(快速上手版)

    最近想把之前自己做的一些好玩的项目共享到Github,网上找了一圈上传教程,都感觉写的太深奥.复杂,云里雾里,特把自己的方法纪录如下: PS:这种方式一般适用于:开始做项目时,没有直接在github上 ...

  5. scp命令的用法详解

    这篇文章主要是参考了http://blog.csdn.net/jiangkai_nju/article/details/7338177这个博客,要看详细的内容可以参考这个博客进行学习研究,但是我觉得在 ...

  6. Linux Kernel CMPXCHG函数分析

    原文地址:http://blog.csdn.net/penngrove/article/details/44175387 最近看到Linux Kernel cmpxchg的代码,对实现很不理解.上网查 ...

  7. 最火的&period;NET开源项目(转)

    综合类 微软企业库 微软官方出品,是为了协助开发商解决企业级应用开发过程中所面临的一系列共性的问题, 如安全(Security).日志(Logging).数据访问(Data Access).配置管理( ...

  8. D3画图学习一

    一.D3画图简介 D3 是最流行的可视化库之一,它被很多其他的表格插件所使用.它允许绑定任意数据到DOM,然后将数据驱动转换应用到Document中.你可以使用它用一个数组创建基本的HTML表格,或是 ...

  9. 使用crontab创建 linux 系统定时任务&num;

    任务1: 每隔1分钟,运行一次 /home/sn/yeelink.sh文件 ,用于上传数据到www.yeelink.net 1. 先在当时目录里面创建一个cronfile文件 vim cronfile ...

  10. H264-YUV通过RTP接收视频流ffmpeg解码SDL实时播放

    写在前面的话 写一个简单的播放器,通过RTP接收视频流,进行实时播放.最初,使用ffplay或者vlc接收按照SDP协议文件可以播放视频,但是视频中断后重启,不能正确的解包,时常会出现如下的错误信息. ...