兩種表格工具，今天都用到了，一種是我前幾篇寫到過的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就可以重新發送請求，然後獲取到最新的數據了！