最近我們的表格中,需要更改數據的顯示方式,就是jqgrid中以樹形的方式顯示。請先看圖: 就是簡單的這種從屬方式。但是因為這個沒有找到官方的文檔(後來找到了,但是發現是翻譯過來的,也不是很清楚),所以做出來稍微的有點困難,好在方法總比困難多。這個問題還是解決了,在這裡我記錄一下。方便以後的小伙伴們運 ...
最近我們的表格中,需要更改數據的顯示方式,就是jqgrid中以樹形的方式顯示。請先看圖:
就是簡單的這種從屬方式。但是因為這個沒有找到官方的文檔(後來找到了,但是發現是翻譯過來的,也不是很清楚),所以做出來稍微的有點困難,好在方法總比困難多。這個問題還是解決了,在這裡我記錄一下。方便以後的小伙伴們運用,如果有大神的話,也歡迎指出錯誤。
首先是在jqgrid中需要添加東西,請看下麵的demo:
1 treeGrid: true, 2 treeGridModel: 'adjacency', //固定寫法,還有其他的一種方式,但是那種沒有研究過 3 ExpandColumn : 'agent_id', // 4 ExpandColClick: true, //能不能點擊 false就不能點擊了,true就是能點擊 5 treeReader : { 6 //前面的四個參數需要在json中展示 7 level_field: "level", //級別,主要是就是說展現出來是第幾層,最高級是0,然後是1,2,3…… 8 parent_id_field: "parent", //用來標識哪個是父元素(需要時字元串格式:“parent”:“123”是可以的,但是如果是“parent”:123就錯了) 9 leaf_field: "is_leaf", //是不是根節點,false表示這個不是最後的節點,true表示是最後的節點。(如果這個是最後的節點,但是設置的還是false,會發生一種情況,就是點擊這個又重新載入了一遍數據) 10 expanded_field: "expanded", //是不是需要展開,false不展開,true展開 11 loaded_field:true // 12 },
就是這12行代碼,其實上面的寫在html中,前端的任務就算是完成了。但是考慮到還需要後臺數據的配合,所以下麵還是需要說一下, json數據的格式。
下麵貼出來數據的格式:
1 [ 2 { 3 "agent_id": "2019-04-17", 4 "game_id": "134283522", 5 "level": 0, 6 "is_leaf": false, 7 "players": 42, 8 "rounds": 42, 9 "bets": 13650000, 10 "effects": 26650000, 11 "total_revenue": 8850000, 12 "fees": 650000, 13 "total_win_agent": -8850000, 14 "id":"134283522", 15 "expanded":false 16 }, { 17 "game_id": "134283522", 18 "agent_id": 96292, 19 "players": 42, 20 "rounds": 42, 21 "bets": "13650000", 22 "effects": "26650000", 23 "fees": "650000", 24 "total_win_agent": "-8850000", 25 "total_revenue": "8850000", 26 "level": 1, 27 "is_leaf": true, 28 "parent": "134283522", 29 "expanded":false 30 }, { 31 "agent_id": "2019-04-17", 32 "game_id": "134284035", 33 "level": 0, 34 "is_leaf": false, 35 "players": 6, 36 "rounds": 6, 37 "bets": 1800000, 38 "effects": 950000, 39 "total_revenue": 150000, 40 "fees": 50000, 41 "total_win_agent": -150000, 42 "id":"134284035", 43 "expanded":false 44 }, { 45 "game_id": "134284035", 46 "agent_id": 96292, 47 "players": 6, 48 "rounds": 6, 49 "bets": "1800000", 50 "effects": "950000", 51 "fees": "50000", 52 "total_win_agent": "-150000", 53 "total_revenue": "150000", 54 "level": 1, 55 "is_leaf": true, 56 "parent": "134284035" 57 }, 58 { 59 "game_id": "134284035", 60 "agent_id": 96292, 61 "players": 6, 62 "rounds": 6, 63 "bets": "1800000", 64 "effects": "950000", 65 "fees": "50000", 66 "total_win_agent": "-150000", 67 "total_revenue": "150000", 68 "level": 1, 69 "is_leaf": false, 70 "parent": "134284035", 71 "id":"123" 72 }, 73 { 74 "parent":"123", 75 "game_id": "134284035", 76 "agent_id": 96292, 77 "players": 6, 78 "rounds": 6, 79 "bets": "1800000", 80 "effects": "950000", 81 "fees": "50000", 82 "total_win_agent": "-150000", 83 "total_revenue": "150000", 84 "level": 2, 85 "is_leaf": true 86 } 87 ]
裡面除了原來的數據,還需要把咱們需要的東西加進來。而且因為是個數組,所以這裡面的數據是有順序的,如果順序不對的話,顯示就有問題了。這裡需要註意