bootstrap-table 常用总结-1

旧城等待， 2023-06-05 11:24 1阅读 0赞

两种表格工具，今天都用到了，一种是我前几篇写到过的jqgrid，[（传送门）][Link 1]另一个就是bootstrap-table了。用过之后会发现，两种表格的方式大同小异，但是为什么这次要换成bootstrap-table呢，是因为我们在写树形结构，由于jqgrid 的树形结构的数据结构和字段要求的太多的，导致了后台再提供数据的时候需要格式化（实话实说，这个要求的有点多），如果有兴趣，大家可以看我这篇博客[（传送门）][Link 2]。所以，我们决定使用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就可以重新发送请求，然后获取到最新的数据了！

转载于:https://www.cnblogs.com/daniao11417/p/11424594.html

[Link 1]: https://www.cnblogs.com/daniao11417/p/10135127.html
[Link 2]: https://www.cnblogs.com/daniao11417/p/10790027.html