两种表格工具，今天都用到了，一种是我前几篇写到过的jqgrid，（传送门）另一个就是bootstrap-table了。用过之后会发现，两种表格的方式大同小异，但是为什么这次要换成bootstrap-table呢，是因为我们在写树形结构，由于jqgrid 的树形结构的数据结构和字段要求的太多的，导致了后台再提供数据的时候需要格式化（实话实说，这个要求的有点多），如果有兴趣，大家可以看我这篇博客（传送门）。所以，我们决定使用bootstrap-table的树形结构来结果这个问题。引入css和js文件是第一步，这里我放cdn地址，如果失效了，大家请自行下载
1 <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
2 <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
3 <link href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css" rel="stylesheet"> //树形结构的文件，如果没有用到，请删除
4 <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
5 <script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
6 <script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/extensions/treegrid/bootstrap-table-treegrid.js"></script> //树形结构的文件，如果没有用到，请删除
7 <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")；
1 $table.bootstrapTable({
2 url: base_url + '/Gamecharm/show.php',//接口地址
3 //url: "__ROOT__/public/js/data.json",//我本地测试的接口地址
4 method:"get",//接口地址获取的方式，post或者get
5 //data:data,//如果是我们自己用ajax获取数据，或者说数据就是本地的，需要放在这里
6 idField: 'id',//父元素的标识，这里我们使用的是id
7 pageNumber:1,//默认第几页
8 responseHandler:function(res) { //这个其实是和jqgrid中的jsonReader ，就是说bootstrap中和jqgrid一样，都有默认的字段，如果后台给我们的不是默认的，所以就需要我们自己更改 如果还是不明白，请看链接
9 return {
10 "data": res.datas //主数据
11 //"total": res.result.total
12 };
13 },
14 queryParams:{ //传参这个和jqgrid中的postData是一样的，就是接口请求的参数
15 "creatTime":getdate()
16 },
17 columns: [ //下面是格式化数据
18 {
19 field: 'id', //需要的字段id
20 title: '日期', //列名称
21 },
22 {
23 field: 'h',
24 title: '商户名',
25 },
26 {
27 field: 'game_id',
28 title: '游戏名',
29 formatter:function(cellvalue){
30 var str = "";
31 for(var i =0;i<game_type_arr.length;i++){
32 if(cellvalue == game_type_arr[i]["game_id"]){
33 str = game_type_arr[i]["game_name"];
34 return str;
35 }
36 }
37 return str;
38 }
39 },
40 {
41 field: 'h',
42 title: '玩家数',
43 },
44 {
45 field: 'rounds',
46 title: '游戏局数',
47 },
48 {
49 field: 'bets',
50 title: '投注金额',
51 formatter:function(cellvalue){
52 return (cellvalue/10000).toFixed(4);
53 }
54 },
55 {
56 field: 'effects',
57 title: '有效投注量',
58 formatter:function(cellvalue){
59 return (cellvalue/10000).toFixed(4);
60 }
61 },
62 {
63 field: 'total_revenue',
64 title: '中奖金额',
65 formatter:function(cellvalue){
66 return (cellvalue/10000).toFixed(4);
67 }
68 },
69 {
70 field: 'fees',
71 title: '房费',
72 formatter:function(cellvalue){
73 return (cellvalue/10000).toFixed(4);
74 }
75 },
76 {
77 field: 'total_win_agent',
78 title: '商户盈亏',
79 formatter:function(cellvalue){
80 return (cellvalue/10000).toFixed(4);
81 }
82 },
83 {
84 field: 'rtp',
85 title: 'RTP(%)',
86 formatter:function(cellvalue,rowObject){ //自己格式化数据；这里需要注意的是，他的参数顺序和jqgrid不太一样，需要注意
87 var str ="";
88 if(rowObject.effects){
89 str = ((rowObject.total_win_agent / rowObject.effects)*100).toFixed(2) + "%";
90 }else{
91 str = "-";
92 }
93 return str;
94 }
95 }
96 ],
97 //在哪一列展开树形
98 treeShowField: 'id',//属性结构中三角的位置
99 //指定父id列
100 parentIdField: "parent",//根据这个字段来确定哪个是父元素
101 onResetView: function(data) {
102 //console.log('load');
103 $table.treegrid({
104 initialState: 'collapsed',// 所有节点都折叠
105 // initialState: 'expanded',// 所有节点都展开，默认展开
106 treeColumn: 0,//默认展开几层，0代表全部不展开
107 // expanderExpandedClass: 'glyphicon glyphicon-minus', //图标样式
108 // expanderCollapsedClass: 'glyphicon glyphicon-plus',
109 onChange: function() {
110 $table.bootstrapTable('resetWidth');
111 }
112 });
113 },到这里就可以正确的加载第一次的数据了。但是如果我们有自己的搜索条件，需要改变queryParams中的值就可以了，请看下面的代码：
1 //点击搜索按钮
2 function search_bth(){
3 var user_number = $("#user_number").val();//商户号
4 var player_id = $("#player_id").val();//玩家账号
5 var record_id = $("#record_id").val();//游记录ID
6 var game_id = $("#game_id").val();//游戏局ID
7 var game_type = $("#game_type").val();//游戏类型
8 var creat_time = $("#start_time").val();//游戏时间
9 var filter_data = {}
10 //去掉空格校验
11 if($.trim(user_number)){
12 filter_data.agentId = $.trim(user_number);
13 }
14 if($.trim(player_id)){
15 filter_data.account = $.trim(player_id);
16 }
17 if($.trim(record_id)){
18 filter_data.orderId = $.trim(record_id);
19 }
20 if($.trim(game_id)){
21 filter_data.roundId = $.trim(game_id);
22 }
23 if($.trim(game_type)){
24 filter_data.gameId = $.trim(game_type);
25 }
26 if($.trim(creat_time)){
27 filter_data.creatTime = $.trim(creat_time);
28 }
29
30 console.log(filter_data);
31 //debugger;
32 //$("#table_list_1").bootstrapTable('destroy');
33 // $('#table_list_1').bootstrapTable({
34 // queryParams:filter_data,
35 // url: "__ROOT__/public/js/data.json",
36 // });
37 $('#table_list_1').bootstrapTable('refresh',{query:filter_data})//等到我们需要传输的参数，直接刷新页面
38 }最重要的就是37行的代码，我们用query就可以重新发送请求，然后获取到最新的数据了！
来源：oschina
链接：https://my.oschina.net/u/4378826/blog/3412770