两种表格工具,今天都用到了,一种是我前几篇写到过的jqgrid,(传送门)另一个就是bootstrap-table了。用过之后会发现,两种表格的方式大同小异,但是为什么这次要换成bootstrap-table呢,是因为我们在写树形结构,由于jqgrid 的树形结构的数据结构和字段要求的太多的,导致了后台再提供数据的时候需要格式化(实话实说,这个要求的有点多),如果有兴趣,大家可以看我这篇博客(传送门)。所以,我们决定使用bootstrap-table的树形结构来结果这个问题。引入css和js文件是第一步,这里我放cdn地址,如果失效了,大家请自行下载

 <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css" rel="stylesheet"> //树形结构的文件,如果没有用到,请删除
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/extensions/treegrid/bootstrap-table-treegrid.js"></script> //树形结构的文件,如果没有用到,请删除
<script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script> //树形结构的文件,如果没有用到,请删除

  首先是利用bootstrap-table来加载数据。然后只需要设置几个基本的“idField”,“treeShowField”,“parentIdField”字段就可以得到树形接口,非常的简单,不多说,直接放代码:

  $table = $("一个table标签的id");

         $table.bootstrapTable({
url: base_url + '/Gamecharm/show.php',//接口地址
//url: "__ROOT__/public/js/data.json",//我本地测试的接口地址
method:"get",//接口地址获取的方式,post或者get
//data:data,//如果是我们自己用ajax获取数据,或者说数据就是本地的,需要放在这里
idField: 'id',//父元素的标识,这里我们使用的是id
pageNumber:1,//默认第几页
responseHandler:function(res) { //这个其实是和jqgrid中的jsonReader ,就是说bootstrap中和jqgrid一样,都有默认的字段,如果后台给我们的不是默认的,所以就需要我们自己更改 如果还是不明白,请看链接 return {
"data": res.datas //主数据
//"total": res.result.total
};
},
queryParams:{ //传参这个和jqgrid中的postData是一样的,就是接口请求的参数
"creatTime":getdate()
},
columns: [ //下面是格式化数据
{
field: 'id', //需要的字段id
title: '日期', //列名称
},
{
field: 'h',
title: '商户名',
},
{
field: 'game_id',
title: '游戏名',
formatter:function(cellvalue){
var str = "";
for(var i =0;i<game_type_arr.length;i++){
if(cellvalue == game_type_arr[i]["game_id"]){
str = game_type_arr[i]["game_name"];
return str;
}
}
return str;
}
},
{
field: 'h',
title: '玩家数',
},
{
field: 'rounds',
title: '游戏局数',
},
{
field: 'bets',
title: '投注金额',
formatter:function(cellvalue){
return (cellvalue/10000).toFixed(4);
}
},
{
field: 'effects',
title: '有效投注量',
formatter:function(cellvalue){
return (cellvalue/10000).toFixed(4);
}
},
{
field: 'total_revenue',
title: '中奖金额',
formatter:function(cellvalue){
return (cellvalue/10000).toFixed(4);
}
},
{
field: 'fees',
title: '房费',
formatter:function(cellvalue){
return (cellvalue/10000).toFixed(4);
}
},
{
field: 'total_win_agent',
title: '商户盈亏',
formatter:function(cellvalue){
return (cellvalue/10000).toFixed(4);
}
},
{
field: 'rtp',
title: 'RTP(%)',
formatter:function(cellvalue,rowObject){ //自己格式化数据;这里需要注意的是,他的参数顺序和jqgrid不太一样,需要注意
var str ="";
if(rowObject.effects){
str = ((rowObject.total_win_agent / rowObject.effects)*100).toFixed(2) + "%";
}else{
str = "-";
}
return str;
}
}
],
//在哪一列展开树形
treeShowField: 'id',//属性结构中三角的位置
//指定父id列
parentIdField: "parent",//根据这个字段来确定哪个是父元素
onResetView: function(data) {
//console.log('load');
$table.treegrid({
initialState: 'collapsed',// 所有节点都折叠
// initialState: 'expanded',// 所有节点都展开,默认展开
treeColumn: 0,//默认展开几层,0代表全部不展开
// expanderExpandedClass: 'glyphicon glyphicon-minus', //图标样式
// expanderCollapsedClass: 'glyphicon glyphicon-plus',
onChange: function() {
$table.bootstrapTable('resetWidth');
}
});
},

  到这里就可以正确的加载第一次的数据了。但是如果我们有自己的搜索条件,需要改变queryParams中的值就可以了,请看下面的代码:

  //点击搜索按钮
function search_bth(){
var user_number = $("#user_number").val();//商户号
var player_id = $("#player_id").val();//玩家账号
var record_id = $("#record_id").val();//游记录ID
var game_id = $("#game_id").val();//游戏局ID
var game_type = $("#game_type").val();//游戏类型
var creat_time = $("#start_time").val();//游戏时间
var filter_data = {}
//去掉空格校验
if($.trim(user_number)){
filter_data.agentId = $.trim(user_number);
}
if($.trim(player_id)){
filter_data.account = $.trim(player_id);
}
if($.trim(record_id)){
filter_data.orderId = $.trim(record_id);
}
if($.trim(game_id)){
filter_data.roundId = $.trim(game_id);
}
if($.trim(game_type)){
filter_data.gameId = $.trim(game_type);
}
if($.trim(creat_time)){
filter_data.creatTime = $.trim(creat_time);
} console.log(filter_data);
//debugger;
//$("#table_list_1").bootstrapTable('destroy');
// $('#table_list_1').bootstrapTable({
// queryParams:filter_data,
// url: "__ROOT__/public/js/data.json",
// });
$('#table_list_1').bootstrapTable('refresh',{query:filter_data})//等到我们需要传输的参数,直接刷新页面
}

  最重要的就是37行的代码,我们用query就可以重新发送请求,然后获取到最新的数据了!

bootstrap-table 常用总结-1的更多相关文章

  1. JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

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

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

  3. ABP+AdminLTE+Bootstrap Table权限管理系统第五节--WBEAPI及SwaggerUI

    一,Web API ABP的动态WebApi实现了直接对服务层的调用(其实病没有跨过ApiController,只是将ApiController公共化,对于这一点的处理类似于MVC,对服务端的 调用没 ...

  4. ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十二节--小结,Bootstrap Table之角色管理

    返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 很多人说ABP不适合高并发大型,有一定的道理,但是我觉得还是可以的,就看架构师的能力了,哈哈,我之前公司就是ABP ...

  5. ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十七节--Quartz与ABP框架Abp.Quartz及扩展

    ABP+AdminLTE+Bootstrap Table权限管理系统一期 Github:https://github.com/Jimmey-Jiang/ABP-ASP.NET-Boilerplate- ...

  6. bootstrap table使用参考

    https://www.cnblogs.com/landeanfen/p/5821192.html  转载 阅读目录 一.x-editable组件介绍 二.bootstrapTable行内编辑初始方案 ...

  7. ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十五节--缓存小结与ABP框架项目中 Redis Cache的实现

    返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 缓存 为什么要用缓存 为什么要用缓存呢,说缓存之前先说使用缓存的优点. 减少寄宿服务器的往返调用(round-tr ...

  8. [转]手把手教你--Bootstrap Table表格插件及数据导出(可导出Excel2003及Exce2007)

    原文地址:https://blog.csdn.net/javayoucome/article/details/80081771 1.介绍 Bootstrap Table介绍见官网:http://boo ...

  9. bootstrap table教程--使用入门基本用法

    笔者在查询bootstrap table资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网.但是对于某部分技术人员来说,入门还是不够详 ...

  10. Bootstrap框架常用总结

    Bootstrap框架常用标签:    标题标签:<h1>-<h6>        bootstrap中也设置的相同的样式  - 若要使用 必须使用空标签来定义 比如<s ...

随机推荐

  1. ef6+mysql的bug

    entityFramework6在mysql数据库下,用linq进行排序会出现一个bug. Expression<Func<blog, bool>> expr_filter=p ...

  2. JetBrains 迷你地图插件 CodeGlance

    JetBrains 本身不带迷你地图功能,但可以通过插件的形式来实现. 直接在 Settings 里边搜索 CodeGlance,安装后重启 IDE 就有了.

  3. 学习之Redis(一)

    一.redis简介 一般学习,最好先去官网,之所以建议看官网,是因为这是一手的学习资料,其他资料都最多只能算二手,一手资料意味着最权威,准确性最高.https://redis.io/topics/in ...

  4. Spring Data JPA 的一对多,一对多,多对多操作

    一对一的关联关系   需求:用户与角色的一对一的关联关系 用户:一方 角色:一方     创建 Users 实体 @Entity @Table(name = "t_users") ...

  5. BZOJ11208 宠物收养所

    最近,阿Q开了一间宠物收养所.收养所提供两种服务:收养被主人遗弃的宠物和让新的主人领养这些宠物.每个领养者都希望领养到自己满意的宠物,阿Q根据领养者的要求通过他自己发明的一个特殊的公式,得出该领养者希 ...

  6. 开发 Laravel 扩展的基本流程

    创建一个空的laravel项目 composer create-project --prefer-dist laravel/laravel pkg 在新建的 laravel 项目中建立如下目录 qia ...

  7. 【Babel】293- 初学 Babel 工作原理

    戳蓝字「前端技术优选」关注我们哦! 前言 babel Babel 对于前端开发者来说应该是很熟悉了,日常开发中基本上是离不开它的. 已经9102了,我们已经能够熟练地使用 es2015+ 的语法.但是 ...

  8. 【系列专题】ECMAScript 重温系列(10篇全)

    ES6 系列ECMAScript 2015 [ES]150-重温基础:ES6系列(一) [ES]151-重温基础:ES6系列(二) [ES]152-重温基础:ES6系列(三) [ES]153-重温基础 ...

  9. C#中关于值类型和引用类型的区别

    小声哔哔 一直以来对于值类型与引用类型之间的区别都不是特别清晰,直到踩了坑.... 正好最新闲暇,便想着梳理梳理这一两年来遇到的奇葩问题和解决方案,顺便就把它给拎出来记一下,免得以后再摔跤 值类型与引 ...

  10. 使用 yum 安装Docker(CentOS 7下)

    使用 yum 安装(CentOS 7下) Docker 要求 CentOS 系统的内核版本高于 3.10 ,查看本页面的前提条件来验证你的CentOS 版本是否支持 Docker . 通过 uname ...