具有嵌套可扩展值的可扩展行?

时间:2016-05-03 17:57:23

标签: json ag-grid

我的数据包含一个列,其值为JSON格式。 我想完成两件事:

  1. 展开每一行,以便列出其值。
  2. 展开特定值,因此如果其值为JSON格式,则键/值也将显示在第1项列表中的嵌套列表中。
  3. 例如:

    这些是3种不同的结果:

    enter image description here

    这是第一个被扩展的结果:

    enter image description here

    非常感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

我刚刚第一次实施ag-grid,并且上面有类似的用例。由于我只有免费版本,所以我按照文件浏览器示例通过在将数据提供给网格之前对数据进行整形来实现嵌套行(即模型 - > ViewModel转换)。

网格所需的形状几乎是分层数据的标准表示,您只需要嵌套数据的'children'数组(这取自FileBrowser示例):

{ headerName: "Name", field: "name", width: 250,
    cellRenderer: 'group'
},

注意,您可以在切换嵌套行(父子表示形式)的列之前使用非嵌套列。

要将json属性转换为键值对数组,请参阅此StackOverflow文章Convert object's properties and values to array of key value pairs

启用嵌套行的步骤如下:

  1. cellRenderer 属性添加到列defn ,该列将打开嵌套的单元格。您可能认为您也需要cellRendererParams属性,但这只是将非文本内容添加到单元格中。

    getNodeChildDetails: function(file) {
        if (file.folder) {
            return {
                group: true,
                children: file.children,
                expanded: file.open
            };
        } else {
            return null;
        }
    },
    
  2. 在gridOptions结构中实现 getNodeChildDetails 。请注意,下面的'file'是节点数据,file.folder是数据的标志(不显示),告诉该函数是否有要显示的嵌套行。

    icons: {
        groupExpanded: '<i class="fa fa-minus-square-o"/>',
        groupContracted: '<i class="fa fa-plus-square-o"/>'
    },
    
  3. 将一个图标对象添加到gridOptions结构。

    $id    = $_GET['id'];
    $value = $_GET['val'];
    
    // database connection here
    
    try{
        $db_conn->beginTransaction();
        // inserting
        $stm1 = $db_conn->prepare("INSERT into table1 (col) VALUES (?)");
        $stm1->execute(array($value));
    
        // updating
        $stm2 = $db_conn->prepare("UPDATE table2 SET col = "a new row inserted" WHERE id = ?");
        $stm2->execute(array($id));
    
        $db_conn->commit();
    }
    catch(PDOException $e){
        $db_conn->rollBack();
    }
    
  4. 可能的错误

    我尝试实现 getRowHeight 功能(在gridOptions中),但嵌套行切换立即停止工作。如果我能找到原因,我会在以后发布。