jqgrid three 树形结构
程序员文章站
2022-03-26 14:37:37
最近我们的表格中,需要更改数据的显示方式,就是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 ]
里面除了原来的数据,还需要把咱们需要的东西加进来。而且因为是个数组,所以这里面的数据是有顺序的,如果顺序不对的话,显示就有问题了。这里需要注意
上一篇: 图解Java设计模式之桥接模式
下一篇: JS异步单线程与内置对象面试