zoukankan      html  css  js  c++  java
  • jqgrid three 树形结构

      最近我们的表格中,需要更改数据的显示方式,就是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 ]

    里面除了原来的数据,还需要把咱们需要的东西加进来。而且因为是个数组,所以这里面的数据是有顺序的,如果顺序不对的话,显示就有问题了。这里需要注意

  • 相关阅读:
    hdu 1576 A/B(exgcd、乘法逆元+整数快速幂)
    CSS3带小图标垂直下拉菜单
    CSS3动画表单
    灰色3D按钮组合
    半透明菜单导航
    CSS3透明背景表单
    CSS3手风琴菜单 可同时折叠多个菜单
    jQuery图片下滑切换焦点图
    jQuery消息提示框插件Tipso
    jQuery自动轮播图片焦点图
  • 原文地址:https://www.cnblogs.com/daniao11417/p/10790027.html
Copyright © 2011-2022 走看看